forked from harakas/frigate
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Camera.jsx
214 lines (197 loc) · 6.5 KB
/
Camera.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
import { h, Fragment } from 'preact';
import AutoUpdatingCameraImage from '../components/AutoUpdatingCameraImage';
import ActivityIndicator from '../components/ActivityIndicator';
import JSMpegPlayer from '../components/JSMpegPlayer';
import Button from '../components/Button';
import Card from '../components/Card';
import Heading from '../components/Heading';
import Link from '../components/Link';
import SettingsIcon from '../icons/Settings';
import Switch from '../components/Switch';
import ButtonsTabbed from '../components/ButtonsTabbed';
import { usePersistence } from '../context';
import { useCallback, useMemo, useState } from 'preact/hooks';
import { useApiHost } from '../api';
import useSWR from 'swr';
import WebRtcPlayer from '../components/WebRtcPlayer';
import MsePlayer from '../components/MsePlayer';
const emptyObject = Object.freeze({});
export default function Camera({ camera }) {
const { data: config } = useSWR('config');
const apiHost = useApiHost();
const [showSettings, setShowSettings] = useState(false);
const [viewMode, setViewMode] = useState('live');
const cameraConfig = config?.cameras[camera];
const restreamEnabled = cameraConfig && Object.keys(config.go2rtc.streams).includes(cameraConfig.live.stream_name);
const jsmpegWidth = cameraConfig
? Math.round(cameraConfig.live.height * (cameraConfig.detect.width / cameraConfig.detect.height))
: 0;
const [viewSource, setViewSource, sourceIsLoaded] = usePersistence(
`${camera}-source`,
getDefaultLiveMode(config, cameraConfig)
);
const sourceValues = restreamEnabled ? ['mse', 'webrtc', 'jsmpeg'] : ['jsmpeg'];
const [options, setOptions] = usePersistence(`${camera}-feed`, emptyObject);
const handleSetOption = useCallback(
(id, value) => {
const newOptions = { ...options, [id]: value };
setOptions(newOptions);
},
[options, setOptions]
);
const searchParams = useMemo(
() =>
new URLSearchParams(
Object.keys(options).reduce((memo, key) => {
memo.push([key, options[key] === true ? '1' : '0']);
return memo;
}, [])
),
[options]
);
const handleToggleSettings = useCallback(() => {
setShowSettings(!showSettings);
}, [showSettings, setShowSettings]);
if (!cameraConfig || !sourceIsLoaded) {
return <ActivityIndicator />;
}
const optionContent = showSettings ? (
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
<Switch
checked={options['bbox']}
id="bbox"
onChange={handleSetOption}
label="Bounding box"
labelPosition="after"
/>
<Switch
checked={options['timestamp']}
id="timestamp"
onChange={handleSetOption}
label="Timestamp"
labelPosition="after"
/>
<Switch checked={options['zones']} id="zones" onChange={handleSetOption} label="Zones" labelPosition="after" />
<Switch
checked={options['mask']}
id="mask"
onChange={handleSetOption}
label="Motion Masks"
labelPosition="after"
/>
<Switch
checked={options['motion']}
id="motion"
onChange={handleSetOption}
label="Motion boxes"
labelPosition="after"
/>
<Switch
checked={options['regions']}
id="regions"
onChange={handleSetOption}
label="Regions"
labelPosition="after"
/>
<Link href={`/cameras/${camera}/editor`}>Mask & Zone creator</Link>
</div>
) : null;
let player;
if (viewMode === 'live') {
if (viewSource == 'mse' && restreamEnabled) {
if ('MediaSource' in window) {
player = (
<Fragment>
<div className="max-w-5xl">
<MsePlayer camera={cameraConfig.live.stream_name} />
</div>
</Fragment>
);
} else {
player = (
<Fragment>
<div className="w-5xl text-center text-sm">
MSE is not supported on iOS devices. You'll need to use jsmpeg or webRTC. See the docs for more info.
</div>
</Fragment>
);
}
} else if (viewSource == 'webrtc' && restreamEnabled) {
player = (
<Fragment>
<div className="max-w-5xl">
<WebRtcPlayer camera={cameraConfig.live.stream_name} />
</div>
</Fragment>
);
} else {
player = (
<Fragment>
<div>
<JSMpegPlayer camera={camera} width={jsmpegWidth} height={cameraConfig.live.height} />
</div>
</Fragment>
);
}
} else if (viewMode === 'debug') {
player = (
<Fragment>
<div>
<AutoUpdatingCameraImage camera={camera} searchParams={searchParams} />
</div>
<Button onClick={handleToggleSettings} type="text">
<span className="w-5 h-5">
<SettingsIcon />
</span>{' '}
<span>{showSettings ? 'Hide' : 'Show'} Options</span>
</Button>
{showSettings ? <Card header="Options" elevated={false} content={optionContent} /> : null}
</Fragment>
);
}
return (
<div className="space-y-4 p-2 px-4">
<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']} currentViewMode={viewMode} setViewMode={setViewMode} />
{player}
<div className="space-y-4">
<Heading size="sm">Tracked objects</Heading>
<div className="flex flex-wrap justify-start">
{cameraConfig.objects.track.map((objectType) => (
<Card
className="mb-4 mr-4"
key={objectType}
header={objectType}
href={`/events?cameras=${camera}&labels=${encodeURIComponent(objectType)}`}
media={<img src={`${apiHost}/api/${camera}/${encodeURIComponent(objectType)}/thumbnail.jpg`} />}
/>
))}
</div>
</div>
</div>
);
}
function getDefaultLiveMode(config, cameraConfig, restreamEnabled) {
if (cameraConfig) {
if (restreamEnabled) {
return config.ui.live_mode;
}
return 'jsmpeg';
}
return undefined;
}