Allow recording both h264 and jpeg

foxglove · Nov 16, 2023 · 0381b16 · 0381b16
1 parent 3180670
commit 0381b16
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 25 deletions.
diff --git a/website/src/components/McapRecordingDemo/McapRecordingDemo.tsx b/website/src/components/McapRecordingDemo/McapRecordingDemo.tsx
@@ -188,12 +188,10 @@ export function McapRecordingDemo(): JSX.Element {
     };
   }, [addPoseMessage, recording, recordOrientation]);
 
+  const enableCamera = recordH264 || recordJpeg;
   useEffect(() => {
     const videoContainer = videoContainerRef.current;
-    if (!videoContainer) {
-      return;
-    }
-    if (!recordH264 && !recordJpeg) {
+    if (!videoContainer || !enableCamera) {
       return;
     }
 
@@ -223,7 +221,7 @@ export function McapRecordingDemo(): JSX.Element {
       setVideoStarted(false);
       setVideoError(undefined);
     };
-  }, [recordH264, recordJpeg]);
+  }, [enableCamera]);
 
   useEffect(() => {
     const video = videoRef.current;
@@ -236,7 +234,8 @@ export function McapRecordingDemo(): JSX.Element {
 
     const stopCapture = startVideoCapture({
       video,
-      compression: recordH264 ? "h264" : "jpeg",
+      enableH264: recordH264,
+      enableJpeg: recordJpeg,
       frameDurationSec: 1 / 30,
       onJpegFrame: (blob) => {
         addJpegFrame(blob);
@@ -338,9 +337,6 @@ export function McapRecordingDemo(): JSX.Element {
                 checked={recordH264}
                 onChange={(event) => {
                   setRecordH264(event.target.checked);
-                  if (event.target.checked) {
-                    setRecordJpeg(false);
-                  }
                 }}
               />
               Camera (H.264)
@@ -352,9 +348,6 @@ export function McapRecordingDemo(): JSX.Element {
               checked={recordJpeg}
               onChange={(event) => {
                 setRecordJpeg(event.target.checked);
-                if (event.target.checked) {
-                  setRecordH264(false);
-                }
               }}
             />
             Camera (JPEG)

diff --git a/website/src/components/McapRecordingDemo/videoCapture.ts b/website/src/components/McapRecordingDemo/videoCapture.ts
@@ -67,7 +67,8 @@ export type H264Frame = {
 };
 
 type VideoCaptureParams = {
-  compression: "h264" | "jpeg";
+  enableH264: boolean;
+  enableJpeg: boolean;
   /** Video element to capture */
   video: HTMLVideoElement;
   /** Frame interval in seconds */
@@ -247,20 +248,24 @@ async function startVideoCaptureAsync(
 ) {
   const {
     video,
-    compression,
+    enableH264,
+    enableJpeg,
     onJpegFrame,
     onH264Frame,
     onError,
     frameDurationSec,
   } = params;
+  if (!enableH264 && !enableJpeg) {
+    throw new Error("At least one of H.264 or JPEG encoding must be enabled");
+  }
   const canvas = document.createElement("canvas");
   canvas.width = video.videoWidth;
   canvas.height = video.videoHeight;
   const ctx = canvas.getContext("2d");
 
   let encoder: VideoEncoder | undefined;
   const framePool: ArrayBuffer[] = [];
-  if (compression === "h264") {
+  if (enableH264) {
     try {
       const result = await selectSupportedVideoEncoderConfig({
         width: video.videoWidth,
@@ -277,9 +282,6 @@ async function startVideoCaptureAsync(
       }
       encoder = new VideoEncoder({
         output: (chunk) => {
-          if (signal.aborted) {
-            return;
-          }
           let buffer = framePool.pop();
           if (!buffer || buffer.byteLength < chunk.byteLength) {
             buffer = new ArrayBuffer(chunk.byteLength);
@@ -311,19 +313,20 @@ async function startVideoCaptureAsync(
   const keyframeInterval = 2000;
   let lastKeyframeTime: number | undefined;
 
-  let processingFrame = false;
+  let processingH264 = false;
+  let processingJpeg = false;
   const start = performance.now();
   const interval = setInterval(() => {
-    if (processingFrame) {
+    if (processingH264 || processingJpeg) {
       // last frame is not yet complete, skip frame
       return;
     }
-    processingFrame = true;
     if (encoder) {
+      processingH264 = true;
       encoder.addEventListener(
         "dequeue",
         () => {
-          processingFrame = false;
+          processingH264 = false;
         },
         { once: true },
       );
@@ -342,12 +345,15 @@ async function startVideoCaptureAsync(
       }
       encoder.encode(frame, encodeOptions);
       frame.close();
-    } else {
+    }
+
+    if (enableJpeg) {
+      processingJpeg = true;
       ctx?.drawImage(video, 0, 0);
       canvas.toBlob(
         (blob) => {
-          processingFrame = false;
-          if (blob && !signal.aborted) {
+          processingJpeg = false;
+          if (blob) {
             onJpegFrame(blob);
           }
         },