administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-03 09:45:22 +03:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Add selector for live view source in web view

Browse Source
This commit is contained in:
Nick Mowen 2022-10-24 06:57:27 -06:00
parent 2c8057252f
commit 52d95e96cd
1 changed files with 21 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -28,7 +28,8 @@ export default function Camera({ camera }) {
const jsmpegWidth = cameraConfig const jsmpegWidth = cameraConfig
? Math.round(cameraConfig.restream.jsmpeg.height * (cameraConfig.detect.width / cameraConfig.detect.height)) ? Math.round(cameraConfig.restream.jsmpeg.height * (cameraConfig.detect.width / cameraConfig.detect.height))
: 0; : 0;
const [viewSource, setViewSource] = usePersistence(`${camera}-source`, 'webrtc'); const [viewSource, setViewSource] = usePersistence(`${camera}-source`, 'jsmpeg');
const sourceValues = cameraConfig.restream.enabled ? ['jsmpeg', 'mp4', 'webrtc'] : ['jsmpeg'];
const [options, setOptions] = usePersistence(`${camera}-feed`, emptyObject); const [options, setOptions] = usePersistence(`${camera}-feed`, emptyObject);
const handleSetOption = useCallback( const handleSetOption = useCallback(
@ -99,7 +100,7 @@ export default function Camera({ camera }) {
if (viewSource == 'mp4') { if (viewSource == 'mp4') {
player = ( player = (
<Fragment> <Fragment>
<div className='max-w-7xl'> <div className="max-w-7xl">
<VideoPlayer <VideoPlayer
live={true} live={true}
options={{ options={{
@ -109,7 +110,7 @@ export default function Camera({ camera }) {
playbackRates: [1], playbackRates: [1],
sources: [ sources: [
{ {
src: `${apiHost}/restream/mp4/${camera}`, src: `${apiHost}/live/mp4/${camera}`,
type: 'video/mp4', type: 'video/mp4',
}, },
], ],
@ -123,11 +124,11 @@ export default function Camera({ camera }) {
} else if (viewSource == 'webrtc') { } else if (viewSource == 'webrtc') {
player = ( player = (
<Fragment> <Fragment>
<div className='max-w-5xl'> <div className="max-w-5xl">
<WebRtcPlayer camera={camera} /> <WebRtcPlayer camera={camera} />
</div> </div>
</Fragment> </Fragment>
) );
} else { } else {
player = ( player = (
<Fragment> <Fragment>
@ -157,7 +158,21 @@ export default function Camera({ camera }) {
return ( return (
<div className="space-y-4 p-2 px-4"> <div className="space-y-4 p-2 px-4">
<Heading size="2xl">{camera.replaceAll('_', ' ')}</Heading> <div className='flex justify-between'>
<Heading className='p-2' size="2xl">{camera.replaceAll('_', ' ')}</Heading>
<select
className="basis-1/8 cursor-pointer rounded dark:bg-slate-800"
value={viewSource}
onChange={(e) => setViewSource(e.target.value)}
>
{sourceValues.map((item) => (
<option key={item} value={item}>
{item}
</option>
))}
</select>
</div>
<ButtonsTabbed viewModes={['live', 'debug']} setViewMode={setViewMode} /> <ButtonsTabbed viewModes={['live', 'debug']} setViewMode={setViewMode} />
{player} {player}