Add support ManagedMediaSource for Safari 17

This commit is contained in:
Alex X
2023-09-26 13:25:50 +03:00
parent 3f6e83e87c
commit 037970a4ea
+31 -16
View File
@@ -7,6 +7,7 @@
* - ECMAScript 2017 (ES8) = ES6 + async * - ECMAScript 2017 (ES8) = ES6 + async
* - RTCPeerConnection for Safari iOS 11.0+ * - RTCPeerConnection for Safari iOS 11.0+
* - IntersectionObserver for Safari iOS 12.2+ * - IntersectionObserver for Safari iOS 12.2+
* - ManagedMediaSource for Safari 17+
* *
* Doesn't support: * Doesn't support:
* - MediaSource for Safari iOS * - MediaSource for Safari iOS
@@ -174,11 +175,9 @@ export class VideoRTC extends HTMLElement {
if (this.ws) this.ws.send(JSON.stringify(value)); if (this.ws) this.ws.send(JSON.stringify(value));
} }
codecs(type) { /** @param {Function} isSupported */
const test = type === 'mse' codecs(isSupported) {
? codec => MediaSource.isTypeSupported(`video/mp4; codecs="${codec}"`) return this.CODECS.filter(codec => isSupported(`video/mp4; codecs="${codec}"`)).join();
: codec => this.video.canPlayType(`video/mp4; codecs="${codec}"`);
return this.CODECS.filter(test).join();
} }
/** /**
@@ -334,7 +333,7 @@ export class VideoRTC extends HTMLElement {
const modes = []; const modes = [];
if (this.mode.indexOf('mse') >= 0 && 'MediaSource' in window) { // iPhone if (this.mode.indexOf('mse') >= 0 && ('MediaSource' in window || 'ManagedMediaSource' in window)) {
modes.push('mse'); modes.push('mse');
this.onmse(); this.onmse();
} else if (this.mode.indexOf('hls') >= 0 && this.video.canPlayType('application/vnd.apple.mpegurl')) { } else if (this.mode.indexOf('hls') >= 0 && this.video.canPlayType('application/vnd.apple.mpegurl')) {
@@ -345,7 +344,7 @@ export class VideoRTC extends HTMLElement {
this.onmp4(); this.onmp4();
} }
if (this.mode.indexOf('webrtc') >= 0 && 'RTCPeerConnection' in window) { // macOS Desktop app if (this.mode.indexOf('webrtc') >= 0 && 'RTCPeerConnection' in window) {
modes.push('webrtc'); modes.push('webrtc');
this.onwebrtc(); this.onwebrtc();
} }
@@ -387,14 +386,30 @@ export class VideoRTC extends HTMLElement {
} }
onmse() { onmse() {
const ms = new MediaSource(); /** @type {MediaSource} */
ms.addEventListener('sourceopen', () => { let ms;
URL.revokeObjectURL(this.video.src);
this.send({type: 'mse', value: this.codecs('mse')}); if ('ManagedMediaSource' in window) {
}, {once: true}); 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.video.src = URL.createObjectURL(ms);
this.video.srcObject = null;
this.play(); this.play();
this.mseCodecs = ''; this.mseCodecs = '';
@@ -586,7 +601,7 @@ export class VideoRTC extends HTMLElement {
this.play(); this.play();
}; };
this.send({type: 'hls', value: this.codecs('hls')}); this.send({type: 'hls', value: this.codecs(this.video.canPlayType)});
} }
onmp4() { onmp4() {
@@ -618,7 +633,7 @@ export class VideoRTC extends HTMLElement {
video2.src = 'data:video/mp4;base64,' + VideoRTC.btoa(data); video2.src = 'data:video/mp4;base64,' + VideoRTC.btoa(data);
}; };
this.send({type: 'mp4', value: this.codecs('mp4')}); this.send({type: 'mp4', value: this.codecs(this.video.canPlayType)});
} }
static btoa(buffer) { static btoa(buffer) {