administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-05 18:55:23 +03:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Add poster option to JSMpegPlayer for displaying a snapshot of the camera feed

Browse Source
This commit is contained in:
Sergey Krashevich 2023-07-07 15:18:22 +03:00
parent 186e6a4a34
commit 46752970b7
No known key found for this signature in database
GPG Key ID: 625171324E7D3856
1 changed files with 3 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
web/src/components/JSMpegPlayer.jsx
View File

@ -6,12 +6,13 @@ import JSMpeg from '@cycjimmy/jsmpeg-player';
export default function JSMpegPlayer({ camera, width, height }) { export default function JSMpegPlayer({ camera, width, height }) {
const playerRef = useRef(); const playerRef = useRef();
const url = `${baseUrl.replace(/^http/, 'ws')}live/jsmpeg/${camera}`; const url = `${baseUrl.replace(/^http/, 'ws')}live/jsmpeg/${camera}`;
const snapshot = `${baseUrl}api/${camera}/latest.jpg?h=${height}`;
useEffect(() => { useEffect(() => {
const video = new JSMpeg.VideoElement( const video = new JSMpeg.VideoElement(
playerRef.current, playerRef.current,
url, url,
{}, {poster: snapshot},
{protocols: [], audio: false, videoBufferSize: 1024*1024*4} {protocols: [], audio: false, videoBufferSize: 1024*1024*4}
); );
@ -29,7 +30,7 @@ export default function JSMpegPlayer({ camera, width, height }) {
return () => { return () => {
video.destroy(); video.destroy();
}; };
}, [url]); }, [snapshot, url]);
return ( return (
<div ref={playerRef} class="jsmpeg" style={`max-height: ${height}px; max-width: ${width}px`} /> <div ref={playerRef} class="jsmpeg" style={`max-height: ${height}px; max-width: ${width}px`} />