JSFiddle - React, Tailwind, and code Playground

HTML

<div>fill random number to canvas by 2d context</div>
<div style="background-color:yellow">
  <canvas id='canvas' width="100" height="20"></canvas>
</div>
<div>Video from canvas.captureStream</div>
<button onclick="startCanvas(false)">start</button>
<button onclick="startCanvas(true)">start+pc</button>
<button onclick="image.src = canvas.toDataURL()">snap</button>
<img id="image">
<br>
local video <video id=local autoplay playsInline width=200px controls></video><br>
remote video <video id=remote autoplay playsInline width=200px controls></video><br>

JavaScript

async function startCanvas(docPC) {
    const canvas = document.querySelector('canvas');
    const ctx = canvas.getContext('2d');
    setInterval(() => {
      ctx.clearRect(0, 0, 100, 20)
      ctx.fillText(Math.random(), 10, 5);
    }, 66)
    const stream = canvas.captureStream();
    local.srcObject = stream;
		if (!doPC)
  			return;
    const pc1 = new RTCPeerConnection();
    const pc2 = new RTCPeerConnection();

		pc1.addTrack(stream.getVideoTracks()[0], stream);
		pc2.ontrack = (e) => remote.srcObject = e.streams[0];

		pc1.onicecandidate = (e) => pc2.addIceCandidate(e.candidate);
		pc2.onicecandidate = (e) => pc1.addIceCandidate(e.candidate);

    await pc1.setLocalDescription();
    await pc2.setRemoteDescription(pc1.localDescription);
    await pc2.setLocalDescription(await pc2.createAnswer());
    await pc1.setRemoteDescription(pc2.localDescription);
}