Live video on the AT Protocol
stream.place
1import { usePlayerStore } from "@streamplace/components";
2import { useCallback } from "react";
3import { captureVideoFrame } from "utils/videoCapture";
4
5/**
6 * Hook to capture a frame from the video element
7 *
8 * This hook provides a function to capture a frame from the video element
9 * that was stored in the VideoElementContext.
10 *
11 * @returns A function that captures a frame from the video element
12 */
13export function useCaptureVideoFrame() {
14 const ref = usePlayerStore((state) => state.videoRef);
15
16 // if ref is a function return null
17 if (typeof ref === "function") {
18 console.warn(
19 "Video ref is a function (native player), cannot capture frame",
20 );
21 return null;
22 }
23
24 const videoElement = ref?.current;
25
26 const captureFrame = useCallback(
27 async (maxWidth = 1280, quality = 0.85): Promise<Blob | null> => {
28 if (!videoElement) {
29 console.warn("Video element not available or not on web platform");
30 return null;
31 }
32
33 try {
34 return await captureVideoFrame(videoElement, maxWidth, quality);
35 } catch (error) {
36 console.error("Error capturing frame:", error);
37 return null;
38 }
39 },
40 [videoElement],
41 );
42
43 return captureFrame;
44}