JSFiddle - React, Tailwind, and code Playground

by xdumaine

HTML

<button onclick="start()">
  Start Call
</button>

<button onclick="stopPc1()">
Stop PC1
</button>

<button onclick="stopPc2()">
Stop PC2
</button>

CSS

video { height: 100px; width: 150px; }

JavaScript

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

window.pc1 = pc1;
window.pc2 = pc2;
pc1.oniceconnectionstatechange = (e) => {
	console.log('PC1 ice connection state change', e.target.iceConnectionState);
}
pc2.oniceconnectionstatechange = (e) => {
	console.log('PC2 ice connection state change', e.target.iceConnectionState);
}

pc1.onicecandidate = (e) => console.log(e.candidate) && e.candidate && pc2.addIceCandidate(e.candidate);
pc2.onicecandidate = (e) => e.candidate && pc1.addIceCandidate(e.candidate);

const attachVideo = (s) => {
	const v = document.createElement('video');
  v.autoplay = true;
  v.srcObject = s;
  document.body.append(v);
  return v;
}

let pc1v, pc2v;
pc1.addEventListener('track', (e) => {
	
	console.log('PC1 got track', e);
  pc1v = attachVideo(e.streams[0])
  
});
pc2.addEventListener('track', (e) => {
	if (pc2v) return;
	console.log('PC2 got track', e);
  pc2v = attachVideo(e.streams[0]);
})

start = function () {
	navigator.mediaDevices.getUserMedia({ video: true, audio: true })
    .then(s => {
      pc1.addStream(s);
      return navigator.mediaDevices.getUserMedia({ video: true, audio: true })
    }).then(s => {
      pc2.addStream(s);
      return pc1.createOffer();
    }).then(offer => {
      console.log('PC1 offer created');
      pc1.setLocalDescription(offer);
      pc2.setRemoteDescription(offer);
      return pc2.createAnswer();
    }).then(answer => {
      console.log('PC2 answer created');
      pc2.setLocalDescription(answer);
      return pc1.setRemoteDescription(answer);
    });

    console.log('getting streams');
}


stopPc1 = function stopPc1 () {
	pc1.close();
}

stopPc2 = function stopPc2 () {
	pc2.close();
}