update videos

src/components/Common/VideoMonitor/index.jsx

@@ -6,8 +6,32 @@ function VideoMonitor(props) {
     <div className="video-monitor">
       <h2>泡界线监控</h2>
       <div className="video-container">
-        <div></div>
-        <div></div>
+        <div>
+          {/* <video muted autoPlay loop src="https://storage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"></video> */}
+          <img
+            style={{
+              width: "100%",
+              height: "100%",
+              display: "block",
+              margin: "auto",
+              backgrounColor: "hsl(0, 0%, 25%)",
+            }}
+            src="http://10.70.180.10:8001/video_feed"
+          ></img>
+        </div>
+        <div>
+          {/* <video muted autoPlay loop src="https://storage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4"></video> */}
+          <img
+            style={{
+              width: "100%",
+              height: "100%",
+              display: "block",
+              margin: "auto",
+              backgrounColor: "hsl(0, 0%, 25%)",
+            }}
+            src="http://10.70.180.10:8000/video_feed"
+          ></img>
+        </div>
       </div>
     </div>
   );

src/components/Common/VideoMonitor/video-monitor.css

@@ -21,6 +21,7 @@
   display: flex;
   gap: 8px;
   flex: 1;
+  max-height: 150px;
 }
 
 .video-container > div {
@@ -28,3 +29,7 @@
   height: 100%;
   background: #ccc1;
 }
+
+.video-container > div > video {
+  width: 100%;
+}