diff --git a/web/src/components/JSMpegPlayer.jsx b/web/src/components/JSMpegPlayer.jsx index d3b2b5b15..b9f789b38 100644 --- a/web/src/components/JSMpegPlayer.jsx +++ b/web/src/components/JSMpegPlayer.jsx @@ -8,6 +8,20 @@ export default function JSMpegPlayer({ camera, width, height }) { const url = `${baseUrl.replace(/^http/, 'ws')}/live/${camera}` useEffect(() => { + let wakeLock = null; + + const requestWakeLock = async () => { + if (!navigator.wakeLock) { + return; + } + + try { + wakeLock = await navigator.wakeLock.request('screen'); + } catch (err) { + console.warn(err); + } + } + const video = new JSMpeg.VideoElement( playerRef.current, url, @@ -16,6 +30,8 @@ export default function JSMpegPlayer({ camera, width, height }) { ); const fullscreen = () => { + requestWakeLock(); + if(video.els.canvas.webkitRequestFullScreen) { video.els.canvas.webkitRequestFullScreen(); } @@ -24,9 +40,26 @@ export default function JSMpegPlayer({ camera, width, height }) { } } + const fullscreenchange = () => { + if (document.webkitIsFullScreen) { + return; + } + + if (wakeLock === null) { + return; + } + + wakeLock.release().then(() => { + wakeLock = null; + }); + } + video.els.canvas.addEventListener('click',fullscreen) + video.els.canvas.addEventListener('webkitfullscreenchange',fullscreenchange) return () => { + video.els.canvas.removeEventListener('click',fullscreen) + video.els.canvas.removeEventListener('webkitfullscreenchange',fullscreenchange) video.destroy(); }; }, [url]);