// import cls from "./index.module.css";
import "./video-monitor.css";

function VideoMonitor(props) {
  return (
    <div className="video-monitor">
      <h2>泡界线监控</h2>
      <div className="video-container">
        <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>
  );
}

export default VideoMonitor;