<!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>