diff --git a/package-lock.json b/package-lock.json index fe0c4f7..596ad6e 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index e755050..3e1d850 100644 --- a/package.json +++ b/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", diff --git a/src/pages/OrgChart.tsx b/src/pages/OrgChart.tsx index 1269579..5225078 100644 --- a/src/pages/OrgChart.tsx +++ b/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) => { diff --git a/src/pages/home/homeBottom/which_video.tsx b/src/pages/home/homeBottom/which_video.tsx index ff741f8..8fd3e4a 100644 --- a/src/pages/home/homeBottom/which_video.tsx +++ b/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(false); @@ -15,7 +15,7 @@ const WhichVideo = (props) => { setIsModalOpen(true); let req = await homeStore.getVideoUrlList(); setDeviceList(req.EasyDarwin.Body.Devices); - }; + }; const getChannerList = async (id) => { let reqs = await homeStore.getChannerUrlList(id); setChannelList(reqs.EasyDarwin.Body.Channels); @@ -97,7 +97,7 @@ const WhichVideo = (props) => {
{ - + }
diff --git a/src/pages/home/home_video.tsx b/src/pages/home/home_video.tsx index c32bc73..03b7537 100644 --- a/src/pages/home/home_video.tsx +++ b/src/pages/home/home_video.tsx @@ -10,7 +10,7 @@ const HomeVideo = (props: Store) => { useEffect(() => { // 获取最新任务 homeStore.getNewTask().then((res) => { - setVideoUrl(res); + setVideoUrl(res); }); }, [homeStore]); return ( diff --git a/src/pages/home/video.tsx b/src/pages/home/video.tsx index 19c4061..543e720 100644 --- a/src/pages/home/video.tsx +++ b/src/pages/home/video.tsx @@ -1,59 +1,107 @@ -import { Store } from "antd/es/form/interface"; -import { useEffect, useRef } from "react"; -import videojs from "video.js"; -import "video.js/dist/video-js.css"; +// import { Store } from "antd/es/form/interface"; +// import { useEffect, useRef } from "react"; +// import videojs from "video.js"; +// import "video.js/dist/video-js.css"; -const Videos = (props: Store) => { - const { onReady } = props; - let videoRef = useRef(null); - let playerRef = useRef(null); // 使用 any 类型 - const videoJsOptions = { - autoplay: true, - controls: true, - responsive: true, - fluid: true, - sources: [ - { - src: "", - type: "application/x-mpegURL", - }, - ], - }; +// const Videos = (props: Store) => { +// const { onReady } = props; +// let videoRef = useRef(null); +// let playerRef = useRef(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 ( +// <> +//
+//
+//
+// +// ); +// }; + +// 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(null); + let player: flvjs.Player | null = null; + 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); + if (!props.url)return; + if (flvjs.isSupported()) { + const videoElement = videoRef.current; + if (videoElement) { + player = flvjs.createPlayer({ + type: 'mp4', + url: props.url, + }); + player.attachMediaElement(videoElement); + player.load(); + player.play(); + } } + return () => { - if (playerRef.current) { - playerRef.current.dispose(); - playerRef.current = null; + if (player) { + player.pause(); + player.unload(); + player.detachMediaElement(); + player.destroy(); + player = null; } }; - }, [videoRef, onReady, props.url]); + }, [props.url]); return ( - <> -
-
-
- +
+
); }; -export default Videos; +export default VideoPlayer; \ No newline at end of file diff --git a/src/store/home.ts b/src/store/home.ts index 45222d1..88d6b3d 100644 --- a/src/store/home.ts +++ b/src/store/home.ts @@ -84,7 +84,6 @@ class HomeStore extends BaseStore { }) return data; } catch (error) { - console.log(error) return false } } @@ -94,9 +93,8 @@ class HomeStore extends BaseStore { 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) diff --git a/src/util/config.ts b/src/util/config.ts index 1ffe3ec..366c296 100644 --- a/src/util/config.ts +++ b/src/util/config.ts @@ -1,7 +1,7 @@ class Config { - static baseUrl = "https://rw.quwanya.cn"; - static ws = "wss://rw.quwanya.cn/wsadmin?id=admin"; - static userStatic = "https://rw.quwanya.cn/uploads/user/"; + static baseUrl = "https://www.hswzct.cn:12016"; + static ws = "wss://www.hswzct.cn:12016/wsadmin?id=admin"; + static userStatic = "https://www.hswzct.cn:12016/uploads/user/"; static videoApi = "https://sprh.hswzct.cn:4443/"; // static videoApis = "https://sprh.hswzct.cn:4443"; // }