Mirrors/blakeblackshear.frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2024-11-21 19:07:46 +01:00
Code Issues Projects Releases Wiki Activity

swith camera view to jsmpeg

Browse Source
This commit is contained in:
Blake Blackshear 2021-06-13 14:21:20 -05:00
parent 3b695040d1
commit 861ee0485d
3 changed files with 37 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,14 +5,13 @@ import JSMpeg from '@cycjimmy/jsmpeg-player';
export default function JSMpegPlayer({ camera }) { export default function JSMpegPlayer({ camera }) {
const playerRef = useRef(); const playerRef = useRef();
const canvasRef = useRef();
const url = `${baseUrl.replace(/^http/, 'ws')}/live/${camera}` const url = `${baseUrl.replace(/^http/, 'ws')}/live/${camera}`
useEffect(() => { useEffect(() => {
const video = new JSMpeg.VideoElement( const video = new JSMpeg.VideoElement(
playerRef.current, playerRef.current,
url, url,
{canvas: canvasRef.current}, {},
{protocols: [], audio: false} {protocols: [], audio: false}
); );
@ -22,8 +21,7 @@ export default function JSMpegPlayer({ camera }) {
}, [url]); }, [url]);
return ( return (
<div ref={playerRef} className="jsmpeg"> <div ref={playerRef} class="jsmpeg">
<canvas ref={canvasRef} className="relative w-full" />
</div> </div>
); );
} }

4
web/src/index.css
View File

@ -25,3 +25,7 @@
transform: rotate(360deg); transform: rotate(360deg);
} }
} }
.jsmpeg canvas {
position: static !important;
}

35
web/src/routes/Camera.jsx
View File

@ -1,5 +1,6 @@
import { h } from 'preact'; import { h, Fragment } from 'preact';
import AutoUpdatingCameraImage from '../components/AutoUpdatingCameraImage'; import AutoUpdatingCameraImage from '../components/AutoUpdatingCameraImage';
import JSMpegPlayer from '../components/JSMpegPlayer';
import Button from '../components/Button'; import Button from '../components/Button';
import Card from '../components/Card'; import Card from '../components/Card';
import Heading from '../components/Heading'; import Heading from '../components/Heading';
@ -16,6 +17,7 @@ export default function Camera({ camera }) {
const { data: config } = useConfig(); const { data: config } = useConfig();
const apiHost = useApiHost(); const apiHost = useApiHost();
const [showSettings, setShowSettings] = useState(false); const [showSettings, setShowSettings] = useState(false);
const [viewMode, setViewMode] = useState('live');
const cameraConfig = config?.cameras[camera]; const cameraConfig = config?.cameras[camera];
const [options, setOptions] = usePersistence(`${camera}-feed`, emptyObject); const [options, setOptions] = usePersistence(`${camera}-feed`, emptyObject);
@ -79,9 +81,16 @@ export default function Camera({ camera }) {
</div> </div>
) : null; ) : null;
return ( let player;
<div className="space-y-4"> if (viewMode == 'live') {
<Heading size="2xl">{camera}</Heading> player = <>
<div>
<JSMpegPlayer camera={camera} />
</div>
</>;
}
else if (viewMode == 'debug') {
player = <>
<div> <div>
<AutoUpdatingCameraImage camera={camera} searchParams={searchParams} /> <AutoUpdatingCameraImage camera={camera} searchParams={searchParams} />
</div> </div>
@ -93,6 +102,24 @@ export default function Camera({ camera }) {
<span>{showSettings ? 'Hide' : 'Show'} Options</span> <span>{showSettings ? 'Hide' : 'Show'} Options</span>
</Button> </Button>
{showSettings ? <Card header="Options" elevated={false} content={optionContent} /> : null} {showSettings ? <Card header="Options" elevated={false} content={optionContent} /> : null}
</>;
}
return (
<div className="space-y-4">
<Heading size="2xl">{camera}</Heading>
<div>
<nav className="flex justify-end">
<button onClick={() => setViewMode('live')} className={viewMode == 'live' ? `text-gray-600 py-0 px-4 block hover:text-gray-500 focus:outline-none border-b-2 font-medium border-gray-500` : `text-gray-600 py-0 px-4 block hover:text-gray-500`}>
Live
</button>
<button onClick={() => setViewMode('debug')} className={viewMode == 'debug' ? `text-gray-600 py-0 px-4 block hover:text-gray-500 focus:outline-none border-b-2 font-medium border-gray-500` : `text-gray-600 py-0 px-4 block hover:text-gray-500`}>
Debug
</button>
</nav>
</div>
{player}
<div className="space-y-4"> <div className="space-y-4">
<Heading size="sm">Tracked objects</Heading> <Heading size="sm">Tracked objects</Heading>