JSFiddle - React, Tailwind, and code Playground
HTML
<video id="local_video" autoplay="true" muted="true"></video>
<video id="remote_video" autoplay="true"></video>
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
<script>
var pc1 = new RTCPeerConnection({"iceServers": []}, { optional: [{ googDscp: true}] });
var pc2 = new RTCPeerConnection({"iceServers": []}, { optional: [{ googDscp: true}] });
pc2.onaddstream = function(evt) {
var video = document.getElementById('remote_video');
video.srcObject = evt.stream;
};
function negotiate(removeVp8) {
return pc1.createOffer()
.then(offer => {
if (removeVp8) {
offer.sdp = offer.sdp.replace("120 121", "121 120"); // FF
offer.sdp = offer.sdp.replace("100 101", "101 100"); // Chrome
}
pc1.setLocalDescription(offer)
return pc2.setRemoteDescription(offer);
})
.then(_ => {
return pc2.createAnswer();
})
.then(answer => {
pc2.setLocalDescription(answer);
return pc1.setRemoteDescription(answer);
});
}
navigator.mediaDevices.getUserMedia({ audio: true, video: true })
.then(function(stream) {
var video = document.getElementById('local_video');
video.srcObject = stream;
pc1.addStream(stream);
negotiate();
});
pc2.onicecandidate = function (event) {
if (event.candidate) {
pc1.addIceCandidate(event.candidate);;
}
};
pc1.onicecandidate = function (event) {
if (event.candidate) {
pc2.addIceCandidate(event.candidate);;
}
};
</script>