diff --git a/web/src/components/MsePlayer.jsx b/web/src/components/MsePlayer.jsx index a1b2ed9ea..27e8d7047 100644 --- a/web/src/components/MsePlayer.jsx +++ b/web/src/components/MsePlayer.jsx @@ -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 ( diff --git a/web/src/routes/Camera.jsx b/web/src/routes/Camera.jsx index abcda7d94..2b9a5e396 100644 --- a/web/src/routes/Camera.jsx +++ b/web/src/routes/Camera.jsx @@ -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 = ( - - - - - - ); + if (videojs.browser.IS_IOS) { + player = ( + + + MSE is not supported on iOS devices. You'll need to use jsmpeg or webRTC. See the docs for more info. + + + ); + } else { + player = ( + + + + + + ); + } } else if (viewSource == 'webrtc') { player = (