JSFiddle - React, Tailwind, and code Playground

by ibcaliax

HTML

<p>
Related to https://bugs.chromium.org/p/chromium/issues/detail?id=1091362.
</p>

<p>
Open this jsfiddle in Chrome. Also open a random tab in Canary browser.
</p>

<p>
Click the "Start Sharing" button and, when getDisplayMedia() is prompted, choose "Canary" in "Application window".
</p>

<p>
Then, in the Canary tab, open DevTools console and exec document.body.requestFullscreen().
</p>

<p>
Come back to here (to Chrome tab running this). It has crashed.
</p>

<p>
Now, modify this file by setting scaleResolutionDownBy: 2 in the first entry in sendEncodings array (or just comment it) and repeat. It will not crash.
</p>

<button id="run">
Start Sharing
</button>

JavaScript

const button = document.getElementById('run');

button.addEventListener('click', run);

async function run() {
	const pc1 = new RTCPeerConnection(
		{
			sdpSemantics: 'unified-plan'
		});

	const pc2 = new RTCPeerConnection(
		{
			sdpSemantics: 'unified-plan'
		});

	pc1.addEventListener('icecandidate', (event) => {
		const candidate = event.candidate;

		if (!candidate)
			return;

		console.warn('pc1 candidate:', candidate);

		pc2.addIceCandidate(candidate);
	});

	pc2.addEventListener('icecandidate', (event) => {
		const candidate = event.candidate;

		if (!candidate)
			return;

		console.warn('pc2 candidate:', candidate);

		pc1.addIceCandidate(candidate);
	});

	pc1.addEventListener('iceconnectionstatechange', () => {
		console.warn('pc1.iceConnectionState:', pc1.iceConnectionState);
	});

	const stream = await navigator.mediaDevices.getDisplayMedia({
		audio: false,
		video: {
		  cursor: 'motion',
		  logicalSurface: true,
		  frameRate: 20,
		  width: { max: 1920 },
		}
	});

	const track = stream.getVideoTracks()[0];

	const transceiver = pc1.addTransceiver(
		track,
		{
			direction: 'sendonly',
			sendEncodings: [
				{
					rid: '0',
					scaleResolutionDownBy: 1, // Set it to 2 or comment it (it won't crash).
					maxBitrate: 1500000
				},
				{
					rid: '1',
					scaleResolutionDownBy: 1,
					maxBitrate: 6000000
				}
			]
		});

	const offer = await pc1.createOffer();

	await pc1.setLocalDescription(offer);

	await pc2.setRemoteDescription(pc1.localDescription);

	const answer = await pc2.createAnswer();

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