Skip to content

Instantly share code, notes, and snippets.

@joduplessis
Created May 2, 2022 08:18
Show Gist options
  • Save joduplessis/2596c3e4c6ddeeb040be97d13fb5e560 to your computer and use it in GitHub Desktop.
Save joduplessis/2596c3e4c6ddeeb040be97d13fb5e560 to your computer and use it in GitHub Desktop.
Basic (very old) WebRTC test
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<video autoplay controls></video>
<button onClick="javascript:start()">Connect</button>
<script type="text/javascript" src="https://unpkg.com/mqtt/dist/mqtt.min.js"></script>
<script type="text/javascript">
// WebRTC stuff
const video = document.querySelector('video');
const constraints = { audio: true, video: true };
const configuration = { iceServers: [{urls: 'stun:stun.example.org'}] };
const peerConnection = new RTCPeerConnection(configuration);
// Signalling stuff
const cid = new Date().getTime();
const topic = "yack_webrtc";
const client = mqtt.connect("ws://iot.eclipse.org:80/ws", {
clean: false,
clientId: cid,
will: {
topic: 'death',
payload: 'me'
}
});
const signaling = {
send: (payload) => {
const message = {
sender: cid,
type: 'WEBRTC',
payload
};
client.publish(topic, JSON.stringify(message));
}
}
// On successful connection
client.on('connect', function () {
console.log('Connected, ready.', cid, topic);
client.subscribe(topic);
});
// This is where we start:
// Get both video and audio streams from user's camera
function start() {
navigator.mediaDevices.getUserMedia(constraints)
.then(stream => {
peerConnection.addStream(stream);
peerConnection.createOffer()
.then(sdp => peerConnection.setLocalDescription(sdp))
.then(() => signaling.send(peerConnection.localDescription))
.catch(error => console.error(error));
})
.catch(error => console.error(error));
}
client.on('message', async (topic, msg) => {
const message = JSON.parse(msg.toString());
// Only handle messages that we didn't send
if (message.sender != cid) {
console.log(`::${message.payload.type}::`);
if (message.payload.type == "offer") {
peerConnection.setRemoteDescription(message.payload)
.then(() => peerConnection.createAnswer())
.then(sdp => peerConnection.setLocalDescription(sdp))
.then(() => signaling.send(peerConnection.localDescription))
.catch(error => console.error(error));
}
if (message.payload.type == "answer") {
peerConnection.setRemoteDescription(message.payload)
.catch(error => console.error(error));
}
if (message.payload.type == "candidate") {
const c = new RTCIceCandidate(message.payload.candidate)
peerConnection.addIceCandidate(c);
}
}
});
peerConnection.onaddstream = (event) => {
console.log('onaddstream', event);
video.srcObject = event.stream;
}
peerConnection.onicecandidate = (event) => {
const { candidate } = event;
// If the event's candidate property is null, ICE gathering has finished.
if (candidate) {
signaling.send({
candidate,
type: "candidate"
})
}
};
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment