75 lines
2.6 KiB
HTML
75 lines
2.6 KiB
HTML
<!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>
|
|
|