Stream in costmap from mediamtx.

src/Autonomy.tsx

@@ -12,33 +12,7 @@ import { AppNav, Footer } from "./AppNav.tsx";
 import { Container, Row, Col, Image, Card } from "react-bootstrap";
 import { atom, useAtomValue } from "jotai";
 import { atomWithQuery } from "jotai-tanstack-query";
-
-const costmapImageQuery = async () => {
-  const resp = await fetch("api/costmap_image");
-  if (!resp.ok) {
-    throw new Error("Network response was not ok");
-  }
-  const blob = await resp.blob();
-  return URL.createObjectURL(blob);
-};
-const costmapImageQueryAtom = atomWithQuery(() => ({
-  queryKey: ["costmap_image"],
-  queryFn: costmapImageQuery,
-  refetchInterval: 1000, // 1s
-}));
-const costmapImageAtom = atom((get) => {
-  const response = get(costmapImageQueryAtom);
-  if (response.isPending) {
-    return <p>"Loading..."</p>;
-  }
-  if (response.isError) {
-    return <p>"Error loading!"</p>;
-  }
-  const costmapStyle = {
-    minHeight: "65svb",
-  };
-  return <Image src={response.data} fluid style={costmapStyle} />;
-});
+import { WebRTCVideo } from "mediamtx-webrtc-react";
 
 const statusStringQuery = async () => {
   const resp = await fetch("api/status");
@@ -81,7 +55,6 @@ const latLongAtom = atom((get) => {
 });
 
 export function Autonomy() {
-  const costmapImage = useAtomValue(costmapImageAtom);
   const statusString = useAtomValue(statusStringAtom);
   const latLong = useAtomValue(latLongAtom);
 
@@ -91,7 +64,14 @@ export function Autonomy() {
       <Container className="vert-padded">
         <Card className="padded">
           <Row>
-            <Col lg={8}>{costmapImage}</Col>
+            <Col lg={8}>
+              <WebRTCVideo
+                url="http://localhost:8889/image/whep"
+                controls
+                autoPlay
+                style={{ width: "100%", maxWidth: "800px" }}
+              />
+            </Col>
             <Col lg={4}>
               <p>Status:</p>
               <pre>{statusString}</pre>