JSFiddle - React, Tailwind, and code Playground

HTML

<video id="camera-video" width=100 height=100 autoplay></video>
<video id="screen-video" width=100 height=100 autoplay></video>
<video id="canvas-video" width=100 height=100 autoplay></video>

<canvas id="canvas-element"></canvas>

<button onclick="stopTracks('camera-video')">
  Stop camera
</button>

<button onclick="stopTracks('screen-video')">
  Stop display
</button>

<button onclick="stopTracks('canvas-video')">
  Stop canvas
</button>

JavaScript

async function main() {
 let cameraStream = await navigator.mediaDevices.getUserMedia({ video: true });
 let screenStream = await navigator.mediaDevices.getDisplayMedia({ video: true });
 
 let canvas = document.getElementById('canvas-element');
 canvas.getContext('2d'); // needed for FF
 let canvasStream = canvas.captureStream();
 
 assignStream('camera-video', cameraStream);
 assignStream('screen-video', screenStream);
 assignStream('canvas-video', canvasStream);
}

function assignStream(elementId, stream) {
 let video = document.getElementById(elementId);
 const [track] = stream.getVideoTracks();
 
 stream.oninactive = () => console.log('stream oninactive');
 track.addEventListener('ended', () => console.log('track ended'));
 track.onended = () => console.log('track onended');
 
 video.srcObject = stream;
}

function stopTracks(elementId) {
	let video = document.getElementById(elementId);
  video.srcObject.getTracks().forEach(track => track.stop());
  video.srcObject = null;
}

main();