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