administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2025-12-06 21:44:13 +03:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

HLS adjustments (#20983)

Browse Source 
* Revert "Fix HLS jumping to end of timeChunk (#20982)"

This reverts commit 301e0a1a3a.

* Never use native HLS

* Fix inverse operation
This commit is contained in:
Nicolas Mowen 2025-11-20 15:58:58 -07:00 committed by GitHub
parent 301e0a1a3a
commit b0527df3c7
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 21 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
web/src/components/player/HlsVideoPlayer.tsx
View File

@ -6,7 +6,7 @@ import {
useState, useState,
} from "react"; } from "react";
import Hls from "hls.js"; import Hls from "hls.js";
import { isAndroid, isDesktop, isMobile } from "react-device-detect"; import { isDesktop, isMobile } from "react-device-detect";
import { TransformComponent, TransformWrapper } from "react-zoom-pan-pinch"; import { TransformComponent, TransformWrapper } from "react-zoom-pan-pinch";
import VideoControls from "./VideoControls"; import VideoControls from "./VideoControls";
import { VideoResolutionType } from "@/types/live"; import { VideoResolutionType } from "@/types/live";
@ -22,7 +22,7 @@ import { useTranslation } from "react-i18next";
import ObjectTrackOverlay from "@/components/overlay/ObjectTrackOverlay"; import ObjectTrackOverlay from "@/components/overlay/ObjectTrackOverlay";
// Android native hls does not seek correctly // Android native hls does not seek correctly
const USE_NATIVE_HLS = !isAndroid; const USE_NATIVE_HLS = false;
const HLS_MIME_TYPE = "application/vnd.apple.mpegurl" as const; const HLS_MIME_TYPE = "application/vnd.apple.mpegurl" as const;
const unsupportedErrorCodes = [ const unsupportedErrorCodes = [
MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED, MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED,
@ -135,23 +135,6 @@ export default function HlsVideoPlayer({
if (!useHlsCompat) { if (!useHlsCompat) {
videoRef.current.src = currentSource.playlist; videoRef.current.src = currentSource.playlist;
videoRef.current.load(); videoRef.current.load();
// For native HLS, we need to seek after metadata loads since startPosition isn't supported
if (currentSource.startPosition !== undefined) {
videoRef.current.addEventListener(
"loadedmetadata",
() => {
if (videoRef.current && currentSource.startPosition !== undefined) {
// Clamp startPosition to video duration to prevent seeking beyond the end
const clampedPosition = Math.min(
currentSource.startPosition,
videoRef.current.duration || Infinity,
);
videoRef.current.currentTime = clampedPosition;
}
},
{ once: true },
);
}
return; return;
} }

19
web/src/components/player/dynamic/DynamicVideoPlayer.tsx
View File

@ -111,6 +111,7 @@ export default function DynamicVideoPlayer({
const [loadingTimeout, setLoadingTimeout] = useState<NodeJS.Timeout>(); const [loadingTimeout, setLoadingTimeout] = useState<NodeJS.Timeout>();
const [source, setSource] = useState<HlsSource>({ const [source, setSource] = useState<HlsSource>({
playlist: `${apiHost}vod/${camera}/start/${timeRange.after}/end/${timeRange.before}/master.m3u8`, playlist: `${apiHost}vod/${camera}/start/${timeRange.after}/end/${timeRange.before}/master.m3u8`,
startPosition: startTimestamp ? startTimestamp - timeRange.after : 0,
}); });
// start at correct time // start at correct time
@ -195,8 +196,26 @@ export default function DynamicVideoPlayer({
playerRef.current.autoplay = !isScrubbing; playerRef.current.autoplay = !isScrubbing;
} }
let startPosition = undefined;
if (startTimestamp) {
const inpointOffset = calculateInpointOffset(
recordingParams.after,
(recordings || [])[0],
);
const idealStartPosition = Math.max(
0,
startTimestamp - timeRange.after - inpointOffset,
);
if (idealStartPosition >= recordings[0].start_time - timeRange.after) {
startPosition = idealStartPosition;
}
}
setSource({ setSource({
playlist: `${apiHost}vod/${camera}/start/${recordingParams.after}/end/${recordingParams.before}/master.m3u8`, playlist: `${apiHost}vod/${camera}/start/${recordingParams.after}/end/${recordingParams.before}/master.m3u8`,
startPosition,
}); });
setLoadingTimeout(setTimeout(() => setIsLoading(true), 1000)); setLoadingTimeout(setTimeout(() => setIsLoading(true), 1000));