replaceTrack demo with info

by jib1

HTML

<video id="v1" width="160" height="120" muted="muted" autoplay></video>
<video id="v2" width="160" height="120" muted="muted" autoplay></video><br>
<button onclick="start()">Start!</button>
<button id="flipButton" onclick="flip()" disabled>Flip!</button>
<div id="div"><br><div id="div2"></div>
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>

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);
pc2.onaddstream = e => v2.srcObject = e.stream;

var constraints = { video: { width: 1280, height: 730, frameRate: 10 } };
var streams = [];
var v1t1, v1t2, v1f1, v1f2;
var v2t1, v2t2, v2f1, v2f2;

var haveMedia = () => Promise.all([new Promise(r => v1.onloadedmetadata = r),
                                   new Promise(r => v2.onloadedmetadata = r)]);
function start() {
  navigator.mediaDevices.getUserMedia({ fake: true, video: true })
  .then(stream => streams[1] = stream)
  .then(() => navigator.mediaDevices.getUserMedia(constraints))
  .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))
  .then(() => haveMedia)
  .then(() => { v1t1 = v1.currentTime; v1f1 = v1.mozPaintedFrames;
                v2t1 = v2.currentTime; v2f1 = v2.mozPaintedFrames; })
  .then(() => repeat(1000, () => {
    v1t2 = v1.currentTime; v1f2 = v1.mozPaintedFrames;
    v2t2 = v2.currentTime; v2f2 = v2.mozPaintedFrames;
    update(""+ v1.videoWidth +"x"+ v1.videoHeight +" ("+
           ((v1f2-v1f1) / (v1t2-v1t1)).toFixed(2) +" fps) --> "+
           v2.videoWidth +"x"+ v2.videoHeight +" ("+
           ((v2f2-v2f1) / (v2t2-v2t1)).toFixed(2) +" fps)");
    v1t1 = v1t2; v1f1 = v1f2;
    v2t1 = v2t2; v2f1 = v2f2;
  }))
  .then(() => (log("Connected. Hit flip!"), flipButton.disabled = false))
  .catch(log);
}

var flipped = 0;

function flip() {
  flipped = 1 - flipped;
  return pc1.getSenders()[0].replaceTrack(streams[flipped].getVideoTracks()[0])
  .then(() =>...