getUserMedia track disabling demo

Simple demo of setting MediaStreamTrack.enabled on a gUM video track.

by Andreas Pehrson

HTML

<button onclick="start()">Start</button>
<button id="video_muter" onclick="toggleVideoEnabled()">Mute video</button>
<button id="audio_muter" onclick="toggleAudioEnabled()">Mute audio</button>
<br/>
<video autoplay controls id="video" style="width:240px;height:180px;"></video>

JavaScript

let stream;

async function doStart() {
  stream = await navigator.mediaDevices.getUserMedia({audio:true, video:true});
  video.srcObject = stream;
}

function start() {
  doStart().catch(e => console.error(e));
}

function toggleVideoEnabled() {
  for (let t of stream.getVideoTracks()) {
    t.enabled = !t.enabled;
  }
  video_muter.textContent = `${stream.getVideoTracks()[0].enabled ? "Mute" : "Unmute"} video`;
}

function toggleAudioEnabled() {
  for (let t of stream.getAudioTracks()) {
    t.enabled = !t.enabled;
  }
  audio_muter.textContent = `${stream.getAudioTracks()[0].enabled ? "Mute" : "Unmute"} audio`;
}