Function drawOscilloscope

public/src/js/vc.js:1–37

(mediaStream, id)

function drawOscilloscope(mediaStream, id) {
  let canvasElement = document.getElementById(id);
  let canvasContext = canvasElement.getContext("2d");

  let audioContext = new AudioContext();
  let analyserNode = audioContext.createAnalyser();
  let bufferLength = analyserNode.frequencyBinCount;
  let dataArray = new Uint8Array(bufferLength);

  mediaStreamSource = audioContext.createMediaStreamSource(mediaStream);
  mediaStreamSource.connect(analyserNode);

  draw();

  function draw() {
    requestAnimationFrame(draw);
    analyserNode.getByteTimeDomainData(dataArray);

    canvasContext.clearRect(0, 0, canvasElement.width, canvasElement.height);
    canvasContext.lineWidth = 2;
    canvasContext.strokeStyle = "white";
    canvasContext.beginPath();
    canvasContext.moveTo(0, canvasElement.height / 2);

    let x = 0;
    let sliceWidth = canvasElement.width / bufferLength;
    for (let i = 0; i < bufferLength; i++) {
      let v = dataArray[i] / 128;
      let y = canvasElement.height / 2 * v;
      canvasContext.lineTo(x, y);
      x += sliceWidth;
    }

    canvasContext.lineTo(canvasElement.width, canvasElement.height / 2);
    canvasContext.stroke();
  }
}

//variables
var pc;