Article face mute

by jib1

HTML

<br><button id="begin">Begin!</button>
<label><input id="videoMute" type="checkbox" disabled>Mute video</label>
<label><input id="audioMute" type="checkbox" disabled>Mute audio</label>
<button id="end" disabled>End!</button><br><br>
<video id="video" width="320" height="180" autoplay></video>
<canvas id="canvas" width="25" height="180"></canvas><br>

JavaScript

begin.onclick = async () => {
  startEqualizer(video.srcObject = await navigator.mediaDevices.getUserMedia({video: {width: 1280}, audio: true}));
  setButtons(0, 1, 1, 1);
}

audioMute.onclick = () => { video.srcObject.getAudioTracks()[0].enabled = !audioMute.checked; };
videoMute.onclick = () => { video.srcObject.getVideoTracks()[0].enabled = !videoMute.checked; };

end.onclick = () => {
  video.srcObject.getTracks().forEach(track => track.stop());
  video.srcObject = null;
  setButtons(1, 0, 0, 0);
}

function setButtons(...a) {
  [begin, audioMute, videoMute, end].forEach((b, i) => { b.disabled = !a[i]; b.checked = false});
}

function startEqualizer(stream) {
  const audioCtx = new AudioContext();
  const analyser = audioCtx.createAnalyser();
  audioCtx.createMediaStreamSource(stream).connect(analyser);

  var canvasCtx = canvas.getContext("2d");
  var data = new Uint8Array(canvas.width);

  let interval = setInterval(() => {
    canvasCtx.fillStyle = "#ffffff";
    canvasCtx.clearRect(0, 0, canvas.width, canvas.height);
    if (stream.getAudioTracks()[0].readyState != "live") {
      clearInterval(interval);
      return;
    } 
    analyser.getByteFrequencyData(data);
    canvasCtx.lineWidth = 2;
    let x = 0;
    for (let y of data) {
      y = canvas.height - (y / 128) * canvas.height / 4;
      let c = Math.floor((x*255)/canvas.width);
      canvasCtx.fillStyle = "rgb("+c+",0,"+(255-x)+")";
      canvasCtx.fillRect(x, y, 2, canvas.height - y)
      x++;
    }
    analyser.getByteTimeDomainData(data);
    canvasCtx.lineWidth = 5;
    canvasCtx.beginPath();
    canvasCtx.stroke();
  }, 1000 * canvas.width / audioCtx.sampleRate);
}