gilles/go2rtc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Rewrite JS player for better integration

Browse Source
This commit is contained in:
Alexey Khit
2023-01-02 16:33:00 +03:00
parent 4157a53dd8
commit 6d6e7010b4
3 changed files with 279 additions and 185 deletions
Download Patch File Download Diff File Expand all files Collapse all files
www/stream.html
+5 -4
View File
@@ -3,13 +3,13 @@
<head> <head>
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>go2rtc - Stream</title> <title>go2rtc - Stream</title>
<script src="video-rtc.js"></script>
<style> <style>
body { body {
background: black; background: black;
margin: 0; margin: 0;
padding: 0; padding: 0;
display: flex; display: flex;
font-family: Arial, Helvetica, sans-serif;
} }
html, body { html, body {
@@ -25,7 +25,8 @@
</style> </style>
</head> </head>
<body> <body>
<script> <script type="module" src="./video-stream.js"></script>
<script type="module">
const params = new URLSearchParams(location.search); const params = new URLSearchParams(location.search);
// support multiple streams and multiple modes // support multiple streams and multiple modes
@@ -48,8 +49,8 @@
const width = "1 0 " + (params.get("width") || "320px"); const width = "1 0 " + (params.get("width") || "320px");
for (let i = 0; i < streams.length; i++) { for (let i = 0; i < streams.length; i++) {
/** @type {VideoRTC} */ /** @type {VideoStream} */
const video = document.createElement("video-rtc"); const video = document.createElement("video-stream");
video.background = background; video.background = background;
video.mode = modes[i] || video.mode; video.mode = modes[i] || video.mode;
video.style.flex = width; video.style.flex = width;
www/video-rtc.js
+188 -180
View File
@@ -1,5 +1,5 @@
/** /**
* Video player for MSE and WebRTC connections. * Video player for go2rtc streaming application.
* *
* All modern web technologies are supported in almost any browser except Apple Safari. * All modern web technologies are supported in almost any browser except Apple Safari.
* *
@@ -12,7 +12,7 @@
* - Customized built-in elements (extends HTMLVideoElement) because all Safari * - Customized built-in elements (extends HTMLVideoElement) because all Safari
* - Public class fields because old Safari (before 14.0) * - Public class fields because old Safari (before 14.0)
*/ */
class VideoRTC extends HTMLElement { export class VideoRTC extends HTMLElement {
constructor() { constructor() {
super(); super();
@@ -31,32 +31,50 @@ class VideoRTC extends HTMLElement {
]; ];
/** /**
* Supported modes (webrtc, mse, mp4, mjpeg). * [config] Supported modes (webrtc, mse, mp4, mjpeg).
* @type {string} * @type {string}
*/ */
this.mode = "webrtc,mse,mp4,mjpeg"; this.mode = "webrtc,mse,mp4,mjpeg";
/** /**
* Run stream when not displayed on the screen. Default `false`. * [config] Run stream when not displayed on the screen. Default `false`.
* @type {boolean} * @type {boolean}
*/ */
this.background = false; this.background = false;
/** /**
* Run stream only when player in the viewport. Stop when user scroll out player. * [config] Run stream only when player in the viewport. Stop when user scroll out player.
* Value is percentage of visibility from `0` (not visible) to `1` (full visible). * Value is percentage of visibility from `0` (not visible) to `1` (full visible).
* Default `0` - disable; * Default `0` - disable;
* @type {number} * @type {number}
*/ */
this.intersectionThreshold = 0; this.visibilityThreshold = 0;
/** /**
* Run stream only when browser page on the screen. Stop when user change browser * [config] Run stream only when browser page on the screen. Stop when user change browser
* tab or minimise browser windows. * tab or minimise browser windows.
* @type {boolean} * @type {boolean}
*/ */
this.visibilityCheck = true; this.visibilityCheck = true;
/**
* [config] WebRTC configuration
* @type {RTCConfiguration}
*/
this.pcConfig = {iceServers: [{urls: "stun:stun.l.google.com:19302"}]};
/**
* [info] WebSocket connection state. Values: CONNECTING, OPEN, CLOSED
* @type {number}
*/
this.wsState = WebSocket.CLOSED;
/**
* [info] WebRTC connection state.
* @type {number}
*/
this.pcState = WebSocket.CLOSED;
/** /**
* @type {HTMLVideoElement} * @type {HTMLVideoElement}
*/ */
@@ -68,16 +86,9 @@ class VideoRTC extends HTMLElement {
this.ws = null; this.ws = null;
/** /**
* Internal WebSocket connection state. Values: CONNECTING, OPEN, CLOSED
* @type {number}
*/
this.wsState = WebSocket.CLOSED;
/**
* Internal WebSocket URL.
* @type {string|URL} * @type {string|URL}
*/ */
this.url = ""; this.wsURL = "";
/** /**
* @type {RTCPeerConnection} * @type {RTCPeerConnection}
@@ -87,37 +98,38 @@ class VideoRTC extends HTMLElement {
/** /**
* @type {number} * @type {number}
*/ */
this.pcState = WebSocket.CLOSED; this.connectTS = 0;
this.pcConfig = {iceServers: [{urls: "stun:stun.l.google.com:19302"}]};
/** /**
* Internal disconnect TimeoutID. * @type {string}
*/
this.mseCodecs = "";
/**
* [internal] Disconnect TimeoutID.
* @type {number} * @type {number}
*/ */
this.disconnectTimeout = 0; this.disconnectTID = 0;
/** /**
* Internal reconnect TimeoutID. * [internal] Reconnect TimeoutID.
* @type {number} * @type {number}
*/ */
this.reconnectTimeout = 0; this.reconnectTID = 0;
/** /**
* Handler for receiving Binary from WebSocket * [internal] Handler for receiving Binary from WebSocket.
* @type {Function} * @type {Function}
*/ */
this.ondata = null; this.ondata = null;
/** /**
* Handlers list for receiving JSON from WebSocket * [internal] Handlers list for receiving JSON from WebSocket
* @type {Object.<string,Function>}} * @type {Object.<string,Function>}}
*/ */
this.onmessage = null; this.onmessage = null;
} }
/** public properties **/
/** /**
* Set video source (WebSocket URL). Support relative path. * Set video source (WebSocket URL). Support relative path.
* @param {string|URL} value * @param {string|URL} value
@@ -130,9 +142,9 @@ class VideoRTC extends HTMLElement {
value = "ws" + location.origin.substring(4) + value; value = "ws" + location.origin.substring(4) + value;
} }
this.url = value; this.wsURL = value;
if (this.isConnected) this.connectedCallback(); this.onconnect();
} }
/** /**
@@ -156,10 +168,6 @@ class VideoRTC extends HTMLElement {
if (this.ws) this.ws.send(JSON.stringify(value)); if (this.ws) this.ws.send(JSON.stringify(value));
} }
get closed() {
return this.wsState === WebSocket.CLOSED && this.pcState === WebSocket.CLOSED;
}
codecs(type) { codecs(type) {
const test = type === "mse" const test = type === "mse"
? codec => MediaSource.isTypeSupported(`video/mp4; codecs="${codec}"`) ? codec => MediaSource.isTypeSupported(`video/mp4; codecs="${codec}"`)
@@ -172,11 +180,9 @@ class VideoRTC extends HTMLElement {
* document-connected element. * document-connected element.
*/ */
connectedCallback() { connectedCallback() {
console.debug("VideoRTC.connectedCallback", this.wsState, this.pcState); if (this.disconnectTID) {
clearTimeout(this.disconnectTID);
if (this.disconnectTimeout) { this.disconnectTID = 0;
clearTimeout(this.disconnectTimeout);
this.disconnectTimeout = 0;
} }
// because video autopause on disconnected from DOM // because video autopause on disconnected from DOM
@@ -186,15 +192,11 @@ class VideoRTC extends HTMLElement {
this.video.currentTime = seek.end(seek.length - 1); this.video.currentTime = seek.end(seek.length - 1);
this.play(); this.play();
} }
} else {
this.oninit();
} }
if (!this.url || !this.closed) return; this.onconnect();
// CLOSED => CONNECTING
this.wsState = WebSocket.CONNECTING;
this.internalInit();
this.internalConnect();
} }
/** /**
@@ -202,35 +204,25 @@ class VideoRTC extends HTMLElement {
* document's DOM. * document's DOM.
*/ */
disconnectedCallback() { disconnectedCallback() {
console.debug("VideoRTC.disconnectedCallback", this.wsState, this.pcState); if (this.background || this.disconnectTID) return;
if (this.wsState === WebSocket.CLOSED && this.pcState === WebSocket.CLOSED) return;
if (this.background || this.disconnectTimeout || this.closed) return; this.disconnectTID = setTimeout(() => {
if (this.reconnectTID) {
this.disconnectTimeout = setTimeout(() => { clearTimeout(this.reconnectTID);
if (this.reconnectTimeout) { this.reconnectTID = 0;
clearTimeout(this.reconnectTimeout);
this.reconnectTimeout = 0;
} }
this.disconnectTimeout = 0; this.disconnectTID = 0;
this.wsState = WebSocket.CLOSED; this.ondisconnect();
if (this.ws) {
this.ws.close();
this.ws = null;
}
this.pcState = WebSocket.CLOSED;
if (this.pc) {
this.pc.close();
this.pc = null;
}
}, this.DISCONNECT_TIMEOUT); }, this.DISCONNECT_TIMEOUT);
} }
internalInit() { /**
if (this.childElementCount) return; * Creates child DOM elements. Called automatically once on `connectedCallback`.
*/
oninit() {
this.video = document.createElement("video"); this.video = document.createElement("video");
this.video.controls = true; this.video.controls = true;
this.video.playsInline = true; this.video.playsInline = true;
@@ -258,7 +250,7 @@ class VideoRTC extends HTMLElement {
}) })
} }
if ("IntersectionObserver" in window && this.intersectionThreshold) { if ("IntersectionObserver" in window && this.visibilityThreshold) {
const observer = new IntersectionObserver(entries => { const observer = new IntersectionObserver(entries => {
entries.forEach(entry => { entries.forEach(entry => {
if (!entry.isIntersecting) { if (!entry.isIntersecting) {
@@ -267,49 +259,52 @@ class VideoRTC extends HTMLElement {
this.connectedCallback(); this.connectedCallback();
} }
}); });
}, {threshold: this.intersectionThreshold}); }, {threshold: this.visibilityThreshold});
observer.observe(this); observer.observe(this);
} }
} }
internalConnect() { /**
if (this.wsState !== WebSocket.CONNECTING) return; * Connect to WebSocket. Called automatically on `connectedCallback`.
if (this.ws) throw "connect with non null WebSocket"; * @return {boolean} true if the connection has started.
*/
onconnect() {
if (!this.isConnected || !this.wsURL || this.ws || this.pc) return false;
const ts = Date.now(); // CLOSED or CONNECTING => CONNECTING
this.wsState = WebSocket.CONNECTING;
this.ws = new WebSocket(this.url); this.connectTS = Date.now();
this.ws = new WebSocket(this.wsURL);
this.ws.binaryType = "arraybuffer"; this.ws.binaryType = "arraybuffer";
this.ws.addEventListener("open", ev => this.onopen(ev));
this.ws.addEventListener("close", ev => this.onclose(ev));
this.ws.addEventListener("open", () => { return true;
console.debug("VideoRTC.ws.open", this.wsState); }
ondisconnect() {
this.wsState = WebSocket.CLOSED;
if (this.ws) {
this.ws.close();
this.ws = null;
}
this.pcState = WebSocket.CLOSED;
if (this.pc) {
this.pc.close();
this.pc = null;
}
}
/**
* @returns {Array.<string>} of modes (mse, webrtc, etc.)
*/
onopen() {
// CONNECTING => OPEN // CONNECTING => OPEN
this.wsState = WebSocket.OPEN; this.wsState = WebSocket.OPEN;
this.internalOpen();
});
this.ws.addEventListener("close", () => {
console.debug("VideoRTC.ws.close", this.wsState);
if (this.wsState === WebSocket.CLOSED) return;
// CONNECTING, OPEN => CONNECTING
this.wsState = WebSocket.CONNECTING;
this.ws = null;
// reconnect no more than once every X seconds
const delay = Math.max(this.RECONNECT_TIMEOUT - (Date.now() - ts), 0);
this.reconnectTimeout = setTimeout(() => {
this.reconnectTimeout = 0;
this.internalConnect();
}, delay);
});
}
internalOpen() {
this.ws.addEventListener("message", ev => { this.ws.addEventListener("message", ev => {
if (typeof ev.data === "string") { if (typeof ev.data === "string") {
const msg = JSON.parse(ev.data); const msg = JSON.parse(ev.data);
@@ -324,39 +319,60 @@ class VideoRTC extends HTMLElement {
this.ondata = null; this.ondata = null;
this.onmessage = {}; this.onmessage = {};
let firstMode = ""; const modes = [];
if (this.mode.indexOf("mse") >= 0 && "MediaSource" in window) { // iPhone if (this.mode.indexOf("mse") >= 0 && "MediaSource" in window) { // iPhone
firstMode ||= "mse"; modes.push("mse");
this.internalMSE(); this.onmse();
} else if (this.mode.indexOf("mp4") >= 0) { } else if (this.mode.indexOf("mp4") >= 0) {
firstMode ||= "mp4"; modes.push("mp4");
this.internalMP4(); this.onmp4();
} }
if (this.mode.indexOf("webrtc") >= 0 && "RTCPeerConnection" in window) { // macOS Desktop app if (this.mode.indexOf("webrtc") >= 0 && "RTCPeerConnection" in window) { // macOS Desktop app
firstMode ||= "webrtc"; modes.push("webrtc");
this.internalRTC(); this.onwebrtc();
} }
if (this.mode.indexOf("mjpeg") >= 0) { if (this.mode.indexOf("mjpeg") >= 0) {
if (firstMode) { if (modes.length) {
this.onmessage["mjpeg"] = msg => { this.onmessage["mjpeg"] = msg => {
if (msg.type !== "error" || msg.value.indexOf(firstMode) !== 0) return; if (msg.type !== "error" || msg.value.indexOf(modes[0]) !== 0) return;
this.internalMJPEG(); this.onmjpeg();
} }
} else { } else {
this.internalMJPEG(); modes.push("mjpeg");
} this.onmjpeg();
} }
} }
internalMSE() { return modes;
console.debug("VideoRTC.internalMSE"); }
/**
* @return {boolean} true if reconnection has started.
*/
onclose() {
if (this.wsState === WebSocket.CLOSED) return false;
// CONNECTING, OPEN => CONNECTING
this.wsState = WebSocket.CONNECTING;
this.ws = null;
// reconnect no more than once every X seconds
const delay = Math.max(this.RECONNECT_TIMEOUT - (Date.now() - this.connectTS), 0);
this.reconnectTID = setTimeout(() => {
this.reconnectTID = 0;
this.onconnect();
}, delay);
return true;
}
onmse() {
const ms = new MediaSource(); const ms = new MediaSource();
ms.addEventListener("sourceopen", () => { ms.addEventListener("sourceopen", () => {
console.debug("VideoRTC.ms.sourceopen");
URL.revokeObjectURL(this.video.src); URL.revokeObjectURL(this.video.src);
this.send({type: "mse", value: this.codecs("mse")}); this.send({type: "mse", value: this.codecs("mse")});
}, {once: true}); }, {once: true});
@@ -365,9 +381,13 @@ class VideoRTC extends HTMLElement {
this.video.srcObject = null; this.video.srcObject = null;
this.play(); this.play();
this.mseCodecs = "";
this.onmessage["mse"] = msg => { this.onmessage["mse"] = msg => {
if (msg.type !== "mse") return; if (msg.type !== "mse") return;
this.mseCodecs = msg.value;
const sb = ms.addSourceBuffer(msg.value); const sb = ms.addSourceBuffer(msg.value);
sb.mode = "segments"; // segments or sequence sb.mode = "segments"; // segments or sequence
sb.addEventListener("updateend", () => { sb.addEventListener("updateend", () => {
@@ -376,10 +396,10 @@ class VideoRTC extends HTMLElement {
try { try {
sb.appendBuffer(buf.slice(0, bufLen)); sb.appendBuffer(buf.slice(0, bufLen));
} catch (e) { } catch (e) {
console.debug(e); // console.debug(e);
} }
bufLen = 0; bufLen = 0;
} else if (sb.buffered.length) { } else if (sb.buffered && sb.buffered.length) {
const end = sb.buffered.end(sb.buffered.length - 1) - 5; const end = sb.buffered.end(sb.buffered.length - 1) - 5;
const start = sb.buffered.start(0); const start = sb.buffered.start(0);
if (end > start) { if (end > start) {
@@ -410,56 +430,12 @@ class VideoRTC extends HTMLElement {
} }
} }
internalRTC() { onwebrtc() {
console.debug("VideoRTC.internalRTC");
const pc = new RTCPeerConnection(this.pcConfig); const pc = new RTCPeerConnection(this.pcConfig);
let mseCodecs = "";
/** @type {HTMLVideoElement} */ /** @type {HTMLVideoElement} */
const video2 = document.createElement("video"); const video2 = document.createElement("video");
video2.addEventListener("loadeddata", () => { video2.addEventListener("loadeddata", ev => this.onpcvideo(ev), {once: true});
console.debug("VideoRTC.video.loadeddata", video2.readyState, pc.connectionState);
// Firefox doesn't support pc.connectionState
if (pc.connectionState === "connected" || pc.connectionState === "connecting" || !pc.connectionState) {
// Video+Audio > Video, H265 > H264, Video > Audio, WebRTC > MSE
let rtcPriority = 0, msePriority = 0;
/** @type {MediaStream} */
const rtc = video2.srcObject;
if (rtc.getVideoTracks().length > 0) rtcPriority += 0x220;
if (rtc.getAudioTracks().length > 0) rtcPriority += 0x102;
if (mseCodecs.indexOf("hvc1.") >= 0) msePriority += 0x230;
if (mseCodecs.indexOf("avc1.") >= 0) msePriority += 0x210;
if (mseCodecs.indexOf("mp4a.") >= 0) msePriority += 0x101;
if (rtcPriority >= msePriority) {
console.debug("VideoRTC.select RTC mode", rtcPriority, msePriority);
this.video.controls = true;
this.video.srcObject = rtc;
this.play();
this.pcState = WebSocket.OPEN;
this.wsState = WebSocket.CLOSED;
this.ws.close();
this.ws = null;
} else {
console.debug("VideoRTC.select MSE mode", rtcPriority, msePriority);
pc.close();
this.pcState = WebSocket.CLOSED;
this.pc = null;
}
}
video2.srcObject = null;
}, {once: true});
pc.addEventListener("icecandidate", ev => { pc.addEventListener("icecandidate", ev => {
const candidate = ev.candidate ? ev.candidate.toJSON().candidate : ""; const candidate = ev.candidate ? ev.candidate.toJSON().candidate : "";
@@ -467,8 +443,6 @@ class VideoRTC extends HTMLElement {
}); });
pc.addEventListener("track", ev => { pc.addEventListener("track", ev => {
console.debug("VideoRTC.pc.track", ev.streams.length);
// when stream already init // when stream already init
if (video2.srcObject !== null) return; if (video2.srcObject !== null) return;
@@ -482,30 +456,29 @@ class VideoRTC extends HTMLElement {
}); });
pc.addEventListener("connectionstatechange", () => { pc.addEventListener("connectionstatechange", () => {
console.debug("VideoRTC.pc.connectionstatechange", this.pc.connectionState);
if (pc.connectionState === "failed" || pc.connectionState === "disconnected") { if (pc.connectionState === "failed" || pc.connectionState === "disconnected") {
pc.close(); // stop next events pc.close(); // stop next events
this.pcState = WebSocket.CLOSED; this.pcState = WebSocket.CLOSED;
this.pc = null; this.pc = null;
if (this.wsState === WebSocket.CLOSED && this.isConnected) { this.onconnect();
this.connectedCallback();
}
} }
}); });
this.onmessage["webrtc"] = msg => { this.onmessage["webrtc"] = msg => {
switch (msg.type) { switch (msg.type) {
case "webrtc/candidate": case "webrtc/candidate":
pc.addIceCandidate({candidate: msg.value, sdpMid: "0"}).catch(() => console.debug); pc.addIceCandidate({
candidate: msg.value,
sdpMid: "0"
}).catch(() => console.debug);
break; break;
case "webrtc/answer": case "webrtc/answer":
pc.setRemoteDescription({type: "answer", sdp: msg.value}).catch(() => console.debug); pc.setRemoteDescription({
break; type: "answer",
case "mse": sdp: msg.value
mseCodecs = msg.value; }).catch(() => console.debug);
break; break;
case "error": case "error":
if (msg.value.indexOf("webrtc/offer") < 0) return; if (msg.value.indexOf("webrtc/offer") < 0) return;
@@ -527,9 +500,48 @@ class VideoRTC extends HTMLElement {
this.pc = pc; this.pc = pc;
} }
internalMJPEG() { /**
console.debug("VideoRTC.internalMJPEG"); * @param ev {Event}
*/
onpcvideo(ev) {
/** @type {HTMLVideoElement} */
const video2 = ev.target;
const state = this.pc.connectionState;
// Firefox doesn't support pc.connectionState
if (state === "connected" || state === "connecting" || !state) {
// Video+Audio > Video, H265 > H264, Video > Audio, WebRTC > MSE
let rtcPriority = 0, msePriority = 0;
/** @type {MediaStream} */
const ms = video2.srcObject;
if (ms.getVideoTracks().length > 0) rtcPriority += 0x220;
if (ms.getAudioTracks().length > 0) rtcPriority += 0x102;
if (this.mseCodecs.indexOf("hvc1.") >= 0) msePriority += 0x230;
if (this.mseCodecs.indexOf("avc1.") >= 0) msePriority += 0x210;
if (this.mseCodecs.indexOf("mp4a.") >= 0) msePriority += 0x101;
if (rtcPriority >= msePriority) {
this.video.srcObject = ms;
this.play();
this.pcState = WebSocket.OPEN;
this.wsState = WebSocket.CLOSED;
this.ws.close();
this.ws = null;
} else {
this.pcState = WebSocket.CLOSED;
this.pc.close();
this.pc = null;
}
}
video2.srcObject = null;
}
onmjpeg() {
this.ondata = data => { this.ondata = data => {
this.video.poster = "data:image/jpeg;base64," + VideoRTC.btoa(data); this.video.poster = "data:image/jpeg;base64," + VideoRTC.btoa(data);
}; };
@@ -538,9 +550,7 @@ class VideoRTC extends HTMLElement {
this.video.controls = false; this.video.controls = false;
} }
internalMP4() { onmp4() {
console.debug("VideoRTC.internalMP4");
/** @type {HTMLVideoElement} */ /** @type {HTMLVideoElement} */
let video2; let video2;
@@ -585,5 +595,3 @@ class VideoRTC extends HTMLElement {
return window.btoa(binary); return window.btoa(binary);
} }
} }
customElements.define("video-rtc", VideoRTC);
www/video-stream.js
+85
View File
@@ -0,0 +1,85 @@
import {VideoRTC} from "./video-rtc.js";
class VideoStream extends VideoRTC {
constructor() {
super();
/** @type {HTMLDivElement} */
this.divMode = null;
/** @type {HTMLDivElement} */
this.divStatus = null;
}
/**
* Custom GUI
*/
oninit() {
super.oninit();
this.innerHTML = `
<style>
.info {
position: absolute;
top: 0;
left: 0;
right: 0;
padding: 12px;
color: white;
display: flex;
justify-content: space-between;
pointer-events: none;
}
</style>
<div class="info">
<div class="status"></div>
<div class="mode"></div>
</div>
`;
this.divStatus = this.querySelector(".status");
this.divMode = this.querySelector(".mode");
const info = this.querySelector(".info")
this.insertBefore(this.video, info);
}
onconnect() {
const result = super.onconnect();
if (result) {
this.divMode.innerText = "loading";
}
return result;
}
onopen() {
const result = super.onopen();
this.onmessage["stream"] = msg => {
switch (msg.type) {
case "error":
this.divMode.innerText = "error";
this.divStatus.innerText = msg.value;
break;
case "mse":
case "mp4":
case "mjpeg":
this.divMode.innerText = msg.type.toUpperCase();
this.divStatus.innerText = "";
break;
}
}
return result;
}
onpcvideo(ev) {
super.onpcvideo(ev);
if (this.pcState !== WebSocket.CLOSED) {
this.divMode.innerText = "RTC";
this.divStatus.innerText = "";
}
}
}
customElements.define("video-stream", VideoStream);