<!DOCTYPE html> <html> <head> <title>WebRTC Video Stream</title> </head> <body> <h1>WebRTC Video Stream</h1> <video id="video" autoplay playsinline></video> <script> const pc = new RTCPeerConnection(); const video = document.getElementById('video'); pc.ontrack = (event) => { video.srcObject = event.streams[0]; }; const ws = new WebSocket('ws://' + window.location.host + '/api/ws'); ws.onmessage = async (event) => { const data = JSON.parse(event.data); await pc.setRemoteDescription(new RTCSessionDescription(data)); if (data.type === 'offer') { const answer = await pc.createAnswer(); await pc.setLocalDescription(answer); ws.send(JSON.stringify({ 'sdp': pc.localDescription.sdp, 'type': pc.localDescription.type })); } }; ws.onopen = async () => { const stream = await navigator.mediaDevices.getUserMedia({ video: true }); stream.getTracks().forEach(track => pc.addTrack(track, stream)); const offer = await pc.createOffer(); await pc.setLocalDescription(offer); ws.send(JSON.stringify({ 'sdp': pc.localDescription.sdp, 'type': pc.localDescription.type })); }; </script> </body> </html>