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

Get box overlay working

Browse Source
This commit is contained in:
Nick Mowen 2023-04-21 10:11:54 -06:00
parent b3c4504499
commit 614c950e67
2 changed files with 43 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/components/TimelineSummary.jsx
View File

@ -22,7 +22,7 @@ export default function TimelineSummary({ event, onFrameSelected }) {
const onSelectMoment = async (index) => { const onSelectMoment = async (index) => {
setTimeIndex(index); setTimeIndex(index);
onFrameSelected(eventTimeline[index].timestamp); onFrameSelected(eventTimeline[index]);
}; };
if (!eventTimeline || !config) { if (!eventTimeline || !config) {

64
web/src/routes/Events.jsx
View File

@ -61,6 +61,7 @@ export default function Events({ path, ...props }) {
}); });
const [uploading, setUploading] = useState([]); const [uploading, setUploading] = useState([]);
const [viewEvent, setViewEvent] = useState(); const [viewEvent, setViewEvent] = useState();
const [eventOverlay, setEventOverlay] = useState();
const [eventDetailType, setEventDetailType] = useState('clip'); const [eventDetailType, setEventDetailType] = useState('clip');
const [downloadEvent, setDownloadEvent] = useState({ const [downloadEvent, setDownloadEvent] = useState({
id: null, id: null,
@ -181,14 +182,15 @@ export default function Events({ path, ...props }) {
onFilter(name, items); onFilter(name, items);
}; };
const onEventFrameSelected = (event, frameTime) => { const onEventFrameSelected = (event, frame) => {
const eventDuration = event.end_time - event.start_time; const eventDuration = event.end_time - event.start_time;
if (this.player) { if (this.player) {
this.player.pause(); this.player.pause();
const videoOffset = this.player.duration() - eventDuration; const videoOffset = this.player.duration() - eventDuration;
const startTime = videoOffset + (frameTime - event.start_time); const startTime = videoOffset + (frame.timestamp - event.start_time);
this.player.currentTime(startTime); this.player.currentTime(startTime);
setEventOverlay(frame);
} }
}; };
@ -588,27 +590,45 @@ export default function Events({ path, ...props }) {
<div> <div>
<TimelineSummary <TimelineSummary
event={event} event={event}
onFrameSelected={(frameTime) => onEventFrameSelected(event, frameTime)} onFrameSelected={(frame) => onEventFrameSelected(event, frame)}
/>
<VideoPlayer
options={{
preload: 'auto',
autoplay: true,
sources: [
{
src: `${apiHost}vod/event/${event.id}/master.m3u8`,
type: 'application/vnd.apple.mpegurl',
},
],
}}
seekOptions={{ forward: 10, backward: 5 }}
onReady={(player) => {
this.player = player;
}}
onDispose={() => {
this.player = null;
}}
/> />
<div>
<VideoPlayer
options={{
preload: 'auto',
autoplay: true,
sources: [
{
src: `${apiHost}vod/event/${event.id}/master.m3u8`,
type: 'application/vnd.apple.mpegurl',
},
],
}}
seekOptions={{ forward: 10, backward: 5 }}
onReady={(player) => {
this.player = player;
}}
onDispose={() => {
this.player = null;
}}
>
{eventOverlay ? (
<div
className="absolute border-4 border-red-600"
style={{left: `${Math.round(
eventOverlay.data.box[0] * 100
)}%`, top: `${Math.round(eventOverlay.data.box[1] * 100)}%`, right: `${Math.round(
(1 - eventOverlay.data.box[2]) * 100
)}%`, bottom: `${Math.round((1 - eventOverlay.data.box[3]) * 100)}%`}}
>
{eventOverlay.class_type == 'entered_zone' ? (
<div className="absolute w-2 h-2 bg-red-600 left-[50%] bottom-0" />
) : null}
</div>
) : null}
</VideoPlayer>
</div>
</div> </div>
) : null} ) : null}