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

birdseye mse

Browse Source
This commit is contained in:
Josh Hawkins 2024-01-03 08:12:27 -06:00
parent 53292d9d0c
commit abdf30dc47
3 changed files with 22 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
web/src/components/player/BirdseyeLivePlayer.tsx
View File

@ -2,6 +2,7 @@ import WebRtcPlayer from "./WebRTCPlayer";
import { BirdseyeConfig } from "@/types/frigateConfig"; import { BirdseyeConfig } from "@/types/frigateConfig";
import ActivityIndicator from "../ui/activity-indicator"; import ActivityIndicator from "../ui/activity-indicator";
import JSMpegPlayer from "./JSMpegPlayer"; import JSMpegPlayer from "./JSMpegPlayer";
import MSEPlayer from "./MsePlayer";
type LivePlayerProps = { type LivePlayerProps = {
birdseyeConfig: BirdseyeConfig; birdseyeConfig: BirdseyeConfig;
@ -19,7 +20,20 @@ export default function BirdseyeLivePlayer({
</div> </div>
); );
} else if (liveMode == "mse") { } else if (liveMode == "mse") {
return <div className="max-w-5xl">Not yet implemented</div>; if ("MediaSource" in window || "ManagedMediaSource" in window) {
return (
<div className="max-w-5xl">
<MSEPlayer camera="birdseye" />
</div>
);
} else {
return (
<div className="w-5xl text-center text-sm">
MSE is only supported on iOS 17.1+. You'll need to update if available
or use jsmpeg / webRTC streams. See the docs for more info.
</div>
);
}
} else if (liveMode == "jsmpeg") { } else if (liveMode == "jsmpeg") {
return ( return (
<div className={`max-w-[${birdseyeConfig.width}px]`}> <div className={`max-w-[${birdseyeConfig.width}px]`}>

10
web/src/components/player/LivePlayer.tsx
View File

@ -67,15 +67,7 @@ export default function LivePlayer({
if ("MediaSource" in window || "ManagedMediaSource" in window) { if ("MediaSource" in window || "ManagedMediaSource" in window) {
return ( return (
<div className="max-w-5xl"> <div className="max-w-5xl">
<MSEPlayer <MSEPlayer camera={cameraConfig.live.stream_name} />
src={
new URL(
`${baseUrl.replace(/^http/, "ws")}live/webrtc/api/ws?src=${
cameraConfig.live.stream_name
}`
)
}
/>
</div> </div>
); );
} else { } else {

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

@ -1,10 +1,11 @@
import { baseUrl } from "@/api/baseUrl";
import { useCallback, useEffect, useMemo, useRef, useState } from "react"; import { useCallback, useEffect, useMemo, useRef, useState } from "react";
type MSEPlayerProps = { type MSEPlayerProps = {
src: URL; camera: string;
}; };
function MSEPlayer({ src }: MSEPlayerProps) { function MSEPlayer({ camera }: MSEPlayerProps) {
let connectTS: number = 0; let connectTS: number = 0;
const RECONNECT_TIMEOUT: number = 30000; const RECONNECT_TIMEOUT: number = 30000;
@ -33,16 +34,9 @@ function MSEPlayer({ src }: MSEPlayerProps) {
const msRef = useRef<MediaSource | null>(null); const msRef = useRef<MediaSource | null>(null);
const wsURL = useMemo(() => { const wsURL = useMemo(() => {
let updatedSrc = src.toString(); console.log(camera);
return `${baseUrl.replace(/^http/, "ws")}live/webrtc/api/ws?src=${camera}`;
if (updatedSrc.startsWith("http")) { }, [camera]);
updatedSrc = `ws${updatedSrc.substring(4)}`;
} else if (updatedSrc.startsWith("/")) {
updatedSrc = `ws${location.origin.substring(4)}${src}`;
}
return updatedSrc;
}, [src]);
const play = () => { const play = () => {
const currentVideo = videoRef.current; const currentVideo = videoRef.current;