webrtc working

2025-11-03 21:08:57 +01:00
parent 96335af6ee
commit 417e50983e
4 changed files with 587 additions and 0 deletions
--- a/tac.html
+++ b/tac.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<title>WebRTC Test</title>
+</head>
+<body>
+<h1>WebRTC Test (Camera 0)</h1>
+<video id="remoteVideo" autoplay playsinline></video>
+<script>
+async function startWebRTC() {
+                const pc = new RTCPeerConnection();
+                // Request to receive a remote video track from the server.
+                // Without this recvonly transceiver the generated offer may contain no
+                // video m= section and the server cannot add a sendonly video track
+                // (aiortc will fail to compute directions). Adding a recvonly
+                // transceiver signals the client wants to receive video.
+                try {
+                    pc.addTransceiver('video', {direction: 'recvonly'});
+                } catch (e) {
+                    // Some browsers / older APIs may use a different signature; ignore failure
+                    console.debug('addTransceiver failed, continuing:', e);
+                }
+
+    // Create video element
+    const remoteVideo = document.getElementById('remoteVideo');
+    pc.ontrack = (event) => {
+        console.log('ontrack event:', event);
+        remoteVideo.srcObject = event.streams[0];
+        // Log track info
+        const tracks = event.streams[0].getTracks();
+        tracks.forEach(t => console.log('Remote track:', t.kind, t.readyState, t.enabled));
+        // Try to play the video programmatically (some browsers require a gesture for autoplay with audio)
+        remoteVideo.play().then(()=>{
+            console.log('remoteVideo.play() succeeded');
+        }).catch(err=>{
+            console.warn('remoteVideo.play() failed:', err);
+        });
+    };
+
+    try {
+        // Create a data channel for testing (optional)
+        const channel = pc.createDataChannel("testChannel");
+        channel.onopen = () => console.log("Data channel open");
+        channel.onmessage = (e) => console.log("Received message:", e.data);
+
+        // Create SDP offer
+        const offer = await pc.createOffer();
+        await pc.setLocalDescription(offer);
+
+        // Send offer to server
+        const response = await fetch('http://localhost:1337/offer/0', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ sdp: offer.sdp, type: offer.type })
+        });
+
+        const answer = await response.json();
+        console.log("Answer received from server:", answer);
+
+        // Set remote description
+        await pc.setRemoteDescription(answer);
+
+    } catch (err) {
+        console.error("WebRTC error:", err);
+    }
+}
+
+// Start WebRTC on page load
+startWebRTC();
+</script>
+</body>
+</html>
+