Spartan/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2024-11-22 08:57:20 -06:00
Code Issues Packages Projects Releases Wiki Activity

Add exports message and default to webrtc on < iOS 17.1 (#12281)

Browse Source
This commit is contained in:
Josh Hawkins 2024-07-03 08:44:25 -05:00 committed by GitHub
parent 784b701cc5
commit 1f4ca32e8c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 45 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -41,8 +41,7 @@ export default function BirdseyeLivePlayer({
} else {
player = (
<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.
iOS 17.1 or greater is required for this live stream type.
</div>
);
}

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

@ -161,8 +161,7 @@ export default function LivePlayer({
} else {
player = (
<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.
iOS 17.1 or greater is required for this live stream type.
</div>
);
}

26
web/src/pages/Exports.tsx
View File

@ -15,6 +15,7 @@ import { Input } from "@/components/ui/input";
import { DeleteClipType, Export } from "@/types/export";
import axios from "axios";
import { useCallback, useEffect, useMemo, useState } from "react";
import { LuFolderX } from "react-icons/lu";
import useSWR from "swr";
function Exports() {
@ -128,17 +129,19 @@ function Exports() {
</DialogContent>
</Dialog>
<div className="flex w-full items-center justify-center p-2">
<Input
className="w-full bg-muted md:w-1/3"
placeholder="Search"
value={search}
onChange={(e) => setSearch(e.target.value)}
/>
</div>
{exports && (
<div className="flex w-full items-center justify-center p-2">
<Input
className="w-full bg-muted md:w-1/3"
placeholder="Search"
value={search}
onChange={(e) => setSearch(e.target.value)}
/>
</div>
)}
<div className="w-full overflow-hidden">
{exports && filteredExports && (
{exports && filteredExports && filteredExports.length > 0 ? (
<div className="scrollbar-container grid size-full gap-2 overflow-y-auto sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
{Object.values(exports).map((item) => (
<ExportCard
@ -155,6 +158,11 @@ function Exports() {
/>
))}
</div>
) : (
<div className="absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 flex-col items-center justify-center text-center">
<LuFolderX className="size-16" />
No exports found
</div>
)}
</div>
</div>

10
web/src/views/live/DraggableGridLayout.tsx
View File

@ -81,6 +81,10 @@ export default function DraggableGridLayout({
useEffect(() => {
if (!cameras) return;
const mseSupported =
"MediaSource" in window || "ManagedMediaSource" in window;
const newPreferredLiveModes = cameras.reduce(
(acc, camera) => {
const isRestreamed =
@ -89,7 +93,11 @@ export default function DraggableGridLayout({
camera.live.stream_name,
);
acc[camera.name] = isRestreamed ? "mse" : "jsmpeg";
if (!mseSupported) {
acc[camera.name] = isRestreamed ? "webrtc" : "jsmpeg";
} else {
acc[camera.name] = isRestreamed ? "mse" : "jsmpeg";
}
return acc;
},
{} as { [key: string]: LivePlayerMode },

5
web/src/views/live/LiveBirdseyeView.tsx
View File

@ -96,7 +96,10 @@ export default function LiveBirdseyeView({
return "jsmpeg";
}
if (isSafari) {
if (
isSafari ||
!("MediaSource" in window || "ManagedMediaSource" in window)
) {
return "webrtc";
}

4
web/src/views/live/LiveCameraView.tsx
View File

@ -222,6 +222,10 @@ export default function LiveCameraView({
return "jsmpeg";
}
if (!("MediaSource" in window || "ManagedMediaSource" in window)) {
return "webrtc";
}
return "mse";
}, [lowBandwidth, mic, webRTC, isRestreamed]);

10
web/src/views/live/LiveDashboardView.tsx
View File

@ -112,6 +112,10 @@ export default function LiveDashboardView({
useEffect(() => {
if (!cameras) return;
const mseSupported =
"MediaSource" in window || "ManagedMediaSource" in window;
const newPreferredLiveModes = cameras.reduce(
(acc, camera) => {
const isRestreamed =
@ -120,7 +124,11 @@ export default function LiveDashboardView({
camera.live.stream_name,
);
acc[camera.name] = isRestreamed ? "mse" : "jsmpeg";
if (!mseSupported) {
acc[camera.name] = isRestreamed ? "webrtc" : "jsmpeg";
} else {
acc[camera.name] = isRestreamed ? "mse" : "jsmpeg";
}
return acc;
},
{} as { [key: string]: LivePlayerMode },