JSFiddle - React, Tailwind, and code Playground

HTML

<button id="btn">
 stop tracks
</button>

JavaScript

(async()=> {
await navigator.mediaDevices.getUserMedia({ audio: true, video: true })
  .then(function(camera) {
          local_media_stream = camera;
          camera.getVideoTracks()[0].onended = function() { console.log("VIDEO ENDED") };
          camera.getAudioTracks()[0].onended = function() { console.log("Audio ENDED") };
					camera.getVideoTracks()[0].onmuted = function() { console.log("video muted") };
          camera.onended = function() { console.log("--- ENDED") }
          camera.onremovetrack = (event) => { console.log(`${event.track.kind} track removed`); };
  }).catch(function(error) {
        alert('Unable to capture your camera. Please check logs.' + error);
        console.error(error);
  });
recorder = new MediaRecorder(local_media_stream);
recorder.ondataavailable = function(e) {
	console.log( e.data );
}
recorder.onstop = function(e) {
    console.log("recorder stopped");
    console.log(e)
}
recorder.onerror = function(error) {
    console.log("recorder error");
    alert(error)
    throw error;
}
recorder.onstart = function() {
    console.log('started');
};
recorder.onpause = function() {
    console.log('paused');
};
recorder.onresume = function() {
    console.log('resumed');
};
recorder.start(1500);

btn.onclick = ()=>{
	local_media_stream.getTracks().forEach( t => t.stop() );
}
})();