Added protobuf support

README.md

@@ -1,6 +1,6 @@
 # H264 render extension - based on custom-image-extension
 
-This extension is based on [WebCodecs](https://w3c.github.io/webcodecs/) and a WebGL renderer.
+This extension is just forked repo of https://github.com/codewithpassion/foxglove-studio-h264-extension with protobuf support.
 It accepts H264 NALUs - noteably IDR frames, SPS, PPS, and NDR frames - and pushes them through WebCodecs to get images.
 The images are then rendered on a canvas as fast as they are produced from the _WebCodec_.
 

package.json

@@ -27,7 +27,7 @@
     "@types/react-dom": "17.0.2",
     "@typescript-eslint/eslint-plugin": "5.30.6",
     "@typescript-eslint/parser": "5.30.6",
-    "create-foxglove-extension": "0.5.1",
+    "create-foxglove-extension": "0.8.4",
     "eslint": "8.19.0",
     "eslint-config-prettier": "8.5.0",
     "eslint-plugin-es": "4.1.0",
@@ -52,16 +52,18 @@
     "@types/offscreencanvas": "^2019.7.0",
     "immer": "^9.0.15",
     "lodash": "^4.17.21",
-    "node-video-lib": "patch:node-video-lib@npm:2.2.1#./patches/node-video-lib-async.patch",
+    "node-video-lib": "file:node-video-lib@npm:2.2.1#./patches/node-video-lib-async.patch",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "usehooks-ts": "^2.9.1",
-    "worker-loader": "^3.0.8"
+    "worker-loader": "^3.0.8",
+    "webpack": "5.75.0",
+    "buffer": "6.0.3"
   },
   "resolutions": {
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "@types/react": "17.0.2",
     "@types/react-dom": "17.0.2"
   }
-}
+}

src/H264WebCodecVideo.tsx

@@ -3,6 +3,7 @@ import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useSta
 
 import Worker from "./workers/Render.worker.ts";
 import { InitRenderEvent, RenderEvent, WorkerEvent } from "./workers/RenderEvents";
+import { Buffer } from "buffer";
 
 export type H264WebCodecVideoProps = {
   frameData: Uint8Array | undefined;
@@ -52,7 +53,7 @@ const H264WebCodecVideo: React.FC<H264WebCodecVideoProps> = ({ frameData, render
     if (worker && frameData) {
       // we need to copy the data buffer as it will be transfered to the background worker.
       // Otherwise we risk exceptions in other parts of studio.
-      const buffer = copyArray(frameData.buffer);
+      const buffer = copyArray(Buffer.from(frameData));
       worker.postMessage(new RenderEvent(buffer), [buffer]);
     }
   }, [frameData, worker]);

src/Settings.tsx

@@ -23,7 +23,7 @@ const useH264State = (context: PanelExtensionContext): UseH264StateType => {
 
   // Filter all of our topics to find the ones with a CompresssedImage message.
   const imageTopics = useMemo(
-    () => (topics ?? []).filter((topic) => topic.datatype === "sensor_msgs/CompressedImage"),
+    () => (topics ?? []).filter((topic) => topic.datatype === "sensor_msgs/CompressedImage" || topic.datatype === "foxglove.CompressedImage"),
     [topics],
   );