JSFiddle - React, Tailwind, and code Playground

by sasivarunan

HTML

<body>
  <video width="320" height="240" controls autoplay></video>
  <p>
    <button id=audio>
      stop audio
    </button>
    <button id=video>
      stop video
    </button>
    <button id=both>
      stop both
    </button>
  </p>
</body>

JavaScript

navigator.mediaDevices.getUserMedia({
      audio: true,
      video: true
    })
    .then(stream => {
      window.localStream = stream;
      document.querySelector('video').src = URL.createObjectURL(stream);
    })
    .catch((err) => {
      console.log(err);
    });
audio.onclick = function() {
  localStream.getAudioTracks()[0].stop();
}
video.onclick = function() {
  localStream.getVideoTracks()[0].stop();
}
both.onclick = function() {
  localStream.getTracks().forEach((track) => {
    track.stop();
  })
}