mirror of
https://github.com/bluenviron/mediamtx
synced 2025-01-08 07:50:02 +00:00
bab5caee01
When latency is high, one side of the peer connection switched to the "connected" state before the other one, and then closed the WebSocket connection since it's useless after the peer connection has been established. This caused the other side of the connection to detect a WebSocket error and to exit. The WebSocket connection must remain open, otherwise the "connected" state is not set by both parts.
175 lines
3.9 KiB
HTML
175 lines
3.9 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<style>
|
|
html, body {
|
|
margin: 0;
|
|
padding: 0;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
}
|
|
#video {
|
|
width: 100%;
|
|
height: 100%;
|
|
background: black;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<video id="video" muted controls autoplay playsinline></video>
|
|
|
|
<script>
|
|
|
|
const restartPause = 2000;
|
|
|
|
class Receiver {
|
|
constructor() {
|
|
this.terminated = false;
|
|
this.ws = null;
|
|
this.pc = null;
|
|
this.restartTimeout = null;
|
|
this.start();
|
|
}
|
|
|
|
start() {
|
|
console.log("connecting");
|
|
|
|
this.ws = new WebSocket(window.location.href.replace(/^http/, "ws") + 'ws');
|
|
|
|
this.ws.onerror = () => {
|
|
console.log("ws error");
|
|
if (this.ws === null) {
|
|
return;
|
|
}
|
|
this.ws.close();
|
|
this.ws = null;
|
|
};
|
|
|
|
this.ws.onclose = () => {
|
|
console.log("ws closed");
|
|
this.ws = null;
|
|
this.scheduleRestart();
|
|
};
|
|
|
|
this.ws.onmessage = (msg) => this.onIceServers(msg);
|
|
}
|
|
|
|
onIceServers(msg) {
|
|
if (this.ws === null) {
|
|
return;
|
|
}
|
|
|
|
const iceServers = JSON.parse(msg.data);
|
|
|
|
this.pc = new RTCPeerConnection({
|
|
iceServers,
|
|
});
|
|
|
|
this.ws.onmessage = (msg) => this.onRemoteDescription(msg);
|
|
this.pc.onicecandidate = (evt) => this.onIceCandidate(evt);
|
|
|
|
this.pc.oniceconnectionstatechange = () => {
|
|
if (this.pc === null) {
|
|
return;
|
|
}
|
|
|
|
console.log("peer connection state:", this.pc.iceConnectionState);
|
|
|
|
switch (this.pc.iceConnectionState) {
|
|
case "connected":
|
|
this.pc.onicecandidate = undefined;
|
|
this.ws.onmessage = undefined;
|
|
this.ws.onerror = undefined
|
|
this.ws.onclose = undefined;
|
|
// do not close the WebSocket connection
|
|
// in order to allow the other side of the connection
|
|
// to switch to the "connected" state before WebSocket is closed.
|
|
break;
|
|
|
|
case "disconnected":
|
|
this.scheduleRestart();
|
|
}
|
|
};
|
|
|
|
this.pc.ontrack = (evt) => {
|
|
console.log("new track " + evt.track.kind);
|
|
document.getElementById("video").srcObject = evt.streams[0];
|
|
};
|
|
|
|
const direction = "sendrecv";
|
|
this.pc.addTransceiver("video", { direction });
|
|
this.pc.addTransceiver("audio", { direction });
|
|
|
|
this.pc.createOffer()
|
|
.then((desc) => {
|
|
if (this.pc === null || this.ws === null) {
|
|
return;
|
|
}
|
|
|
|
this.pc.setLocalDescription(desc);
|
|
|
|
console.log("sending offer");
|
|
this.ws.send(JSON.stringify(desc));
|
|
});
|
|
}
|
|
|
|
onRemoteDescription(msg) {
|
|
if (this.pc === null || this.ws === null) {
|
|
return;
|
|
}
|
|
|
|
this.pc.setRemoteDescription(new RTCSessionDescription(JSON.parse(msg.data)));
|
|
this.ws.onmessage = (msg) => this.onRemoteCandidate(msg);
|
|
}
|
|
|
|
onIceCandidate(evt) {
|
|
if (this.ws === null) {
|
|
return;
|
|
}
|
|
|
|
if (evt.candidate !== null) {
|
|
if (evt.candidate.candidate !== "") {
|
|
this.ws.send(JSON.stringify(evt.candidate));
|
|
}
|
|
}
|
|
}
|
|
|
|
onRemoteCandidate(msg) {
|
|
if (this.pc === null) {
|
|
return;
|
|
}
|
|
|
|
this.pc.addIceCandidate(JSON.parse(msg.data));
|
|
}
|
|
|
|
scheduleRestart() {
|
|
if (this.terminated) {
|
|
return;
|
|
}
|
|
|
|
if (this.ws !== null) {
|
|
this.ws.close();
|
|
this.ws = null;
|
|
}
|
|
|
|
if (this.pc !== null) {
|
|
this.pc.close();
|
|
this.pc = null;
|
|
}
|
|
|
|
this.restartTimeout = window.setTimeout(() => {
|
|
this.restartTimeout = null;
|
|
this.start();
|
|
}, restartPause);
|
|
}
|
|
}
|
|
|
|
window.addEventListener('DOMContentLoaded', () => new Receiver());
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|