mirror of
				https://github.com/blakeblackshear/frigate.git
				synced 2025-10-27 10:52:11 +01:00 
			
		
		
		
	Add exports message and default to webrtc on < iOS 17.1 (#12281)
This commit is contained in:
		
							parent
							
								
									784b701cc5
								
							
						
					
					
						commit
						1f4ca32e8c
					
				@ -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>
 | 
			
		||||
      );
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
@ -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>
 | 
			
		||||
      );
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
@ -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,6 +129,7 @@ function Exports() {
 | 
			
		||||
        </DialogContent>
 | 
			
		||||
      </Dialog>
 | 
			
		||||
 | 
			
		||||
      {exports && (
 | 
			
		||||
        <div className="flex w-full items-center justify-center p-2">
 | 
			
		||||
          <Input
 | 
			
		||||
            className="w-full bg-muted md:w-1/3"
 | 
			
		||||
@ -136,9 +138,10 @@ function Exports() {
 | 
			
		||||
            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>
 | 
			
		||||
 | 
			
		||||
@ -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,
 | 
			
		||||
          );
 | 
			
		||||
 | 
			
		||||
        if (!mseSupported) {
 | 
			
		||||
          acc[camera.name] = isRestreamed ? "webrtc" : "jsmpeg";
 | 
			
		||||
        } else {
 | 
			
		||||
          acc[camera.name] = isRestreamed ? "mse" : "jsmpeg";
 | 
			
		||||
        }
 | 
			
		||||
        return acc;
 | 
			
		||||
      },
 | 
			
		||||
      {} as { [key: string]: LivePlayerMode },
 | 
			
		||||
 | 
			
		||||
@ -96,7 +96,10 @@ export default function LiveBirdseyeView({
 | 
			
		||||
      return "jsmpeg";
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    if (isSafari) {
 | 
			
		||||
    if (
 | 
			
		||||
      isSafari ||
 | 
			
		||||
      !("MediaSource" in window || "ManagedMediaSource" in window)
 | 
			
		||||
    ) {
 | 
			
		||||
      return "webrtc";
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
@ -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]);
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
@ -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,
 | 
			
		||||
          );
 | 
			
		||||
 | 
			
		||||
        if (!mseSupported) {
 | 
			
		||||
          acc[camera.name] = isRestreamed ? "webrtc" : "jsmpeg";
 | 
			
		||||
        } else {
 | 
			
		||||
          acc[camera.name] = isRestreamed ? "mse" : "jsmpeg";
 | 
			
		||||
        }
 | 
			
		||||
        return acc;
 | 
			
		||||
      },
 | 
			
		||||
      {} as { [key: string]: LivePlayerMode },
 | 
			
		||||
 | 
			
		||||
		Loading…
	
		Reference in New Issue
	
	Block a user