70 lines
1.8 KiB
HTML
70 lines
1.8 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<title>WebRTC Stream</title>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/dashjs/4.7.1/dash.all.min.js"></script>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
<h1>Video streams</h1>
|
|
<h2>WebRTC</h2>
|
|
<video id="video" autoplay playsinline controls></video>
|
|
|
|
<script>
|
|
const ws = new WebSocket('ws://localhost:8080');
|
|
const pc = new RTCPeerConnection({ iceServers: [] });
|
|
const video = document.getElementById('video');
|
|
|
|
pc.onconnectionstatechange = (event) => {
|
|
console.log("onconnectionstatechange ", event)
|
|
}
|
|
|
|
pc.ondatachannel = (event) => {
|
|
console.log("ondatachannel ", event)
|
|
}
|
|
|
|
pc.ontrack = (event) => {
|
|
console.log("Received track event", event.streams);
|
|
video.srcObject = event.streams[0];
|
|
};
|
|
|
|
pc.onicecandidate = ({ candidate }) => {
|
|
console.log("pc.onicecandidate")
|
|
if (candidate) {
|
|
ws.send(JSON.stringify({ type: 'ice-candidate', data: candidate })); // Use 'candidate' instead of 'ice-candidate'
|
|
}
|
|
};
|
|
pc.onicegatheringstatechange = () => {
|
|
console.log('ICE state:', pc.iceGatheringState);
|
|
};
|
|
|
|
ws.onopen = async () => {
|
|
pc.addTransceiver('video', { direction: 'recvonly' });
|
|
const offer = await pc.createOffer();
|
|
await pc.setLocalDescription(offer);
|
|
// ws.send(JSON.stringify(offer));
|
|
console.log("on open ")
|
|
// ws.send(JSON.stringify(offer));
|
|
ws.send(JSON.stringify({ type: 'offer', data: offer }));
|
|
}
|
|
|
|
ws.onmessage = async (message) => {
|
|
const msg = JSON.parse(message.data);
|
|
console.log("onmessage type:", msg.type, msg)
|
|
|
|
if (msg.type === 'answer') {
|
|
await pc.setRemoteDescription(msg.data);
|
|
}
|
|
|
|
else if (msg.type === 'ice-candidate') {
|
|
await pc.addIceCandidate(msg.data);
|
|
}
|
|
};
|
|
|
|
;
|
|
</script>
|
|
</body>
|
|
|
|
</html> |