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

Manually calculate buffer timeout

Browse Source
This commit is contained in:
Nicolas Mowen 2024-05-31 07:42:16 -06:00
parent 714be8f414
commit c032885e74
2 changed files with 48 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
web/src/components/player/MsePlayer.tsx
View File

@ -47,7 +47,7 @@ function MSEPlayer({
const [wsState, setWsState] = useState<number>(WebSocket.CLOSED);
const [connectTS, setConnectTS] = useState<number>(0);
const [receivedData, setReceivedData] = useState(false);
const [bufferTimeout, setBufferTimeout] = useState<NodeJS.Timeout>();
const videoRef = useRef<HTMLVideoElement>(null);
const wsRef = useRef<WebSocket | null>(null);
@ -103,7 +103,6 @@ function MSEPlayer({
const onConnect = useCallback(() => {
if (!videoRef.current?.isConnected || !wsURL || wsRef.current) return false;
setReceivedData(false);
setWsState(WebSocket.CONNECTING);
setConnectTS(Date.now());
@ -310,18 +309,33 @@ function MSEPlayer({
onLoadedData={() => {
handleLoadedMetadata?.();
onPlaying?.();
setReceivedData(true);
}}
muted={!audioEnabled}
onStalled={() => {
if (receivedData) {
onError?.("stalled");
} else {
onError?.("startup");
}
}}
onError={() => {
if (!receivedData) {
onProgress={
onError != undefined
? () => {
if (videoRef.current?.paused) {
return;
}
if (bufferTimeout) {
clearTimeout(bufferTimeout);
setBufferTimeout(undefined);
}
setBufferTimeout(
setTimeout(() => {
onError("stalled");
}, 3000),
);
}
: undefined
}
onError={(e) => {
if (
// @ts-expect-error code does exist
e.target.error.code == MediaError.MEDIA_ERR_NETWORK
) {
onError?.("startup");
}

36
web/src/components/player/WebRTCPlayer.tsx
View File

@ -35,7 +35,7 @@ export default function WebRtcPlayer({
const pcRef = useRef<RTCPeerConnection | undefined>();
const videoRef = useRef<HTMLVideoElement | null>(null);
const [receivedData, setReceivedData] = useState(false);
const [bufferTimeout, setBufferTimeout] = useState<NodeJS.Timeout>();
const PeerConnection = useCallback(
async (media: string) => {
@ -168,8 +168,6 @@ export default function WebRtcPlayer({
pcRef.current.close();
pcRef.current = undefined;
}
setReceivedData(false);
};
}, [
camera,
@ -203,17 +201,27 @@ export default function WebRtcPlayer({
autoPlay
playsInline
muted={!audioEnabled}
onLoadedData={() => {
setReceivedData(true);
onPlaying?.();
}}
onStalled={() => {
if (receivedData) {
onError?.("stalled");
} else {
onError?.("startup");
}
}}
onLoadedData={onPlaying}
onProgress={
onError != undefined
? () => {
if (videoRef.current?.paused) {
return;
}
if (bufferTimeout) {
clearTimeout(bufferTimeout);
setBufferTimeout(undefined);
}
setBufferTimeout(
setTimeout(() => {
onError("stalled");
}, 3000),
);
}
: undefined
}
onClick={
iOSCompatFullScreen
? () => setiOSCompatControls(!iOSCompatControls)