Mirrors/blakeblackshear.frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2025-06-04 01:16:52 +02:00
Code Issues Projects Releases Wiki Activity

Camera WebUI fixes (#5010)

Browse Source 
* Show jsmpeg when restream is disabled

* Fix debug button status not showing correctly when switching cameras

* Change label to make clear only motion masks are shown
This commit is contained in:
Nicolas Mowen 2023-01-11 05:09:58 -07:00 committed by GitHub
parent 581c2591ae
commit 3edbb8dc41
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 7 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
web/src/components/ButtonsTabbed.jsx
View File

@ -3,13 +3,14 @@ import { useCallback, useState } from 'preact/hooks';
export default function ButtonsTabbed({ export default function ButtonsTabbed({
viewModes = [''], viewModes = [''],
currentViewMode = '',
setViewMode = null, setViewMode = null,
setHeader = null, setHeader = null,
headers = [''], headers = [''],
className = 'text-gray-600 py-0 px-4 block hover:text-gray-500', className = 'text-gray-600 py-0 px-4 block hover:text-gray-500',
selectedClassName = `${className} focus:outline-none border-b-2 font-medium border-gray-500`, selectedClassName = `${className} focus:outline-none border-b-2 font-medium border-gray-500`,
}) { }) {
const [selected, setSelected] = useState(0); const [selected, setSelected] = useState(viewModes ? viewModes.indexOf(currentViewMode) : 0);
const captitalize = (str) => { const captitalize = (str) => {
return `${str.charAt(0).toUpperCase()}${str.slice(1)}`; return `${str.charAt(0).toUpperCase()}${str.slice(1)}`;
}; };

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

@ -30,7 +30,7 @@ export default function Camera({ camera }) {
? 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, sourceIsLoaded] = usePersistence(`${camera}-source`, 'mse'); const [viewSource, setViewSource, sourceIsLoaded] = usePersistence(`${camera}-source`, 'mse');
const sourceValues = cameraConfig && cameraConfig.restream.enabled ? ['mse', 'webrtc', 'jsmpeg'] : ['mse']; const sourceValues = cameraConfig && cameraConfig.restream.enabled ? ['mse', 'webrtc', 'jsmpeg'] : ['jsmpeg'];
const [options, setOptions] = usePersistence(`${camera}-feed`, emptyObject); const [options, setOptions] = usePersistence(`${camera}-feed`, emptyObject);
const handleSetOption = useCallback( const handleSetOption = useCallback(
@ -77,7 +77,7 @@ export default function Camera({ camera }) {
labelPosition="after" labelPosition="after"
/> />
<Switch checked={options['zones']} id="zones" onChange={handleSetOption} label="Zones" labelPosition="after" /> <Switch checked={options['zones']} id="zones" onChange={handleSetOption} label="Zones" labelPosition="after" />
<Switch checked={options['mask']} id="mask" onChange={handleSetOption} label="Masks" labelPosition="after" /> <Switch checked={options['mask']} id="mask" onChange={handleSetOption} label="Motion Masks" labelPosition="after" />
<Switch <Switch
checked={options['motion']} checked={options['motion']}
id="motion" id="motion"
@ -98,7 +98,7 @@ export default function Camera({ camera }) {
let player; let player;
if (viewMode === 'live') { if (viewMode === 'live') {
if (viewSource == 'mse') { if (viewSource == 'mse' && cameraConfig.restream.enabled) {
if (videojs.browser.IS_IOS) { if (videojs.browser.IS_IOS) {
player = ( player = (
<Fragment> <Fragment>
@ -116,7 +116,7 @@ export default function Camera({ camera }) {
</Fragment> </Fragment>
); );
} }
} else if (viewSource == 'webrtc') { } else if (viewSource == 'webrtc' && cameraConfig.restream.enabled) {
player = ( player = (
<Fragment> <Fragment>
<div className="max-w-5xl"> <div className="max-w-5xl">
@ -170,7 +170,7 @@ export default function Camera({ camera }) {
</select> </select>
</div> </div>
<ButtonsTabbed viewModes={['live', 'debug']} setViewMode={setViewMode} /> <ButtonsTabbed viewModes={['live', 'debug']} currentViewMode={viewMode} setViewMode={setViewMode} />
{player} {player}