seydx
933 lines
32 KiB
JavaScript
933 lines
32 KiB
JavaScript
/**
|
|
* VideoRTC v1.6.0 - Video player for go2rtc streaming application.
|
|
*
|
|
* All modern web technologies are supported in almost any browser except Apple Safari.
|
|
*
|
|
* Support:
|
|
* - ECMAScript 2017 (ES8) = ES6 + async
|
|
* - RTCPeerConnection for Safari iOS 11.0+
|
|
* - IntersectionObserver for Safari iOS 12.2+
|
|
* - ManagedMediaSource for Safari 17+
|
|
*
|
|
* Doesn't support:
|
|
* - MediaSource for Safari iOS
|
|
* - Customized built-in elements (extends HTMLVideoElement) because Safari
|
|
* - Autoplay for WebRTC in Safari
|
|
*/
|
|
export class VideoRTC extends HTMLElement {
|
|
constructor() {
|
|
super();
|
|
|
|
this.DISCONNECT_TIMEOUT = 5000;
|
|
this.RECONNECT_TIMEOUT = 15000;
|
|
|
|
this.CODECS = [
|
|
'avc1.640029', // H.264 high 4.1 (Chromecast 1st and 2nd Gen)
|
|
'avc1.64002A', // H.264 high 4.2 (Chromecast 3rd Gen)
|
|
'avc1.640033', // H.264 high 5.1 (Chromecast with Google TV)
|
|
'hvc1.1.6.L153.B0', // H.265 main 5.1 (Chromecast Ultra)
|
|
'mp4a.40.2', // AAC LC
|
|
'mp4a.40.5', // AAC HE
|
|
'flac', // FLAC (PCM compatible)
|
|
'opus', // OPUS Chrome, Firefox
|
|
];
|
|
|
|
/**
|
|
* [config] Supported modes (webrtc, webrtc/tcp, mse, hls, mp4, mjpeg, webcodecs).
|
|
* @type {string}
|
|
*/
|
|
this.mode = 'webrtc,mse,hls,mjpeg';
|
|
|
|
/**
|
|
* [Config] Requested medias (video, audio, microphone).
|
|
* @type {string}
|
|
*/
|
|
this.media = 'video,audio';
|
|
|
|
/**
|
|
* [config] Run stream when not displayed on the screen. Default `false`.
|
|
* @type {boolean}
|
|
*/
|
|
this.background = false;
|
|
|
|
/**
|
|
* [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).
|
|
* Default `0` - disable;
|
|
* @type {number}
|
|
*/
|
|
this.visibilityThreshold = 0;
|
|
|
|
/**
|
|
* [config] Run stream only when browser page on the screen. Stop when user change browser
|
|
* tab or minimise browser windows.
|
|
* @type {boolean}
|
|
*/
|
|
this.visibilityCheck = true;
|
|
|
|
/**
|
|
* [config] WebRTC configuration
|
|
* @type {RTCConfiguration}
|
|
*/
|
|
this.pcConfig = {
|
|
bundlePolicy: 'max-bundle',
|
|
iceServers: [{urls: ['stun:stun.cloudflare.com:3478', 'stun:stun.l.google.com:19302']}],
|
|
sdpSemantics: 'unified-plan', // important for Chromecast 1
|
|
};
|
|
|
|
/**
|
|
* [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}
|
|
*/
|
|
this.video = null;
|
|
|
|
/**
|
|
* @type {WebSocket}
|
|
*/
|
|
this.ws = null;
|
|
|
|
/**
|
|
* @type {string|URL}
|
|
*/
|
|
this.wsURL = '';
|
|
|
|
/**
|
|
* @type {RTCPeerConnection}
|
|
*/
|
|
this.pc = null;
|
|
|
|
/**
|
|
* @type {number}
|
|
*/
|
|
this.connectTS = 0;
|
|
|
|
/**
|
|
* @type {string}
|
|
*/
|
|
this.mseCodecs = '';
|
|
|
|
/**
|
|
* [internal] Disconnect TimeoutID.
|
|
* @type {number}
|
|
*/
|
|
this.disconnectTID = 0;
|
|
|
|
/**
|
|
* [internal] Reconnect TimeoutID.
|
|
* @type {number}
|
|
*/
|
|
this.reconnectTID = 0;
|
|
|
|
/**
|
|
* [internal] Handler for receiving Binary from WebSocket.
|
|
* @type {Function}
|
|
*/
|
|
this.ondata = null;
|
|
|
|
/**
|
|
* [internal] Handlers list for receiving JSON from WebSocket.
|
|
* @type {Object.<string,Function>}
|
|
*/
|
|
this.onmessage = null;
|
|
}
|
|
|
|
/**
|
|
* Set video source (WebSocket URL). Support relative path.
|
|
* @param {string|URL} value
|
|
*/
|
|
set src(value) {
|
|
if (typeof value !== 'string') value = value.toString();
|
|
if (value.startsWith('http')) {
|
|
value = 'ws' + value.substring(4);
|
|
} else if (value.startsWith('/')) {
|
|
value = 'ws' + location.origin.substring(4) + value;
|
|
}
|
|
|
|
this.wsURL = value;
|
|
|
|
this.onconnect();
|
|
}
|
|
|
|
/**
|
|
* Play video. Support automute when autoplay blocked.
|
|
* https://developer.chrome.com/blog/autoplay/
|
|
*/
|
|
play() {
|
|
this.video.play().catch(() => {
|
|
if (!this.video.muted) {
|
|
this.video.muted = true;
|
|
this.video.play().catch(er => {
|
|
console.warn(er);
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Send message to server via WebSocket
|
|
* @param {Object} value
|
|
*/
|
|
send(value) {
|
|
if (this.ws) this.ws.send(JSON.stringify(value));
|
|
}
|
|
|
|
/** @param {Function} isSupported */
|
|
codecs(isSupported) {
|
|
return this.CODECS
|
|
.filter(codec => this.media.includes(codec.includes('vc1') ? 'video' : 'audio'))
|
|
.filter(codec => isSupported(`video/mp4; codecs="${codec}"`)).join();
|
|
}
|
|
|
|
/**
|
|
* `CustomElement`. Invoked each time the custom element is appended into a
|
|
* document-connected element.
|
|
*/
|
|
connectedCallback() {
|
|
if (this.disconnectTID) {
|
|
clearTimeout(this.disconnectTID);
|
|
this.disconnectTID = 0;
|
|
}
|
|
|
|
// because video autopause on disconnected from DOM
|
|
if (this.video) {
|
|
const seek = this.video.seekable;
|
|
if (seek.length > 0) {
|
|
this.video.currentTime = seek.end(seek.length - 1);
|
|
}
|
|
this.play();
|
|
} else {
|
|
this.oninit();
|
|
}
|
|
|
|
this.onconnect();
|
|
}
|
|
|
|
/**
|
|
* `CustomElement`. Invoked each time the custom element is disconnected from the
|
|
* document's DOM.
|
|
*/
|
|
disconnectedCallback() {
|
|
if (this.background || this.disconnectTID) return;
|
|
if (this.wsState === WebSocket.CLOSED && this.pcState === WebSocket.CLOSED) return;
|
|
|
|
this.disconnectTID = setTimeout(() => {
|
|
if (this.reconnectTID) {
|
|
clearTimeout(this.reconnectTID);
|
|
this.reconnectTID = 0;
|
|
}
|
|
|
|
this.disconnectTID = 0;
|
|
|
|
this.ondisconnect();
|
|
}, this.DISCONNECT_TIMEOUT);
|
|
}
|
|
|
|
/**
|
|
* Creates child DOM elements. Called automatically once on `connectedCallback`.
|
|
*/
|
|
oninit() {
|
|
this.video = document.createElement('video');
|
|
this.video.controls = true;
|
|
this.video.playsInline = true;
|
|
this.video.preload = 'auto';
|
|
|
|
this.video.style.display = 'block'; // fix bottom margin 4px
|
|
this.video.style.width = '100%';
|
|
this.video.style.height = '100%';
|
|
|
|
this.appendChild(this.video);
|
|
|
|
this.video.addEventListener('error', ev => {
|
|
const err = this.video.error;
|
|
// https://developer.mozilla.org/en-US/docs/Web/API/MediaError/code
|
|
const MEDIA_ERRORS = {
|
|
1: 'MEDIA_ERR_ABORTED',
|
|
2: 'MEDIA_ERR_NETWORK',
|
|
3: 'MEDIA_ERR_DECODE',
|
|
4: 'MEDIA_ERR_SRC_NOT_SUPPORTED'
|
|
};
|
|
console.error('[VideoRTC] Video error:', {
|
|
error: err ? MEDIA_ERRORS[err.code] : 'unknown',
|
|
message: err ? err.message : 'unknown',
|
|
codecs: this.mseCodecs || 'not set',
|
|
readyState: this.video.readyState,
|
|
networkState: this.video.networkState,
|
|
currentTime: this.video.currentTime
|
|
});
|
|
if (this.ws) this.ws.close(); // run reconnect for broken MSE stream
|
|
});
|
|
|
|
// all Safari lies about supported audio codecs
|
|
const m = window.navigator.userAgent.match(/Version\/(\d+).+Safari/);
|
|
if (m) {
|
|
// AAC from v13, FLAC from v14, OPUS - unsupported
|
|
const skip = m[1] < '13' ? 'mp4a.40.2' : m[1] < '14' ? 'flac' : 'opus';
|
|
this.CODECS.splice(this.CODECS.indexOf(skip));
|
|
}
|
|
|
|
if (this.background) return;
|
|
|
|
if ('hidden' in document && this.visibilityCheck) {
|
|
document.addEventListener('visibilitychange', () => {
|
|
if (document.hidden) {
|
|
this.disconnectedCallback();
|
|
} else if (this.isConnected) {
|
|
this.connectedCallback();
|
|
}
|
|
});
|
|
}
|
|
|
|
if ('IntersectionObserver' in window && this.visibilityThreshold) {
|
|
const observer = new IntersectionObserver(entries => {
|
|
entries.forEach(entry => {
|
|
if (!entry.isIntersecting) {
|
|
this.disconnectedCallback();
|
|
} else if (this.isConnected) {
|
|
this.connectedCallback();
|
|
}
|
|
});
|
|
}, {threshold: this.visibilityThreshold});
|
|
observer.observe(this);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Connect to WebSocket. Called automatically on `connectedCallback`.
|
|
* @return {boolean} true if the connection has started.
|
|
*/
|
|
onconnect() {
|
|
if (!this.isConnected || !this.wsURL || this.ws || this.pc) return false;
|
|
|
|
// CLOSED or CONNECTING => CONNECTING
|
|
this.wsState = WebSocket.CONNECTING;
|
|
|
|
this.connectTS = Date.now();
|
|
|
|
this.ws = new WebSocket(this.wsURL);
|
|
this.ws.binaryType = 'arraybuffer';
|
|
this.ws.addEventListener('open', () => this.onopen());
|
|
this.ws.addEventListener('close', () => this.onclose());
|
|
|
|
return true;
|
|
}
|
|
|
|
ondisconnect() {
|
|
this.wsState = WebSocket.CLOSED;
|
|
if (this.ws) {
|
|
this.ws.close();
|
|
this.ws = null;
|
|
}
|
|
|
|
this.pcState = WebSocket.CLOSED;
|
|
if (this.pc) {
|
|
this.pc.getSenders().forEach(sender => {
|
|
if (sender.track) sender.track.stop();
|
|
});
|
|
this.pc.close();
|
|
this.pc = null;
|
|
}
|
|
|
|
// cleanup WebCodecs resources
|
|
if (this._videoDecoder) {
|
|
try { this._videoDecoder.close(); } catch (e) {}
|
|
this._videoDecoder = null;
|
|
}
|
|
if (this._audioDecoder) {
|
|
try { this._audioDecoder.close(); } catch (e) {}
|
|
this._audioDecoder = null;
|
|
}
|
|
if (this._wcGainNode) {
|
|
this._wcGainNode = null;
|
|
}
|
|
if (this._audioCtx) {
|
|
try { this._audioCtx.close(); } catch (e) {}
|
|
this._audioCtx = null;
|
|
}
|
|
const wcContainer = this.querySelector('canvas')?.parentElement;
|
|
if (wcContainer && wcContainer !== this) {
|
|
wcContainer.remove();
|
|
this.video.style.display = 'block';
|
|
}
|
|
|
|
this.video.src = '';
|
|
this.video.srcObject = null;
|
|
}
|
|
|
|
/**
|
|
* @returns {Array.<string>} of modes (mse, webrtc, etc.)
|
|
*/
|
|
onopen() {
|
|
// CONNECTING => OPEN
|
|
this.wsState = WebSocket.OPEN;
|
|
|
|
this.ws.addEventListener('message', ev => {
|
|
if (typeof ev.data === 'string') {
|
|
const msg = JSON.parse(ev.data);
|
|
for (const mode in this.onmessage) {
|
|
this.onmessage[mode](msg);
|
|
}
|
|
} else {
|
|
this.ondata(ev.data);
|
|
}
|
|
});
|
|
|
|
this.ondata = null;
|
|
this.onmessage = {};
|
|
|
|
const modes = [];
|
|
|
|
if (this.mode.includes('webcodecs') && 'VideoDecoder' in window) {
|
|
modes.push('webcodecs');
|
|
this.onwebcodecs();
|
|
} else if (this.mode.includes('mse') && ('MediaSource' in window || 'ManagedMediaSource' in window)) {
|
|
modes.push('mse');
|
|
this.onmse();
|
|
} else if (this.mode.includes('hls') && this.video.canPlayType('application/vnd.apple.mpegurl')) {
|
|
modes.push('hls');
|
|
this.onhls();
|
|
} else if (this.mode.includes('mp4')) {
|
|
modes.push('mp4');
|
|
this.onmp4();
|
|
}
|
|
|
|
if (this.mode.includes('webrtc') && 'RTCPeerConnection' in window) {
|
|
modes.push('webrtc');
|
|
this.onwebrtc();
|
|
}
|
|
|
|
if (this.mode.includes('mjpeg')) {
|
|
if (modes.length) {
|
|
this.onmessage['mjpeg'] = msg => {
|
|
if (msg.type !== 'error' || msg.value.indexOf(modes[0]) !== 0) return;
|
|
this.onmjpeg();
|
|
};
|
|
} else {
|
|
modes.push('mjpeg');
|
|
this.onmjpeg();
|
|
}
|
|
}
|
|
|
|
return modes;
|
|
}
|
|
|
|
/**
|
|
* @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() {
|
|
/** @type {MediaSource} */
|
|
let ms;
|
|
|
|
if ('ManagedMediaSource' in window) {
|
|
const MediaSource = window.ManagedMediaSource;
|
|
|
|
ms = new MediaSource();
|
|
ms.addEventListener('sourceopen', () => {
|
|
this.send({type: 'mse', value: this.codecs(MediaSource.isTypeSupported)});
|
|
}, {once: true});
|
|
|
|
this.video.disableRemotePlayback = true;
|
|
this.video.srcObject = ms;
|
|
} else {
|
|
ms = new MediaSource();
|
|
ms.addEventListener('sourceopen', () => {
|
|
URL.revokeObjectURL(this.video.src);
|
|
this.send({type: 'mse', value: this.codecs(MediaSource.isTypeSupported)});
|
|
}, {once: true});
|
|
|
|
this.video.src = URL.createObjectURL(ms);
|
|
this.video.srcObject = null;
|
|
}
|
|
|
|
this.play();
|
|
|
|
this.mseCodecs = '';
|
|
|
|
this.onmessage['mse'] = msg => {
|
|
if (msg.type !== 'mse') return;
|
|
|
|
this.mseCodecs = msg.value;
|
|
|
|
const sb = ms.addSourceBuffer(msg.value);
|
|
sb.mode = 'segments'; // segments or sequence
|
|
sb.addEventListener('updateend', () => {
|
|
if (!sb.updating && bufLen > 0) {
|
|
try {
|
|
const data = buf.slice(0, bufLen);
|
|
sb.appendBuffer(data);
|
|
bufLen = 0;
|
|
} catch (e) {
|
|
// console.debug(e);
|
|
}
|
|
}
|
|
|
|
if (!sb.updating && sb.buffered && sb.buffered.length) {
|
|
const end = sb.buffered.end(sb.buffered.length - 1);
|
|
const start = end - 5;
|
|
const start0 = sb.buffered.start(0);
|
|
if (start > start0) {
|
|
sb.remove(start0, start);
|
|
ms.setLiveSeekableRange(start, end);
|
|
}
|
|
if (this.video.currentTime < start) {
|
|
this.video.currentTime = start;
|
|
}
|
|
const gap = end - this.video.currentTime;
|
|
this.video.playbackRate = gap > 0.1 ? gap : 0.1;
|
|
// console.debug('VideoRTC.buffered', gap, this.video.playbackRate, this.video.readyState);
|
|
}
|
|
});
|
|
|
|
const buf = new Uint8Array(2 * 1024 * 1024);
|
|
let bufLen = 0;
|
|
|
|
this.ondata = data => {
|
|
if (sb.updating || bufLen > 0) {
|
|
const b = new Uint8Array(data);
|
|
buf.set(b, bufLen);
|
|
bufLen += b.byteLength;
|
|
// console.debug('VideoRTC.buffer', b.byteLength, bufLen);
|
|
} else {
|
|
try {
|
|
sb.appendBuffer(data);
|
|
} catch (e) {
|
|
// console.debug(e);
|
|
}
|
|
}
|
|
};
|
|
};
|
|
}
|
|
|
|
onwebcodecs() {
|
|
// Container wrapping canvas + controls
|
|
const container = document.createElement('div');
|
|
container.style.cssText = 'position:relative;width:100%;height:100%;background:#000;' +
|
|
'display:flex;align-items:center;justify-content:center;overflow:hidden';
|
|
|
|
const canvas = document.createElement('canvas');
|
|
canvas.style.cssText = 'display:block;max-width:100%;max-height:100%';
|
|
|
|
// SVG icon paths (24x24 viewBox)
|
|
const svgIcon = (path) => `<svg viewBox="0 0 24 24" style="width:20px;height:20px;fill:#fff"><path d="${path}"/></svg>`;
|
|
const iconPlay = 'M8 5v14l11-7z';
|
|
const iconPause = 'M6 19h4V5H6v14zm8-14v14h4V5h-4z';
|
|
const iconVolume = 'M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z';
|
|
const iconMuted = 'M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z';
|
|
const iconFS = 'M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z';
|
|
const iconFSExit = 'M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z';
|
|
|
|
// Controls bar
|
|
const controls = document.createElement('div');
|
|
controls.style.cssText = 'position:absolute;bottom:0;left:0;right:0;display:flex;' +
|
|
'align-items:center;gap:4px;padding:4px 8px;background:rgba(23,23,23,.85);' +
|
|
'opacity:0;transition:opacity .3s;user-select:none;z-index:1;height:36px;box-sizing:border-box';
|
|
container.addEventListener('mouseenter', () => { controls.style.opacity = '1'; });
|
|
container.addEventListener('mouseleave', () => { controls.style.opacity = '0'; });
|
|
container.addEventListener('touchstart', ev => {
|
|
if (ev.target === canvas || ev.target === container) {
|
|
controls.style.opacity = controls.style.opacity === '1' ? '0' : '1';
|
|
}
|
|
}, {passive: true});
|
|
|
|
const btnStyle = 'background:none;border:none;cursor:pointer;padding:4px;display:flex;' +
|
|
'align-items:center;justify-content:center;opacity:.85';
|
|
|
|
// Play / Pause
|
|
const btnPlay = document.createElement('button');
|
|
btnPlay.style.cssText = btnStyle;
|
|
btnPlay.innerHTML = svgIcon(iconPause);
|
|
btnPlay.title = 'Pause';
|
|
let paused = false;
|
|
|
|
// Time / Live indicator
|
|
const timeLabel = document.createElement('span');
|
|
timeLabel.style.cssText = 'color:#fff;font-size:12px;font-family:Arial,sans-serif;padding:0 4px;min-width:36px';
|
|
timeLabel.textContent = 'LIVE';
|
|
|
|
// Spacer
|
|
const spacer = document.createElement('div');
|
|
spacer.style.flex = '1';
|
|
|
|
// Volume / Mute
|
|
const btnMute = document.createElement('button');
|
|
btnMute.style.cssText = btnStyle;
|
|
btnMute.innerHTML = svgIcon(iconVolume);
|
|
btnMute.title = 'Mute';
|
|
let muted = false;
|
|
|
|
const volume = document.createElement('input');
|
|
volume.type = 'range';
|
|
volume.min = '0';
|
|
volume.max = '1';
|
|
volume.step = '0.05';
|
|
volume.value = '1';
|
|
volume.style.cssText = 'width:60px;cursor:pointer;accent-color:#fff;height:4px';
|
|
|
|
// Fullscreen
|
|
const btnFS = document.createElement('button');
|
|
btnFS.style.cssText = btnStyle;
|
|
btnFS.innerHTML = svgIcon(iconFS);
|
|
btnFS.title = 'Fullscreen';
|
|
|
|
btnPlay.addEventListener('click', () => {
|
|
paused = !paused;
|
|
btnPlay.innerHTML = svgIcon(paused ? iconPlay : iconPause);
|
|
btnPlay.title = paused ? 'Play' : 'Pause';
|
|
// Pause/resume the WebSocket data flow
|
|
if (paused && this._audioCtx) this._audioCtx.suspend();
|
|
if (!paused && this._audioCtx) this._audioCtx.resume();
|
|
});
|
|
|
|
btnFS.addEventListener('click', () => {
|
|
if (document.fullscreenElement) {
|
|
document.exitFullscreen();
|
|
} else {
|
|
container.requestFullscreen().catch(() => {});
|
|
}
|
|
});
|
|
document.addEventListener('fullscreenchange', () => {
|
|
const isFS = document.fullscreenElement === container;
|
|
btnFS.innerHTML = svgIcon(isFS ? iconFSExit : iconFS);
|
|
btnFS.title = isFS ? 'Exit fullscreen' : 'Fullscreen';
|
|
});
|
|
|
|
controls.append(btnPlay, timeLabel, spacer, btnMute, volume, btnFS);
|
|
container.append(canvas, controls);
|
|
|
|
this._videoDecoder = null;
|
|
this._audioDecoder = null;
|
|
this._audioCtx = null;
|
|
this._wcGainNode = null;
|
|
let ctx2d = null;
|
|
|
|
// Volume / mute handlers
|
|
const updateVolume = () => {
|
|
if (this._wcGainNode) {
|
|
this._wcGainNode.gain.value = muted ? 0 : parseFloat(volume.value);
|
|
}
|
|
const isMuted = muted || parseFloat(volume.value) === 0;
|
|
btnMute.innerHTML = svgIcon(isMuted ? iconMuted : iconVolume);
|
|
btnMute.title = isMuted ? 'Unmute' : 'Mute';
|
|
};
|
|
btnMute.addEventListener('click', () => { muted = !muted; updateVolume(); });
|
|
volume.addEventListener('input', () => { muted = false; updateVolume(); });
|
|
|
|
this.onmessage['webcodecs'] = msg => {
|
|
if (msg.type !== 'webcodecs') return;
|
|
const info = msg.value;
|
|
|
|
if (info.video) {
|
|
this._videoDecoder = new VideoDecoder({
|
|
output: frame => {
|
|
const w = frame.displayWidth;
|
|
const h = frame.displayHeight;
|
|
if (canvas.width !== w) canvas.width = w;
|
|
if (canvas.height !== h) canvas.height = h;
|
|
if (!ctx2d) {
|
|
ctx2d = canvas.getContext('2d');
|
|
}
|
|
ctx2d.drawImage(frame, 0, 0, w, h);
|
|
frame.close();
|
|
},
|
|
error: err => console.warn('VideoDecoder error:', err),
|
|
});
|
|
this._videoDecoder.configure({
|
|
codec: info.video.codec,
|
|
optimizeForLatency: true,
|
|
});
|
|
}
|
|
|
|
if (info.audio && this.media.includes('audio')) {
|
|
this._audioCtx = new AudioContext({sampleRate: info.audio.sampleRate});
|
|
const actx = this._audioCtx;
|
|
// GainNode for volume control
|
|
this._wcGainNode = actx.createGain();
|
|
this._wcGainNode.connect(actx.destination);
|
|
updateVolume();
|
|
|
|
this._audioDecoder = new AudioDecoder({
|
|
output: data => {
|
|
const buf = actx.createBuffer(
|
|
data.numberOfChannels, data.numberOfFrames, data.sampleRate
|
|
);
|
|
for (let ch = 0; ch < data.numberOfChannels; ch++) {
|
|
data.copyTo(buf.getChannelData(ch), {planeIndex: ch, format: 'f32-planar'});
|
|
}
|
|
const src = actx.createBufferSource();
|
|
src.buffer = buf;
|
|
src.connect(this._wcGainNode);
|
|
const startTime = Math.max(actx._nextTime || 0, actx.currentTime);
|
|
src.start(startTime);
|
|
actx._nextTime = startTime + buf.duration;
|
|
data.close();
|
|
},
|
|
error: () => {
|
|
this._audioDecoder = null;
|
|
},
|
|
});
|
|
this._audioDecoder.configure({
|
|
codec: info.audio.codec,
|
|
sampleRate: info.audio.sampleRate,
|
|
numberOfChannels: info.audio.channels,
|
|
});
|
|
}
|
|
|
|
// Hide audio-only controls when no audio
|
|
if (!info.audio || !this.media.includes('audio')) {
|
|
btnMute.style.display = 'none';
|
|
volume.style.display = 'none';
|
|
}
|
|
|
|
this.video.style.display = 'none';
|
|
this.insertBefore(container, this.video);
|
|
};
|
|
|
|
this.ondata = data => {
|
|
if (paused) return;
|
|
|
|
const view = new DataView(data);
|
|
const flags = view.getUint8(0);
|
|
const isVideo = (flags & 0x80) !== 0;
|
|
const isKeyframe = (flags & 0x40) !== 0;
|
|
const timestamp = view.getUint32(1);
|
|
const payload = new Uint8Array(data, 9);
|
|
|
|
if (isVideo && this._videoDecoder && this._videoDecoder.state === 'configured') {
|
|
this._videoDecoder.decode(new EncodedVideoChunk({
|
|
type: isKeyframe ? 'key' : 'delta',
|
|
timestamp: timestamp,
|
|
data: payload,
|
|
}));
|
|
} else if (!isVideo && this._audioDecoder && this._audioDecoder.state === 'configured') {
|
|
this._audioDecoder.decode(new EncodedAudioChunk({
|
|
type: 'key',
|
|
timestamp: timestamp,
|
|
data: payload,
|
|
}));
|
|
}
|
|
};
|
|
|
|
this.send({type: 'webcodecs', value: ''});
|
|
}
|
|
|
|
onwebrtc() {
|
|
const pc = new RTCPeerConnection(this.pcConfig);
|
|
|
|
pc.addEventListener('icecandidate', ev => {
|
|
if (ev.candidate && this.mode.includes('webrtc/tcp') && ev.candidate.protocol === 'udp') return;
|
|
|
|
const candidate = ev.candidate ? ev.candidate.toJSON().candidate : '';
|
|
this.send({type: 'webrtc/candidate', value: candidate});
|
|
});
|
|
|
|
pc.addEventListener('connectionstatechange', () => {
|
|
if (pc.connectionState === 'connected') {
|
|
const tracks = pc.getTransceivers()
|
|
.filter(tr => tr.currentDirection === 'recvonly') // skip inactive
|
|
.map(tr => tr.receiver.track);
|
|
/** @type {HTMLVideoElement} */
|
|
const video2 = document.createElement('video');
|
|
video2.addEventListener('loadeddata', () => this.onpcvideo(video2), {once: true});
|
|
video2.srcObject = new MediaStream(tracks);
|
|
} else if (pc.connectionState === 'failed' || pc.connectionState === 'disconnected') {
|
|
pc.close(); // stop next events
|
|
|
|
this.pcState = WebSocket.CLOSED;
|
|
this.pc = null;
|
|
|
|
this.onconnect();
|
|
}
|
|
});
|
|
|
|
this.onmessage['webrtc'] = msg => {
|
|
switch (msg.type) {
|
|
case 'webrtc/candidate':
|
|
if (this.mode.includes('webrtc/tcp') && msg.value.includes(' udp ')) return;
|
|
|
|
pc.addIceCandidate({candidate: msg.value, sdpMid: '0'}).catch(er => {
|
|
console.warn(er);
|
|
});
|
|
break;
|
|
case 'webrtc/answer':
|
|
pc.setRemoteDescription({type: 'answer', sdp: msg.value}).catch(er => {
|
|
console.warn(er);
|
|
});
|
|
break;
|
|
case 'error':
|
|
if (!msg.value.includes('webrtc/offer')) return;
|
|
pc.close();
|
|
}
|
|
};
|
|
|
|
this.createOffer(pc).then(offer => {
|
|
this.send({type: 'webrtc/offer', value: offer.sdp});
|
|
});
|
|
|
|
this.pcState = WebSocket.CONNECTING;
|
|
this.pc = pc;
|
|
}
|
|
|
|
/**
|
|
* @param pc {RTCPeerConnection}
|
|
* @return {Promise<RTCSessionDescriptionInit>}
|
|
*/
|
|
async createOffer(pc) {
|
|
try {
|
|
if (this.media.includes('microphone')) {
|
|
const media = await navigator.mediaDevices.getUserMedia({audio: true});
|
|
media.getTracks().forEach(track => {
|
|
pc.addTransceiver(track, {direction: 'sendonly'});
|
|
});
|
|
}
|
|
} catch (e) {
|
|
console.warn(e);
|
|
}
|
|
|
|
for (const kind of ['video', 'audio']) {
|
|
if (this.media.includes(kind)) {
|
|
pc.addTransceiver(kind, {direction: 'recvonly'});
|
|
}
|
|
}
|
|
|
|
const offer = await pc.createOffer();
|
|
await pc.setLocalDescription(offer);
|
|
return offer;
|
|
}
|
|
|
|
/**
|
|
* @param video2 {HTMLVideoElement}
|
|
*/
|
|
onpcvideo(video2) {
|
|
if (this.pc) {
|
|
// Video+Audio > Video, H265 > H264, Video > Audio, WebRTC > MSE
|
|
let rtcPriority = 0, msePriority = 0;
|
|
|
|
/** @type {MediaStream} */
|
|
const stream = video2.srcObject;
|
|
if (stream.getVideoTracks().length > 0) {
|
|
// not the best, but a pretty simple way to check a codec
|
|
const isH265Supported = this.pc.remoteDescription.sdp.includes('H265/90000');
|
|
rtcPriority += isH265Supported ? 0x240 : 0x220;
|
|
}
|
|
if (stream.getAudioTracks().length > 0) rtcPriority += 0x102;
|
|
|
|
if (this.mseCodecs.includes('hvc1.')) msePriority += 0x230;
|
|
if (this.mseCodecs.includes('avc1.')) msePriority += 0x210;
|
|
if (this.mseCodecs.includes('mp4a.')) msePriority += 0x101;
|
|
|
|
if (rtcPriority >= msePriority) {
|
|
this.video.srcObject = stream;
|
|
this.play();
|
|
|
|
this.pcState = WebSocket.OPEN;
|
|
|
|
this.wsState = WebSocket.CLOSED;
|
|
if (this.ws) {
|
|
this.ws.close();
|
|
this.ws = null;
|
|
}
|
|
} else {
|
|
this.pcState = WebSocket.CLOSED;
|
|
if (this.pc) {
|
|
this.pc.close();
|
|
this.pc = null;
|
|
}
|
|
}
|
|
}
|
|
|
|
video2.srcObject = null;
|
|
}
|
|
|
|
onmjpeg() {
|
|
this.ondata = data => {
|
|
this.video.controls = false;
|
|
this.video.poster = 'data:image/jpeg;base64,' + VideoRTC.btoa(data);
|
|
};
|
|
|
|
this.send({type: 'mjpeg'});
|
|
}
|
|
|
|
onhls() {
|
|
this.onmessage['hls'] = msg => {
|
|
if (msg.type !== 'hls') return;
|
|
|
|
const url = 'http' + this.wsURL.substring(2, this.wsURL.indexOf('/ws')) + '/hls/';
|
|
const playlist = msg.value.replace('hls/', url);
|
|
this.video.src = 'data:application/vnd.apple.mpegurl;base64,' + btoa(playlist);
|
|
this.play();
|
|
};
|
|
|
|
this.send({type: 'hls', value: this.codecs(type => this.video.canPlayType(type))});
|
|
}
|
|
|
|
onmp4() {
|
|
/** @type {HTMLCanvasElement} **/
|
|
const canvas = document.createElement('canvas');
|
|
/** @type {CanvasRenderingContext2D} */
|
|
let context;
|
|
|
|
/** @type {HTMLVideoElement} */
|
|
const video2 = document.createElement('video');
|
|
video2.autoplay = true;
|
|
video2.playsInline = true;
|
|
video2.muted = true;
|
|
|
|
video2.addEventListener('loadeddata', () => {
|
|
if (!context) {
|
|
canvas.width = video2.videoWidth;
|
|
canvas.height = video2.videoHeight;
|
|
context = canvas.getContext('2d');
|
|
}
|
|
|
|
context.drawImage(video2, 0, 0, canvas.width, canvas.height);
|
|
|
|
this.video.controls = false;
|
|
this.video.poster = canvas.toDataURL('image/jpeg');
|
|
});
|
|
|
|
this.ondata = data => {
|
|
video2.src = 'data:video/mp4;base64,' + VideoRTC.btoa(data);
|
|
};
|
|
|
|
this.send({type: 'mp4', value: this.codecs(this.video.canPlayType)});
|
|
}
|
|
|
|
static btoa(buffer) {
|
|
const bytes = new Uint8Array(buffer);
|
|
const len = bytes.byteLength;
|
|
let binary = '';
|
|
for (let i = 0; i < len; i++) {
|
|
binary += String.fromCharCode(bytes[i]);
|
|
}
|
|
return window.btoa(binary);
|
|
}
|
|
}
|