flv 播放国标摄像头

code/VideoAccess-VCMP/web/client/index.html

@@ -5,10 +5,11 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />
 
-    <meta content="upgrade-insecure-requests" http-equiv="Content-Security-Policy">  
+    <!-- <meta content="upgrade-insecure-requests" http-equiv="Content-Security-Policy">   -->
 
     <link rel="shortcut icon" href="/assets/images/favicon.ico">
     <script src="/assets/js/jessibuca/jessibuca.js"></script>
+    <script src="/assets/js/flv.min.js"></script>
     <script src="https://lf1-cdn-tos.bytegoofy.com/obj/iconpark/icons_14797_10.b43556420cacd0119dedf94deff663bb.js"></script>
 </head>
 

code/VideoAccess-VCMP/web/client/src/components/videoPlayer/videoPlay.jsx

@@ -9,7 +9,7 @@ import VideoHeader from './voiceHeader'
 import VideoOperation from './videoOperation'
 import './videoPlay.less';
 import EZUIKit, { log } from 'ezuikit-js'
-import { done } from "nprogress";
+import flvjs from 'flv.js'
 
 const timeFormat = 'YYYY-MM-DD HH:mm:ss'
 const yingshiUrl = 'https://open.ys7.com/ezopen/h5/iframe'
@@ -26,7 +26,7 @@ const VideoPlay = ({ dispatch, actions,
    global,
    videoStyle,
    changeData,
-   videoObj,
+   // videoObj,
    sizeWh,
    slideDown, //视频下方操作是否滑动
    IsSize, //是否按照16:9的比例播放
@@ -53,23 +53,22 @@ const VideoPlay = ({ dispatch, actions,
    //     replayUrl: 'ezopen://open.ys7.com/G56384814/1.hd.local.rec',
    // },
 
-   // videoObj = {
+   videoObj = {
-   //    type: 'cascade',
+      type: 'cascade',
-   //    audio: false,
+      audio: false,
-   //    cloudControl: true,
+      cloudControl: true,
-   //    serialNo: '34020000001310000001', // 设备序列号 必须
+      serialNo: '34020000001310000001', // 设备序列号 必须
-   //    topSerialNo: '34020000001320000001', // 设备顶级序列号 必须
+      topSerialNo: '34020000001320000001', // 设备顶级序列号 必须
-   //    playUrlSd: 'wss://221.230.55.27:8082/jessica/34020000001320000001/34020000001310000001', // 必须
+      playUrlSd: 'wss://221.230.55.27:8082/jessica/34020000001320000001/34020000001310000001', // 必须
-   //    // playUrlHd: 'ezopen://open.ys7.com/G75922040/1.hd.live',
+      // playUrlHd: 'ezopen://open.ys7.com/G75922040/1.hd.live',
-   //    // replayUrl: 'ezopen://open.ys7.com/G75922040/1.rec',
+      // replayUrl: 'ezopen://open.ys7.com/G75922040/1.rec',
-   // },
+   },
 
    //
    iotVideoServer,
    iotVideoPlayServer,
    local, //是否本地调用视频
 }) => {
-   // console.log('1754', videoObj);
    if (videoObj.type == 'yingshi') {
       videoObj = {
          ...videoObj,
@@ -119,7 +118,7 @@ const VideoPlay = ({ dispatch, actions,
    const playState = useRef(false)  //播放状态
    const yingshiPlayer = useRef(null)
    const jessibucas = useRef(null)
-
+   const flvPlayer = useRef()
 
    useEffect(() => {
       setRoll(false)
@@ -132,7 +131,6 @@ const VideoPlay = ({ dispatch, actions,
       if (disappear || !videoMask) {
          let duration = moment.duration(videoAfter?.diff(videoFront))._data.milliseconds;
          setTimeout(() => {
-            // console.log(yingshiPlayer.current);
             if (disappear || duration > 2000) {
                setVideoMask(true)
                dispatch(openness.getErrorCode(videoObj.videoToken ? { status: numbers, platform: videoObj.type, token: videoObj.videoToken } : { status: numbers, platform: videoObj.type })).then((res) => {
@@ -303,17 +301,26 @@ const VideoPlay = ({ dispatch, actions,
       //     window.addEventListener('resize', resize_);  //只要窗口殴大小发生像素变化就会触发
       // }
 
+      document.addEventListener("visibilitychange", function () {
+         const buffered = flvPlayer.current.buffered.end(0) - 0.1
+         if (buffered - flvPlayer.current.currentTime > 1) {
+            flvPlayer.current.currentTime = buffered
+         }
+      })
+
       return () => {
          if (jessibucas.current) {
             jessibucas.current.destroy()
-            // console.log(1111111111111111111111);
+            const bye = request.get(`${iotVideoServer}/api/gb28181/bye?id=${videoObj.topSerialNo}&channel=${videoObj.serialNo}`).then(v => {
-            const bye = request.get(`${iotVideoServer}/api/gb28181/bye?id=${videoObj.topSerialNo}&channel=${videoObj.serialNo}`).then(v=>{
+
-               // console.log(1231313123);
             })
          }
          if (yingshiPlayer.current && videoObj.type == 'yingshi') {
             yingshiPlayer.current.stop()
          }
+         if (flvPlayer && flvPlayer.current) {
+            flvPlayer.current.destroy();
+         }
       }
    }, [])
 
@@ -372,7 +379,6 @@ const VideoPlay = ({ dispatch, actions,
 
    const createPlay = async () => {
       if (videoObj.type != 'yingshi') {
-         // console.log(videoObj,iotVideoServer);
          try {
             // const inviteRes = await IotVideoServerRequest.get(VideoServeApi.invite, {
             //    id: '36011200002002021114',
@@ -385,36 +391,55 @@ const VideoPlay = ({ dispatch, actions,
             videoFront = new moment(); //验证前时间
             const inviteRes_ = await request.get(`${iotVideoServer}/api/gb28181/invite?id=${videoObj.topSerialNo}&channel=${videoObj.serialNo}`).then((res) => {
                videoAfter = new moment();  //验证后时间
-               console.log(11111, res)
             })
          } catch (error) {
-            console.log(123151);
             console.log(error.response);
          }
 
 
-         let $container = document.getElementById(containerId);
+         let container = document.getElementById(containerId);
-         const jessibuca = new window.Jessibuca({
+         // 播放方式 1
-            container: $container,
+         // const jessibuca = new window.Jessibuca({
-            videoBuffer: 0.2, // 缓存时长
+         //    container: container,
-            isResize: false,
+         //    videoBuffer: 0.2, // 缓存时长
-            text: "",
+         //    isResize: false,
-            loadingText: "加载中",
+         //    text: "",
-            debug: true,
+         //    loadingText: "加载中",
-            showBandwidth: false, // 显示网速
+         //    debug: true,
-            operateBtns: {
+         //    showBandwidth: false, // 显示网速
-               fullscreen: false,
+         //    operateBtns: {
-               screenshot: false,
+         //       fullscreen: false,
-               play: false,
+         //       screenshot: false,
-               audio: false,
+         //       play: false,
-            },
+         //       audio: false,
-            forceNoOffscreen: false,
+         //    },
-            controlAutoHide: true,
+         //    forceNoOffscreen: false,
-            isNotMute: false,
+         //    controlAutoHide: true,
+         //    isNotMute: false,
+         // });
+         // setjessibuca(jessibuca)
+         // jessibucas.current = jessibuca
+         // play({ jessibuca })
+
+         // 播放方式 2
+         const flv = flvjs.createPlayer({
+            type: 'flv',
+            // url: 'ws://10.8.30.42:8081/jessica/34020000001110000001/34020000001310000001.flv',
+            url: `${iotVideoServer}/jessica/${videoObj.topSerialNo}/${videoObj.serialNo}.flv`,
+            isLive: true,
+            hasAudio: false,
+            hasVideo: true,
+            enableWorker: false,
+            enalleStashBuffer: true,
+            stashInitialSize: 128,
+            lazyLoadMaxDuration: 3 * 60,
+            seekType: 'range',
+            autoCleanupSourceBuffer: true,
          });
-         setjessibuca(jessibuca)
+         flv.attachMediaElement(container);
-         jessibucas.current = jessibuca
+         flv.load();
-         play({ jessibuca })
+         flv.play();
+         flvPlayer.current = flv
       } else {
          videoFront = new moment(); //验证前时间
          const player = new EZUIKit.EZUIKitPlayer({
@@ -524,7 +549,7 @@ const VideoPlay = ({ dispatch, actions,
       <>
          <div className='vcmp_videoplay' style={{ width: size?.parentWidth || '100%', height: size?.parentHeight || '100%', backgroundColor: 'black', overflow: 'hidden', display: 'flex', alignItems: 'center', justifyContent: 'center', }}>
             <div id={"vcmp_videoplay" + videoObj.id} className="vcmp_video" style={{ position: 'relative', height: size?.height || '100%', width: size?.width || '100%', minWidth: 240, minHeight: 135, overflow: 'hidden' }}>
-               <VideoHeader
+               {/* <VideoHeader
                   operationState={operationState} changeSelectState={changeSelectState}
                   histroyTime={histroyTime}
                   setoperationState={setoperationState} name={name}
@@ -539,7 +564,7 @@ const VideoPlay = ({ dispatch, actions,
                   playState={playState.current}
                   videoFront={videoFront}
                   videoAfter={videoFront}
-               />
+               /> */}
                {/* 视频内容 */}
                {
                   // <iframe
@@ -557,7 +582,12 @@ const VideoPlay = ({ dispatch, actions,
                   //     style={{ pointerEvents: 'none' }}
                   // />
                }
-               <div id={containerId} style={{ height: '100%', width: '100%', }}></div>
+               {
+                  videoObj.type == 'yingshi' ?
+                     <div id={containerId} style={{ height: '100%', width: '100%', }}></div> :
+                     <video id={containerId} style={{ height: '100%', width: '100%', }}></video>
+               }
+
                {/* {videoMask ? <div style={{ height: '100%', width: '100%', position: 'absolute', top: '0', left: '0', backgroundColor: 'black', color: "red", }}><div style={{ position: 'absolute', top: 'calc(60%)', left: 0, zIndex: 99, textAlign: 'center', width: '100%' }}>{written}</div></div> : ''} */}
 
                {/* 下方操作栏 */}

code/VideoAccess-VCMP/web/package.json

@@ -60,6 +60,7 @@
       "copy-to-clipboard": "^3.3.1",
       "cross-env": "^7.0.3",
       "ezuikit-js": "^0.6.1",
+      "flv.js": "^1.6.2",
       "fs-web-server-scaffold": "^1.0.6",
       "koa-better-http-proxy": "^0.2.5",
       "koa-proxy": "^1.0.0-alpha.3",