Wanna clone some MediaStreamTracks?

by Andreas Pehrson

HTML

<script src="https://webrtc.github.io/adapter/adapter-1.1.0.js"></script>
<video id="v1" style="width:150px;height:100px;"></video>
<video id="v2" style="width:150px;height:100px;"></video>

<br />

<button id="gum" onclick="original();">
gUM me up!
</button>
<button id="stopOriginal" onclick="stopOriginal();" disabled="true">
Stop original track
</button>
<button id="toggleEnabledOriginal" onclick="toggleEnabledOriginal();" disabled="true">
Enable/disable original track
</button>

<br />

<button id="clone" onclick="clone();" disabled="true">
Clone it 100 times!
</button>
<button id="stopClone" onclick="stopClone();" disabled="true">
Stop cloned track
</button>
<button id="toggleEnabledClone" onclick="toggleEnabledClone();" disabled="true">
Enable/disable cloned track
</button>

<br />

<h3 id="error" hidden="true">
</h3>

JavaScript

var originalTrack, clonedTrack;

window.MediaStream = window.MediaStream || window.webkitMediaStream;

function original() {
  navigator.mediaDevices.getUserMedia({video: true}).then(s => {
    originalTrack = s.getTracks()[0];
    v1.srcObject = new MediaStream([originalTrack]);
    v1.play();
    setOriginalUIEnabled(true);
  }).catch(err => {
    setError("getUserMedia failed! Are you on Chrome? gUM is not allowed on insecure origins. Try opening the fiddle in a new tab!");
  });
}

function clone() {
  if (!clonedTrack) {
    if (!originalTrack.clone) {
      setError("Oops, your browser doesn't support cloning!");
      return;
    }
    clonedTrack = originalTrack.clone();
  }
  var n = 100;
  while (--n >= 0) {
    clonedTrack = clonedTrack.clone();
  }
  // Work around srcObject not in Chrome.
  v2.srcObject = new MediaStream([clonedTrack]);
  v2.play();
  setCloneUIEnabled(true);
}

function toggleEnabledOriginal() {
  originalTrack.enabled = !originalTrack.enabled;
}

function toggleEnabledClone() {
  clonedTrack.enabled = !clonedTrack.enabled;
}

function stopOriginal() {
  originalTrack.stop();
  originalTrack = null;
  setOriginalUIEnabled(false);
}

function stopClone() {
  clonedTrack.stop();
  clonedTrack = null;
  setCloneUIEnabled(false);
}

function setOriginalUIEnabled(enabled) {
  document.getElementById("stopOriginal").disabled = !enabled;
  document.getElementById("toggleEnabledOriginal").disabled = !enabled;
  document.getElementById("clone").disabled = !enabled;
}

function setCloneUIEnabled(enabled) {
  document.getElementById("stopClone").disabled = !enabled;
  document.getElementById("toggleEnabledClone").disabled = !enabled;
}

function setError(errorMessage) {
  let err = document.getElementById("error");
  err.textContent = errorMessage;
  err.hidden = false;
}