gtk2k/mid.html Secret

## mid.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        video {
            width: 400px;
            height: 400px;
        }
    </style>
</head>

<body>
    <video id="localStream" muted autoplay title="localStream"></video>
    <video id="remoteStream" muted autoplay title="remoteStream"></video>
    <video id="remoteDisplayStream" muted autoplay title="remoteDisplayStream"></video>
    <button id="btnReceiveOnly">receiveOnly</button>
    <script>
        let pc = null;
        const ws = new WebSocket('ws://localhost:8080');
        let camTransceiver, micTransceiver, displayTransceiver;
        let mids = {};
        let stream;
        let aFlg = false;
        ws.onopen = evt => {
            console.log('ws open');
            ws.send('join');
        };
        ws.onmessage = async evt => {
            console.log(evt.data);
            if (evt.data === 'join') {
                await setupPC(true);
                await processOffer();
                console.log('mid', camTransceiver.mid, micTransceiver.mid);
                return;
            }
            const msg = JSON.parse(evt.data);
            if (!pc)
                await setupPC();
            if (msg.sdp) {
                console.log(`set remote ${msg.type}`);
                mids.camMid = msg.camMid;
                mids.micMid = msg.micMid;
                mids.displayMid = msg.displayMid;
                await pc.setRemoteDescription(msg);
                if (msg.type === 'offer') {
                    const answer = await pc.createAnswer();
                    console.log('set local answer');
                    await pc.setLocalDescription(answer);
                    ws.send(JSON.stringify(answer));
                }
            } else if (msg.candidate) {
                await pc.addIceCandidate(msg);
            }
        };
        async function setupPC(isOffer) {
            pc = new RTCPeerConnection();
            pc.onicecandidate = evt => {
                if (evt.candidate)
                    ws.send(JSON.stringify(evt.candidate));
            };
            pc.ontrack = evt => {
                console.log('remoteStream', evt.transceiver.mid);
                if (evt.transceiver.mid === mids.camMid)
                    remoteStream.srcObject = evt.streams[0];
                else if (evt.transceiver.mid === mids.displayMid)
                    remoteDisplayStream.srcObject = evt.streams[0];
                evt.receiver.onmuted
            }
            stream = await navigator.mediaDevices.getUserMedia({
                video: {
                    width: { min: 320, ideal: 320, max: 360 },
                    height: { min: 180, ideal: 180, max: 240 }
                },
                audio: true
            });
            displayStream = await navigator.mediaDevices.getDisplayMedia({video: true});
            localStream.srcObject = stream;
            if (isOffer) {
                displayTransceiver = pc.addTransceiver(displayStream.getVideoTracks()[0], { streams: [displayStream] });
                stream.getTracks().forEach(track => {
                    if (track.kind === 'video')
                        camTransceiver = pc.addTransceiver(track, { streams: [stream] });
                    else if (track.kind === 'audio')
                        micTransceiver = pc.addTransceiver(track, { streams: [stream] });
                });
            }
            return pc;
        }

        async function processOffer() {
            const offer = await pc.createOffer();
            console.log('set local offer');
            await pc.setLocalDescription(offer);
            const sendData = { ...offer.toJSON(), camMid: camTransceiver.mid, micMid: micTransceiver.mid, displayMid: displayTransceiver.mid };
            ws.send(JSON.stringify(sendData));
        }
    </script>
</body>

</html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
	video {
	width: 400px;
	height: 400px;
	}
	</style>
	</head>

	<body>
	<video id="localStream" muted autoplay title="localStream"></video>
	<video id="remoteStream" muted autoplay title="remoteStream"></video>
	<video id="remoteDisplayStream" muted autoplay title="remoteDisplayStream"></video>
	<button id="btnReceiveOnly">receiveOnly</button>
	<script>
	let pc = null;
	const ws = new WebSocket('ws://localhost:8080');
	let camTransceiver, micTransceiver, displayTransceiver;
	let mids = {};
	let stream;
	let aFlg = false;
	ws.onopen = evt => {
	console.log('ws open');
	ws.send('join');
	};
	ws.onmessage = async evt => {
	console.log(evt.data);
	if (evt.data === 'join') {
	await setupPC(true);
	await processOffer();
	console.log('mid', camTransceiver.mid, micTransceiver.mid);
	return;
	}
	const msg = JSON.parse(evt.data);
	if (!pc)
	await setupPC();
	if (msg.sdp) {
	console.log(`set remote ${msg.type}`);
	mids.camMid = msg.camMid;
	mids.micMid = msg.micMid;
	mids.displayMid = msg.displayMid;
	await pc.setRemoteDescription(msg);
	if (msg.type === 'offer') {
	const answer = await pc.createAnswer();
	console.log('set local answer');
	await pc.setLocalDescription(answer);
	ws.send(JSON.stringify(answer));
	}
	} else if (msg.candidate) {
	await pc.addIceCandidate(msg);
	}
	};
	async function setupPC(isOffer) {
	pc = new RTCPeerConnection();
	pc.onicecandidate = evt => {
	if (evt.candidate)
	ws.send(JSON.stringify(evt.candidate));
	};
	pc.ontrack = evt => {
	console.log('remoteStream', evt.transceiver.mid);
	if (evt.transceiver.mid === mids.camMid)
	remoteStream.srcObject = evt.streams[0];
	else if (evt.transceiver.mid === mids.displayMid)
	remoteDisplayStream.srcObject = evt.streams[0];
	evt.receiver.onmuted
	}
	stream = await navigator.mediaDevices.getUserMedia({
	video: {
	width: { min: 320, ideal: 320, max: 360 },
	height: { min: 180, ideal: 180, max: 240 }
	},
	audio: true
	});
	displayStream = await navigator.mediaDevices.getDisplayMedia({video: true});
	localStream.srcObject = stream;
	if (isOffer) {
	displayTransceiver = pc.addTransceiver(displayStream.getVideoTracks()[0], { streams: [displayStream] });
	stream.getTracks().forEach(track => {
	if (track.kind === 'video')
	camTransceiver = pc.addTransceiver(track, { streams: [stream] });
	else if (track.kind === 'audio')
	micTransceiver = pc.addTransceiver(track, { streams: [stream] });
	});
	}
	return pc;
	}

	async function processOffer() {
	const offer = await pc.createOffer();
	console.log('set local offer');
	await pc.setLocalDescription(offer);
	const sendData = { ...offer.toJSON(), camMid: camTransceiver.mid, micMid: micTransceiver.mid, displayMid: displayTransceiver.mid };
	ws.send(JSON.stringify(sendData));
	}
	</script>
	</body>

	</html>