mirror of
https://github.com/blakeblackshear/frigate.git
synced 2024-11-21 19:07:46 +01:00
Streaming download (#14346)
* Send downloaded mp4 as a streaming response instead of a file * Add download button to UI * Formatting * Fix CSS and text Co-authored-by: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com> * download video button component * use download button component in review detail dialog * better filename --------- Co-authored-by: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
This commit is contained in:
Nicolas Mowen
GitHub
parent
dd7a07bd0d
commit
887433fc6a
@ -7,6 +7,7 @@ import os
|
||||
import subprocess as sp
|
||||
import time
|
||||
from datetime import datetime, timedelta, timezone
|
||||
from pathlib import Path as FilePath
|
||||
from urllib.parse import unquote
|
||||
|
||||
import cv2
|
||||
@ -450,8 +451,27 @@ def recording_clip(
|
||||
camera_name: str,
|
||||
start_ts: float,
|
||||
end_ts: float,
|
||||
download: bool = False,
|
||||
):
|
||||
def run_download(ffmpeg_cmd: list[str], file_path: str):
|
||||
with sp.Popen(
|
||||
ffmpeg_cmd,
|
||||
stderr=sp.PIPE,
|
||||
stdout=sp.PIPE,
|
||||
text=False,
|
||||
) as ffmpeg:
|
||||
while True:
|
||||
data = ffmpeg.stdout.read(1024)
|
||||
if data is not None:
|
||||
yield data
|
||||
else:
|
||||
if ffmpeg.returncode and ffmpeg.returncode != 0:
|
||||
logger.error(
|
||||
f"Failed to generate clip, ffmpeg logs: {ffmpeg.stderr.read()}"
|
||||
)
|
||||
else:
|
||||
FilePath(file_path).unlink(missing_ok=True)
|
||||
break
|
||||
|
||||
recordings = (
|
||||
Recordings.select(
|
||||
Recordings.path,
|
||||
@ -467,18 +487,18 @@ def recording_clip(
|
||||
.order_by(Recordings.start_time.asc())
|
||||
)
|
||||
|
||||
playlist_lines = []
|
||||
file_name = sanitize_filename(f"playlist_{camera_name}_{start_ts}-{end_ts}.txt")
|
||||
file_path = f"/tmp/cache/{file_name}"
|
||||
with open(file_path, "w") as file:
|
||||
clip: Recordings
|
||||
for clip in recordings:
|
||||
playlist_lines.append(f"file '{clip.path}'")
|
||||
file.write(f"file '{clip.path}'\n")
|
||||
# if this is the starting clip, add an inpoint
|
||||
if clip.start_time < start_ts:
|
||||
playlist_lines.append(f"inpoint {int(start_ts - clip.start_time)}")
|
||||
file.write(f"inpoint {int(start_ts - clip.start_time)}\n")
|
||||
# if this is the ending clip, add an outpoint
|
||||
if clip.end_time > end_ts:
|
||||
playlist_lines.append(f"outpoint {int(end_ts - clip.start_time)}")
|
||||
|
||||
file_name = sanitize_filename(f"clip_{camera_name}_{start_ts}-{end_ts}.mp4")
|
||||
file.write(f"outpoint {int(end_ts - clip.start_time)}\n")
|
||||
|
||||
if len(file_name) > 1000:
|
||||
return JSONResponse(
|
||||
@ -489,11 +509,8 @@ def recording_clip(
|
||||
status_code=403,
|
||||
)
|
||||
|
||||
path = os.path.join(CLIPS_DIR, f"cache/{file_name}")
|
||||
|
||||
config: FrigateConfig = request.app.frigate_config
|
||||
|
||||
if not os.path.exists(path):
|
||||
ffmpeg_cmd = [
|
||||
config.ffmpeg.ffmpeg_path,
|
||||
"-hide_banner",
|
||||
@ -505,51 +522,19 @@ def recording_clip(
|
||||
"-safe",
|
||||
"0",
|
||||
"-i",
|
||||
"/dev/stdin",
|
||||
file_path,
|
||||
"-c",
|
||||
"copy",
|
||||
"-movflags",
|
||||
"+faststart",
|
||||
path,
|
||||
"frag_keyframe+empty_moov",
|
||||
"-f",
|
||||
"mp4",
|
||||
"pipe:",
|
||||
]
|
||||
p = sp.run(
|
||||
ffmpeg_cmd,
|
||||
input="\n".join(playlist_lines),
|
||||
encoding="ascii",
|
||||
capture_output=True,
|
||||
)
|
||||
|
||||
if p.returncode != 0:
|
||||
logger.error(p.stderr)
|
||||
return JSONResponse(
|
||||
content={
|
||||
"success": False,
|
||||
"message": "Could not create clip from recordings",
|
||||
},
|
||||
status_code=500,
|
||||
)
|
||||
else:
|
||||
logger.debug(
|
||||
f"Ignoring subsequent request for {path} as it already exists in the cache."
|
||||
)
|
||||
|
||||
headers = {
|
||||
"Content-Description": "File Transfer",
|
||||
"Cache-Control": "no-cache",
|
||||
"Content-Type": "video/mp4",
|
||||
"Content-Length": str(os.path.getsize(path)),
|
||||
# nginx: https://nginx.org/en/docs/http/ngx_http_proxy_module.html#proxy_ignore_headers
|
||||
"X-Accel-Redirect": f"/clips/cache/{file_name}",
|
||||
}
|
||||
|
||||
if download:
|
||||
headers["Content-Disposition"] = "attachment; filename=%s" % file_name
|
||||
|
||||
return FileResponse(
|
||||
path,
|
||||
return StreamingResponse(
|
||||
run_download(ffmpeg_cmd, file_path),
|
||||
media_type="video/mp4",
|
||||
filename=file_name,
|
||||
headers=headers,
|
||||
)
|
||||
|
||||
|
||||
@ -1028,7 +1013,7 @@ def event_snapshot_clean(request: Request, event_id: str, download: bool = False
|
||||
|
||||
|
||||
@router.get("/events/{event_id}/clip.mp4")
|
||||
def event_clip(request: Request, event_id: str, download: bool = False):
|
||||
def event_clip(request: Request, event_id: str):
|
||||
try:
|
||||
event: Event = Event.get(Event.id == event_id)
|
||||
except DoesNotExist:
|
||||
@ -1048,7 +1033,7 @@ def event_clip(request: Request, event_id: str, download: bool = False):
|
||||
end_ts = (
|
||||
datetime.now().timestamp() if event.end_time is None else event.end_time
|
||||
)
|
||||
return recording_clip(request, event.camera, event.start_time, end_ts, download)
|
||||
return recording_clip(request, event.camera, event.start_time, end_ts)
|
||||
|
||||
headers = {
|
||||
"Content-Description": "File Transfer",
|
||||
@ -1059,9 +1044,6 @@ def event_clip(request: Request, event_id: str, download: bool = False):
|
||||
"X-Accel-Redirect": f"/clips/{file_name}",
|
||||
}
|
||||
|
||||
if download:
|
||||
headers["Content-Disposition"] = "attachment; filename=%s" % file_name
|
||||
|
||||
return FileResponse(
|
||||
clip_path,
|
||||
media_type="video/mp4",
|
||||
|
||||
75
web/src/components/button/DownloadVideoButton.tsx
Normal file
75
web/src/components/button/DownloadVideoButton.tsx
Normal file
@ -0,0 +1,75 @@
|
||||
import { useState } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { toast } from "sonner";
|
||||
import ActivityIndicator from "../indicators/activity-indicator";
|
||||
import { FaDownload } from "react-icons/fa";
|
||||
import { formatUnixTimestampToDateTime } from "@/utils/dateUtil";
|
||||
|
||||
type DownloadVideoButtonProps = {
|
||||
source: string;
|
||||
camera: string;
|
||||
startTime: number;
|
||||
};
|
||||
|
||||
export function DownloadVideoButton({
|
||||
source,
|
||||
camera,
|
||||
startTime,
|
||||
}: DownloadVideoButtonProps) {
|
||||
const [isDownloading, setIsDownloading] = useState(false);
|
||||
|
||||
const handleDownload = async () => {
|
||||
setIsDownloading(true);
|
||||
const formattedDate = formatUnixTimestampToDateTime(startTime, {
|
||||
strftime_fmt: "%D-%T",
|
||||
time_style: "medium",
|
||||
date_style: "medium",
|
||||
});
|
||||
const filename = `${camera}_${formattedDate}.mp4`;
|
||||
|
||||
try {
|
||||
const response = await fetch(source);
|
||||
const blob = await response.blob();
|
||||
const url = window.URL.createObjectURL(blob);
|
||||
const a = document.createElement("a");
|
||||
a.style.display = "none";
|
||||
a.href = url;
|
||||
a.download = filename;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
window.URL.revokeObjectURL(url);
|
||||
toast.success(
|
||||
"Your review item video has been downloaded successfully.",
|
||||
{
|
||||
position: "top-center",
|
||||
},
|
||||
);
|
||||
} catch (error) {
|
||||
toast.error(
|
||||
"There was an error downloading the review item video. Please try again.",
|
||||
{
|
||||
position: "top-center",
|
||||
},
|
||||
);
|
||||
} finally {
|
||||
setIsDownloading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex justify-center">
|
||||
<Button
|
||||
onClick={handleDownload}
|
||||
disabled={isDownloading}
|
||||
className="flex items-center gap-2"
|
||||
size="sm"
|
||||
>
|
||||
{isDownloading ? (
|
||||
<ActivityIndicator className="h-4 w-4" />
|
||||
) : (
|
||||
<FaDownload className="h-4 w-4" />
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -38,6 +38,8 @@ import {
|
||||
MobilePageTitle,
|
||||
} from "@/components/mobile/MobilePage";
|
||||
import { useOverlayState } from "@/hooks/use-overlay-state";
|
||||
import { DownloadVideoButton } from "@/components/button/DownloadVideoButton";
|
||||
import { TooltipPortal } from "@radix-ui/react-tooltip";
|
||||
|
||||
type ReviewDetailDialogProps = {
|
||||
review?: ReviewSegment;
|
||||
@ -143,7 +145,7 @@ export default function ReviewDetailDialog({
|
||||
<Description className="sr-only">Review item details</Description>
|
||||
<div
|
||||
className={cn(
|
||||
"absolute",
|
||||
"absolute flex gap-2 lg:flex-col",
|
||||
isDesktop && "right-1 top-8",
|
||||
isMobile && "right-0 top-3",
|
||||
)}
|
||||
@ -159,7 +161,21 @@ export default function ReviewDetailDialog({
|
||||
<FaShareAlt className="size-4 text-secondary-foreground" />
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipPortal>
|
||||
<TooltipContent>Share this review item</TooltipContent>
|
||||
</TooltipPortal>
|
||||
</Tooltip>
|
||||
<Tooltip>
|
||||
<TooltipTrigger>
|
||||
<DownloadVideoButton
|
||||
source={`${baseUrl}api/${review.camera}/start/${review.start_time}/end/${review.end_time || Date.now() / 1000}/clip.mp4`}
|
||||
camera={review.camera}
|
||||
startTime={review.start_time}
|
||||
/>
|
||||
</TooltipTrigger>
|
||||
<TooltipPortal>
|
||||
<TooltipContent>Download</TooltipContent>
|
||||
</TooltipPortal>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</Header>
|
||||
@ -180,7 +196,7 @@ export default function ReviewDetailDialog({
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex w-full flex-col items-center gap-2">
|
||||
<div className="flex w-full flex-col gap-1.5">
|
||||
<div className="flex w-full flex-col gap-1.5 lg:pr-8">
|
||||
<div className="text-sm text-primary/40">Objects</div>
|
||||
<div className="scrollbar-container flex max-h-32 flex-col items-start gap-2 overflow-y-auto text-sm capitalize">
|
||||
{events?.map((event) => {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user