How to stream video and audio in the browser between two devices using WebRTC (Web Real-Time Communication) — a very simple HTML / Javascript sample implementation using PeerJS
2 min readNov 19, 2022
Try it live here:
<html>
<head>
<meta charset="utf-8">
<title>Stream video and audio between two devices</title>
</head>
<body>
<center>
<h1> Stream video and audio between two devices </h1>
<br>
<br>
<video playsinline autoplay height=200 width=350 id=local></video>
<br>
<br>
<video playsinline autoplay height=200 width=350 id=remote></video>
<br>
<br>
<div id=url></div>
</center>
<script src="https://unpkg.com/peerjs@1.3.2/dist/peerjs.min.js">
</script>
<script>
const local = document.getElementById('local');
const remote = document.getElementById('remote');
const url = document.getElementById('url');
var peerid;
var caller;
function start() {
if (!('srcObject' in local)) {
alert("no src object in video element - cannot stream");
return;
}
peerid = getUrlVars("id");
caller = !(peerid == null || peerid == "");
if (peerid == null || peerid == "") {
peerid = Math.floor(Math.random() * 1000000000) + "" + Math.floor(Math.random() * 1000000000);
url.innerHTML = "Connect to the stream from this device at this URL: < br > " +
// replace this URL with yours
"https://syncagio.neocities.org/rtc/index.html?id=" + peerid;
}
getMedia();
}
async function getMedia() {
try {
var localStream = await
navigator.mediaDevices.getUserMedia({
video: true,
audio: true
});
console.log('received local stream: ' + localStream);
local.srcObject = localStream;
var peer;
if (caller) peer = new Peer({
'debug': 3
});
else peer = new Peer(peerid, {
'debug': 3
});
peer.on('open', function(id) {
console.log('opened with peer id: ' + id);
var call;
if (caller) {
call = peer.call(peerid, localStream);
setupCall(call);
} else {
peer.on('call', function(call) {
call.answer(localStream);
setupCall(call)
});
}
});
peer.on('error', function(err) {
console.log(err);
});
} catch (err) {
console.log(err);
}
}
function setupCall(call) {
call.on('stream', function(remoteStream) {
console.log('remote stream recieved');
remote.srcObject = remoteStream;
});
call.on('error', function(err) {
console.log(err);
});
}
function getUrlVars(s) {
var vars = {};
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m, key, value) {
vars[key] = value;
});
if (vars[s] != null) return decodeURI(vars[s]);
else return null;
}
start();
</script>
</body>
</html>
