replaceTrack demo

by jib1

HTML

<video id="v1" height="120" width="160" autoplay></video>
<video id="v2" height="120" width="160" autoplay></video><br>
<button onclick="flip()">Flip!</button>
<div id="div">

JavaScript

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

var add = (pc, can) => can && pc.addIceCandidate(can).catch(log);
pc1.onicecandidate = e => add(pc2, e.candidate);
pc2.onicecandidate = e => add(pc1, e.candidate);

var streams = [];

navigator.mediaDevices.getUserMedia({fake:true, video:true, audio:true})
  .then(stream => streams[1] = stream)
  .then(() => navigator.mediaDevices.getUserMedia({video: true, audio: true}))
  .then(stream => pc1.addStream(v1.srcObject = streams[0] = stream))
  .then(() => pc1.createOffer())
  .then(offer => pc1.setLocalDescription(offer))
  .then(() => pc2.setRemoteDescription(pc1.localDescription))
  .then(() => pc2.createAnswer())
  .then(answer => pc2.setLocalDescription(answer))
  .then(() => pc1.setRemoteDescription(pc2.localDescription))
  .catch(log);

pc2.onaddstream = e => v2.srcObject = e.stream;

var flipped = 0;

function flip() {
  flipped = 1 - flipped;
  Promise.all(pc1.getSenders().map(sender =>
      sender.replaceTrack((sender.track.kind == "audio")?
                          streams[flipped].getAudioTracks()[0] :
                          streams[flipped].getVideoTracks()[0])))
  .then(() => log("Flip!"))
  .catch(log);
}

var log = msg => div.innerHTML += msg +"<br>";