first commit

package-lock.json

@@ -48,6 +48,7 @@
         "eslint-webpack-plugin": "^3.1.1",
         "expose-loader": "^5.0.0",
         "file-loader": "^6.2.0",
+        "flv.js": "^1.6.2",
         "fs-extra": "^10.0.0",
         "html-webpack-plugin": "^5.5.0",
         "identity-obj-proxy": "^3.0.0",
@@ -9934,6 +9935,11 @@
         "es6-symbol": "^3.1.1"
       }
     },
+    "node_modules/es6-promise": {
+      "version": "4.2.8",
+      "resolved": "https://registry.npmmirror.com/es6-promise/-/es6-promise-4.2.8.tgz",
+      "integrity": "sha512-HJDGx5daxeIvxdBxvG2cb9g4tEvwIk3i8+nhX0yGrYmZUzbkdg8QbDevheDB8gd0//uPj4c1EQua8Q+MViT0/w=="
+    },
     "node_modules/es6-symbol": {
       "version": "3.1.4",
       "resolved": "https://registry.npmmirror.com/es6-symbol/-/es6-symbol-3.1.4.tgz",
@@ -11307,6 +11313,15 @@
         "readable-stream": "^2.3.6"
       }
     },
+    "node_modules/flv.js": {
+      "version": "1.6.2",
+      "resolved": "https://registry.npmmirror.com/flv.js/-/flv.js-1.6.2.tgz",
+      "integrity": "sha512-xre4gUbX1MPtgQRKj2pxJENp/RnaHaxYvy3YToVVCrSmAWUu85b9mug6pTXF6zakUjNP2lFWZ1rkSX7gxhB/2A==",
+      "dependencies": {
+        "es6-promise": "^4.2.8",
+        "webworkify-webpack": "^2.1.5"
+      }
+    },
     "node_modules/follow-redirects": {
       "version": "1.15.9",
       "resolved": "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.9.tgz",
@@ -33173,6 +33188,11 @@
         "node": ">=0.8.0"
       }
     },
+    "node_modules/webworkify-webpack": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmmirror.com/webworkify-webpack/-/webworkify-webpack-2.1.5.tgz",
+      "integrity": "sha512-2akF8FIyUvbiBBdD+RoHpoTbHMQF2HwjcxfDvgztAX5YwbZNyrtfUMgvfgFVsgDhDPVTlkbb5vyasqDHfIDPQw=="
+    },
     "node_modules/whatwg-encoding": {
       "version": "1.0.5",
       "resolved": "https://registry.npmmirror.com/whatwg-encoding/-/whatwg-encoding-1.0.5.tgz",
@@ -41141,6 +41161,11 @@
         "es6-symbol": "^3.1.1"
       }
     },
+    "es6-promise": {
+      "version": "4.2.8",
+      "resolved": "https://registry.npmmirror.com/es6-promise/-/es6-promise-4.2.8.tgz",
+      "integrity": "sha512-HJDGx5daxeIvxdBxvG2cb9g4tEvwIk3i8+nhX0yGrYmZUzbkdg8QbDevheDB8gd0//uPj4c1EQua8Q+MViT0/w=="
+    },
     "es6-symbol": {
       "version": "3.1.4",
       "resolved": "https://registry.npmmirror.com/es6-symbol/-/es6-symbol-3.1.4.tgz",
@@ -42169,6 +42194,15 @@
         "readable-stream": "^2.3.6"
       }
     },
+    "flv.js": {
+      "version": "1.6.2",
+      "resolved": "https://registry.npmmirror.com/flv.js/-/flv.js-1.6.2.tgz",
+      "integrity": "sha512-xre4gUbX1MPtgQRKj2pxJENp/RnaHaxYvy3YToVVCrSmAWUu85b9mug6pTXF6zakUjNP2lFWZ1rkSX7gxhB/2A==",
+      "requires": {
+        "es6-promise": "^4.2.8",
+        "webworkify-webpack": "^2.1.5"
+      }
+    },
     "follow-redirects": {
       "version": "1.15.9",
       "resolved": "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.9.tgz",
@@ -58535,6 +58569,11 @@
       "resolved": "https://registry.npmmirror.com/websocket-extensions/-/websocket-extensions-0.1.4.tgz",
       "integrity": "sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg=="
     },
+    "webworkify-webpack": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmmirror.com/webworkify-webpack/-/webworkify-webpack-2.1.5.tgz",
+      "integrity": "sha512-2akF8FIyUvbiBBdD+RoHpoTbHMQF2HwjcxfDvgztAX5YwbZNyrtfUMgvfgFVsgDhDPVTlkbb5vyasqDHfIDPQw=="
+    },
     "whatwg-encoding": {
       "version": "1.0.5",
       "resolved": "https://registry.npmmirror.com/whatwg-encoding/-/whatwg-encoding-1.0.5.tgz",

package.json

@@ -43,6 +43,7 @@
     "eslint-webpack-plugin": "^3.1.1",
     "expose-loader": "^5.0.0",
     "file-loader": "^6.2.0",
+    "flv.js": "^1.6.2",
     "fs-extra": "^10.0.0",
     "html-webpack-plugin": "^5.5.0",
     "identity-obj-proxy": "^3.0.0",

src/pages/OrgChart.tsx

@@ -6,7 +6,6 @@ import { orgData } from "./org_config";
 import PoverDetail from "./poverDetail";
 const OrgChartSelf = (props: Store) => {
   const { depStore } = props;
-  const [data, setOrgData] = useState([]);
   const [detail, setDetail] = useState(false);
   useEffect(() => {
     depStore.getOrg().then((res) => {

src/pages/home/homeBottom/which_video.tsx

@@ -1,8 +1,8 @@
 import { Modal } from "antd";
 import { inject, observer } from "mobx-react";
 import { useState } from "react";
-import Videos from "@/pages/home/video";
 import Config from "@/util/config";
+import VideoPlayer from "@/pages/home/video";
 const WhichVideo = (props) => {
   const { homeStore } = props;
   const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
@@ -97,7 +97,7 @@ const WhichVideo = (props) => {
             </div>
             <div className="video" style={{ width: "100%", height: "400px" }}>
               {
-                <Videos url={videoUrl} />
+                <VideoPlayer url={videoUrl} />
               }
             </div>
           </div>

src/pages/home/video.tsx

@@ -1,59 +1,107 @@
-import { Store } from "antd/es/form/interface";
+// import { Store } from "antd/es/form/interface";
-import { useEffect, useRef } from "react";
+// import { useEffect, useRef } from "react";
-import videojs from "video.js";
+// import videojs from "video.js";
-import "video.js/dist/video-js.css";
+// import "video.js/dist/video-js.css";
+
+// const Videos = (props: Store) => {
+//   const { onReady } = props;
+//   let videoRef = useRef<HTMLDivElement>(null);
+//   let playerRef = useRef<any>(null); // 使用 any 类型
+//   const videoJsOptions = {
+//     autoplay: true,
+//     controls: true,
+//     responsive: true,
+//     fluid: true,
+//     sources: [
+//       {
+//         src: "",
+//         type: "application/x-mpegURL",
+//       },
+//     ],
+//   };
+//   useEffect(() => {
+//     if (!props.url) return;
+//     videoJsOptions.sources[0].src = props.url;
+//     if (!playerRef.current && videoRef.current) {
+//       const videoElement = document.createElement(`video-js`);
+//       videoElement.classList.add(`vjs-big-play-centered${props.url}`);
+//       videoRef.current.appendChild(videoElement);
+//       const player = (playerRef.current = videojs(
+//         videoElement,
+//         videoJsOptions,
+//         () => {
+//           videojs.log("player is ready");
+//           onReady && onReady(player);
+//         }
+//       ));
+//     } else {
+//       const player = playerRef.current;
+//       player?.autoplay(videoJsOptions?.autoplay);
+//       player.src(videoJsOptions?.sources);
+//     }
+//     return () => {
+//       if (playerRef.current) {
+//         playerRef.current.dispose();
+//         playerRef.current = null;
+//       }
+//     };
+//   }, [videoRef, onReady, props.url]);
+
+//   return (
+//     <>
+//       <div data-vjs-player style={{ width: "100%", height: "100%" }}>
+//         <div ref={videoRef} style={{ width: "100%", height: "100%" }} />
+//       </div>
+//     </>
+//   );
+// };
+
+// export default Videos;
+
+import React, { useEffect, useRef } from 'react';
+import flvjs from 'flv.js';
+import { Store } from 'antd/es/form/interface';
+
+const VideoPlayer = (props: Store) => {
+  const videoRef = useRef<HTMLVideoElement | null>(null);
+  let player: flvjs.Player | null = null;
   
-const Videos = (props: Store) => {
-  const { onReady } = props;
-  let videoRef = useRef<HTMLDivElement>(null);
-  let playerRef = useRef<any>(null); // 使用 any 类型
-  const videoJsOptions = {
-    autoplay: true,
-    controls: true,
-    responsive: true,
-    fluid: true,
-    sources: [
-      {
-        src: "",
-        type: "application/x-mpegURL",
-      },
-    ],
-  };
   useEffect(() => {
-    if (!props.url) return;
+    if (!props.url)return;
-    videoJsOptions.sources[0].src = props.url;
+    if (flvjs.isSupported()) {
-    if (!playerRef.current && videoRef.current) {
+      const videoElement = videoRef.current;
-      const videoElement = document.createElement(`video-js`);
+      if (videoElement) {
-      videoElement.classList.add(`vjs-big-play-centered${props.url}`);
+        player = flvjs.createPlayer({
-      videoRef.current.appendChild(videoElement);
+          type: 'mp4',
-      const player = (playerRef.current = videojs(
+          url: props.url,
-        videoElement,
+        });
-        videoJsOptions,
+        player.attachMediaElement(videoElement);
-        () => {
+        player.load();
-          videojs.log("player is ready");
+        player.play();
-          onReady && onReady(player);
       }
-      ));
-    } else {
-      const player = playerRef.current;
-      player?.autoplay(videoJsOptions?.autoplay);
-      player.src(videoJsOptions?.sources);
     }
+
     return () => {
-      if (playerRef.current) {
+      if (player) {
-        playerRef.current.dispose();
+        player.pause();
-        playerRef.current = null;
+        player.unload();
+        player.detachMediaElement();
+        player.destroy();
+        player = null;
       }
     };
-  }, [videoRef, onReady, props.url]);
+  }, [props.url]);
 
   return (
-    <>
+    <div>
-      <div data-vjs-player style={{ width: "100%", height: "100%" }}>
+      <video
-        <div ref={videoRef} style={{ width: "100%", height: "100%" }} />
+        ref={videoRef}
+        style={{ width: '100%', height: '500px' }}
+        controls
+        autoPlay
+      />
     </div>
-    </>
   );
 };
 
-export default Videos;
+export default VideoPlayer;

src/store/home.ts

@@ -84,7 +84,6 @@ class HomeStore extends BaseStore<TagDataType> {
             })
             return data;
         } catch (error) {
-            console.log(error)
             return false
         }
     }
@@ -94,9 +93,8 @@ class HomeStore extends BaseStore<TagDataType> {
             let data = await baseHttp.gets(HomeConfig.channelstream, {
                 device: deviceId,
                 channel: channel,
-                protocol: "HLS"
+                protocol: "fmp4"
             })
-            console.log(data)
             return data;
         } catch (error) {
             console.log(error)

src/util/config.ts

@@ -1,7 +1,7 @@
 class Config {
-    static baseUrl = "https://rw.quwanya.cn";
+    static baseUrl = "https://www.hswzct.cn:12016";
-    static ws = "wss://rw.quwanya.cn/wsadmin?id=admin";
+    static ws = "wss://www.hswzct.cn:12016/wsadmin?id=admin";
-    static userStatic = "https://rw.quwanya.cn/uploads/user/";
+    static userStatic = "https://www.hswzct.cn:12016/uploads/user/";
     static videoApi = "https://sprh.hswzct.cn:4443/"; // 
     static videoApis = "https://sprh.hswzct.cn:4443"; // 
 }