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

Fix support old iOS version

Browse Source
This commit is contained in:
Alexey Khit
2022-12-02 23:07:08 +03:00
parent e2cfdf8419
commit 7409b32836
1 changed files with 118 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files
www/video-rtc.js
+118 -100
View File
@@ -26,7 +26,7 @@ function MediaSourceHandler(ms) {
try { try {
sb.appendBuffer(qb.shift()); sb.appendBuffer(qb.shift());
} catch (e) { } catch (e) {
// console.warn(e); console.debug(e);
} }
} }
}); });
@@ -38,7 +38,7 @@ function MediaSourceHandler(ms) {
try { try {
sb.appendBuffer(ev.data); sb.appendBuffer(ev.data);
} catch (e) { } catch (e) {
// console.warn(e); console.debug(e);
} }
} }
} }
@@ -75,97 +75,98 @@ if (typeof importScripts == "function") {
* Doesn't support: * Doesn't support:
* - MediaSource for Safari iOS all * - MediaSource for Safari iOS all
* - 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)
*/ */
class VideoRTC extends HTMLElement { class VideoRTC extends HTMLElement {
static CLOSED = "closed"; constructor() {
static CONNECTING = "connecting"; super();
static OPEN = "open";
DISCONNECT_TIMEOUT = 5000; this.DISCONNECT_TIMEOUT = 5000;
RECONNECT_TIMEOUT = 30000; this.RECONNECT_TIMEOUT = 30000;
CODECS = [ this.CODECS = [
"avc1.640029", // H.264 high 4.1 (Chromecast 1st and 2nd Gen) "avc1.640029", // H.264 high 4.1 (Chromecast 1st and 2nd Gen)
"avc1.64002A", // H.264 high 4.2 (Chromecast 3rd Gen) "avc1.64002A", // H.264 high 4.2 (Chromecast 3rd Gen)
"hvc1.1.6.L153.B0", // H.265 main 5.1 (Chromecast Ultra) "hvc1.1.6.L153.B0", // H.265 main 5.1 (Chromecast Ultra)
"mp4a.40.2", // AAC LC "mp4a.40.2", // AAC LC
"mp4a.40.5", // AAC HE "mp4a.40.5", // AAC HE
"mp4a.69", // MP3 "mp4a.69", // MP3
"mp4a.6B", // MP3 "mp4a.6B", // MP3
]; ];
/** /**
* Supported modes. * Supported modes.
* @type {string} * @type {string}
*/ */
modes = "webrtc,mse,mse2,mp4"; this.modes = "webrtc,mse2,mp4";
/** /**
* Run stream when not displayed on the screen. Default `false`. * Run stream when not displayed on the screen. Default `false`.
* @type {boolean} * @type {boolean}
*/ */
background = false; this.background = false;
/** /**
* Run stream only when player in the viewport. Stop when user scroll out player. * 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}
*/ */
intersectionThreshold = 0; this.intersectionThreshold = 0;
/** /**
* Run stream only when browser page on the screen. Stop when user change browser * 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}
*/ */
visibilityCheck = true; this.visibilityCheck = true;
/** /**
* @type {HTMLVideoElement} * @type {HTMLVideoElement}
*/ */
video = null; this.video = null;
/** /**
* @type {WebSocket} * @type {WebSocket}
*/ */
ws = null; this.ws = null;
/** /**
* Internal WebSocket connection state. Values: STOP, CONNECTING, OPEN, CLOSED * Internal WebSocket connection state. Values: STOP, CONNECTING, OPEN, CLOSED
* @type {string} * @type {number}
*/ */
wsState = VideoRTC.CLOSED; this.wsState = WebSocket.CLOSED;
/** /**
* Internal WebSocket URL. * Internal WebSocket URL.
* @type {string} * @type {string}
*/ */
wsURL = ""; this.wsURL = "";
/** /**
* @type {RTCPeerConnection} * @type {RTCPeerConnection}
*/ */
pc = null; this.pc = null;
/** /**
* @type {string} * @type {number}
*/ */
pcState = VideoRTC.CLOSED; this.pcState = WebSocket.CLOSED;
pcConfig = {iceServers: [{urls: "stun:stun.l.google.com:19302"}]}; this.pcConfig = {iceServers: [{urls: "stun:stun.l.google.com:19302"}]};
/** /**
* Internal disconnect TimeoutID. * Internal disconnect TimeoutID.
* @type {number} * @type {number}
*/ */
disconnectTimeout = 0; this.disconnectTimeout = 0;
/** /**
* Internal reconnect TimeoutID. * Internal reconnect TimeoutID.
* @type {number} * @type {number}
*/ */
reconnectTimeout = 0; this.reconnectTimeout = 0;
}
/** public properties **/ /** public properties **/
@@ -207,13 +208,14 @@ class VideoRTC extends HTMLElement {
} }
get closed() { get closed() {
return this.wsState === VideoRTC.CLOSED && this.pcState === VideoRTC.CLOSED; return this.wsState === WebSocket.CLOSED && this.pcState === WebSocket.CLOSED;
} }
get codecs() { codecs(type) {
return this.CODECS.filter(value => { const test = type === "mse"
return MediaSource.isTypeSupported(`video/mp4; codecs="${value}"`); ? type => MediaSource.isTypeSupported(type)
}).join(); : type => this.video.canPlayType(type);
return this.CODECS.filter(test).join();
} }
/** /**
@@ -240,7 +242,7 @@ class VideoRTC extends HTMLElement {
if (!this.wsURL || !this.closed) return; if (!this.wsURL || !this.closed) return;
// CLOSED => CONNECTING // CLOSED => CONNECTING
this.wsState = VideoRTC.CONNECTING; this.wsState = WebSocket.CONNECTING;
this.internalInit(); this.internalInit();
this.internalWS(); this.internalWS();
@@ -263,13 +265,13 @@ class VideoRTC extends HTMLElement {
this.disconnectTimeout = 0; this.disconnectTimeout = 0;
this.wsState = VideoRTC.CLOSED; this.wsState = WebSocket.CLOSED;
if (this.ws) { if (this.ws) {
this.ws.close(); this.ws.close();
this.ws = null; this.ws = null;
} }
this.pcState = VideoRTC.CLOSED; this.pcState = WebSocket.CLOSED;
if (this.pc) { if (this.pc) {
this.pc.close(); this.pc.close();
this.pc = null; this.pc = null;
@@ -325,7 +327,7 @@ class VideoRTC extends HTMLElement {
} }
internalWS() { internalWS() {
if (this.wsState !== VideoRTC.CONNECTING) return; if (this.wsState !== WebSocket.CONNECTING) return;
if (this.ws) throw "connect with non null WebSocket"; if (this.ws) throw "connect with non null WebSocket";
const ts = Date.now(); const ts = Date.now();
@@ -336,7 +338,7 @@ class VideoRTC extends HTMLElement {
console.debug("VideoRTC.ws.open", this.wsState); console.debug("VideoRTC.ws.open", this.wsState);
// CONNECTING => OPEN // CONNECTING => OPEN
this.wsState = VideoRTC.OPEN; this.wsState = WebSocket.OPEN;
if (this.modes.indexOf("mse") >= 0 && "MediaSource" in window) { // iPhone if (this.modes.indexOf("mse") >= 0 && "MediaSource" in window) { // iPhone
if (this.modes.indexOf("mse2") >= 0 && MediaSource.canConstructInDedicatedWorker) { if (this.modes.indexOf("mse2") >= 0 && MediaSource.canConstructInDedicatedWorker) {
@@ -360,10 +362,10 @@ class VideoRTC extends HTMLElement {
this.ws.addEventListener("close", () => { this.ws.addEventListener("close", () => {
console.debug("VideoRTC.ws.close", this.wsState); console.debug("VideoRTC.ws.close", this.wsState);
if (this.wsState === VideoRTC.CLOSED) return; if (this.wsState === WebSocket.CLOSED) return;
// CONNECTING, OPEN => CONNECTING // CONNECTING, OPEN => CONNECTING
this.wsState = VideoRTC.CONNECTING; this.wsState = WebSocket.CONNECTING;
this.ws = null; this.ws = null;
// reconnect no more than once every X seconds // reconnect no more than once every X seconds
@@ -383,7 +385,7 @@ class VideoRTC extends HTMLElement {
ms.addEventListener("sourceopen", () => { ms.addEventListener("sourceopen", () => {
console.debug("VideoRTC.ms.sourceopen"); console.debug("VideoRTC.ms.sourceopen");
URL.revokeObjectURL(this.video.src); URL.revokeObjectURL(this.video.src);
this.send({type: "mse", value: this.codecs}); this.send({type: "mse", value: this.codecs("mse")});
}, {once: true}); }, {once: true});
this.video.src = URL.createObjectURL(ms); this.video.src = URL.createObjectURL(ms);
@@ -403,7 +405,7 @@ class VideoRTC extends HTMLElement {
this.video.srcObject = ev.data.value; this.video.srcObject = ev.data.value;
this.play(); this.play();
} else if (ev.data.type === "sourceopen") { } else if (ev.data.type === "sourceopen") {
this.send({type: "mse", value: this.codecs}); this.send({type: "mse", value: this.codecs("mse")});
} }
}); });
@@ -449,12 +451,13 @@ class VideoRTC extends HTMLElement {
if (rtcPriority >= msePriority) { if (rtcPriority >= msePriority) {
console.debug("VideoRTC.select RTC mode", rtcPriority, msePriority); console.debug("VideoRTC.select RTC mode", rtcPriority, msePriority);
this.video.controls = true;
this.video.srcObject = rtc; this.video.srcObject = rtc;
this.play(); this.play();
this.pcState = VideoRTC.OPEN; this.pcState = WebSocket.OPEN;
this.wsState = VideoRTC.CLOSED; this.wsState = WebSocket.CLOSED;
this.ws.close(); this.ws.close();
this.ws = null; this.ws = null;
} else { } else {
@@ -462,7 +465,7 @@ class VideoRTC extends HTMLElement {
pc.close(); pc.close();
this.pcState = VideoRTC.CLOSED; this.pcState = WebSocket.CLOSED;
this.pc = null; this.pc = null;
} }
} }
@@ -496,10 +499,10 @@ class VideoRTC extends HTMLElement {
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 = VideoRTC.CLOSED; this.pcState = WebSocket.CLOSED;
this.pc = null; this.pc = null;
if (this.wsState === VideoRTC.CLOSED && this.isConnected) { if (this.wsState === WebSocket.CLOSED && this.isConnected) {
this.connectedCallback(); this.connectedCallback();
} }
} }
@@ -532,7 +535,7 @@ class VideoRTC extends HTMLElement {
}); });
}); });
this.pcState = VideoRTC.CONNECTING; this.pcState = WebSocket.CONNECTING;
this.pc = pc; this.pc = pc;
} }
@@ -547,7 +550,11 @@ class VideoRTC extends HTMLElement {
this.ws.binaryType = "blob"; this.ws.binaryType = "blob";
this.ws.addEventListener("message", ev => { this.ws.addEventListener("message", ev => {
if (typeof ev.data !== "string") { if (typeof ev.data !== "string") {
reader.readAsDataURL(ev.data); try {
reader.readAsDataURL(ev.data);
} catch (e) {
console.debug(e);
}
} }
}); });
@@ -561,25 +568,36 @@ class VideoRTC extends HTMLElement {
/** @type {HTMLVideoElement} */ /** @type {HTMLVideoElement} */
let video2; let video2;
/** @type {number} */
let i;
const reader = new FileReader(); const reader = new FileReader();
reader.addEventListener("load", () => { reader.addEventListener("load", () => {
if (video2) { if (video2) {
this.removeChild(this.video); this.removeChild(this.video);
this.video.src = ""; this.video.src = "";
this.video = video2; this.video = video2;
} else {
// get position only once on first packet
i = reader.result.indexOf(";");
console.debug("VideoRTC.file", reader.result.substring(0, i));
} }
video2 = this.video.cloneNode(); video2 = this.video.cloneNode();
this.appendChild(video2); this.appendChild(video2);
video2.src = "data:video/mp4" + reader.result.substring(29); video2.src = "data:video/mp4" + reader.result.substring(i);
video2.play().catch(() => console.log); video2.play().catch(() => console.log);
}); });
this.ws.binaryType = "blob"; this.ws.binaryType = "blob";
this.ws.addEventListener("message", ev => { this.ws.addEventListener("message", ev => {
if (typeof ev.data !== "string") { if (typeof ev.data !== "string") {
reader.readAsDataURL(ev.data); try {
reader.readAsDataURL(ev.data);
} catch (e) {
console.debug(e);
}
} }
}); });
@@ -590,7 +608,7 @@ class VideoRTC extends HTMLElement {
} }
}); });
this.send({type: "mp4", value: this.codecs}); this.send({type: "mp4", value: this.codecs("mp4")});
this.video.controls = false; this.video.controls = false;
} }
} }