Fix MSE Issues (#4725)

* Don't close mse when pausing video

* Add message about MSE on iOS
This commit is contained in:
Nicolas Mowen 2022-12-17 16:56:26 -07:00 committed by GitHub
parent 7953d131ae
commit c85df9c691
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 22 additions and 10 deletions

View File

@ -64,10 +64,11 @@ export default function MsePlayer({ camera, width, height }) {
}
};
video.onpause = () => {
return () => {
const video = document.getElementById('video');
video.srcObject = null;
ws.close();
video.src = null;
}
};
}, [url]);
return (

View File

@ -15,6 +15,7 @@ import { useApiHost } from '../api';
import useSWR from 'swr';
import WebRtcPlayer from '../components/WebRtcPlayer';
import MsePlayer from '../components/MsePlayer';
import videojs from 'video.js';
const emptyObject = Object.freeze({});
@ -98,13 +99,23 @@ export default function Camera({ camera }) {
let player;
if (viewMode === 'live') {
if (viewSource == 'mse') {
player = (
<Fragment>
<div className="max-w-5xl">
<MsePlayer camera={camera} />
</div>
</Fragment>
);
if (videojs.browser.IS_IOS) {
player = (
<Fragment>
<div className="w-5xl text-center text-sm">
MSE is not supported on iOS devices. You'll need to use jsmpeg or webRTC. See the docs for more info.
</div>
</Fragment>
);
} else {
player = (
<Fragment>
<div className="max-w-5xl">
<MsePlayer camera={camera} />
</div>
</Fragment>
);
}
} else if (viewSource == 'webrtc') {
player = (
<Fragment>