JSFiddle - React, Tailwind, and code Playground

by jib1

HTML

<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
<video id="remoteVideo" width="320" height="240" autoplay></video>
<div id="div"></div>

JavaScript

const pc1 = new RTCPeerConnection(), pc2 = new RTCPeerConnection();

pc2.ontrack = e => {
  console.log('track event muted = ' + e.track.muted);
  e.track.onunmute = () => {
    console.log('track unmuted');
    remoteVideo.srcObject = e.streams[0];
  }
};

pc1.onicecandidate = e => pc2.addIceCandidate(e.candidate);
pc2.onicecandidate = e => pc1.addIceCandidate(e.candidate);
pc2.oniceconnectionstatechange = () =>
  console.log('PC2 ice state ' + pc2.iceConnectionState);

(async () => {
  const stream = await navigator.mediaDevices.getUserMedia({video: true});
  pc1.addTrack(stream.getVideoTracks()[0], stream);
  await pc1.setLocalDescription(await pc1.createOffer());
  await pc2.setRemoteDescription(pc1.localDescription);
  await pc2.setLocalDescription(await pc2.createAnswer());
  await pc1.setRemoteDescription(pc2.localDescription);
})();
const console = {log: msg => div.innerHTML += msg + "<br>"};