GB视频播放

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

@@ -74,7 +74,7 @@ const VideoOperation = ({
                   /> : ''
             }
             <div style={{
-               display: 'flex', justifyContent: 'space-between',
+               display: 'flex', justifyContent: 'space-between', height: '100%'
             }}>
                {
                   operationState ?

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

@@ -1,17 +1,17 @@
 import React, { useState, useEffect, useRef } from "react";
 import { connect } from "react-redux";
-import { ysptz } from '$utils'
+import { ysptz, gbptz } from '$utils'
 import './videoPlay.less';
 
 const VideoOperationCloudControl = ({
-   videoObj,
+   videoObj, iotVideoServer
 }) => {
 
    const cloudControl = (ac) => {
       if (videoObj.type == 'yingshi') {
          ysptz(ac, videoObj)
       } else {
-
+         gbptz(ac, videoObj, iotVideoServer)
       }
    }
 
@@ -84,9 +84,10 @@ const VideoOperationCloudControl = ({
 }
 
 function mapStateToProps (state) {
-   const { auth } = state;
+   const { auth, global } = state;
    return {
       user: auth.user,
+      iotVideoServer: global.iotVideoServer,
    };
 }
 

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

@@ -2,6 +2,8 @@ import React, { useState, useEffect, useRef } from "react";
 import { connect } from "react-redux";
 import screenfull from 'screenfull';
 import moment from "moment";
+import request from 'superagent'
+import { VideoServeApi, IotVideoServerRequest } from '$utils'
 import VideoHeader from './voiceHeader'
 import VideoOperation from './videoOperation'
 import './videoPlay.less';
@@ -15,7 +17,9 @@ const VideoPlay = ({
    height, width, containerId = 'myPlayer',
    // playUrl,
    name,
+
    // videoObj,
+
    // videoObj = {
    //    type: 'yingshi',
    //    audio: false,
@@ -27,15 +31,19 @@ const VideoPlay = ({
    //    playUrlHd: 'ezopen://open.ys7.com/G75922040/1.hd.live',
    //    // replayUrl: 'ezopen://open.ys7.com/G75922040/1.rec',
    // },
+
    videoObj = {
       type: 'cascade',
       audio: false,
-      serialNo: 'G75922040', // 设备序列号 必须
-      topSerialNo: 'G75922040', // 设备顶级序列号 必须
-      playUrlSd: 'ws://221.230.55.27:8081/jessica/34020000001110000077/34020000001310000003', // 必须
+      serialNo: '34020000001310000001', // 设备序列号 必须
+      topSerialNo: '34020000001110000077', // 设备顶级序列号 必须
+      playUrlSd: 'ws://221.230.55.27:8081/jessica/34020000001110000077/34020000001310000001', // 必须
       // playUrlHd: 'ezopen://open.ys7.com/G75922040/1.hd.live',
       // replayUrl: 'ezopen://open.ys7.com/G75922040/1.rec',
    },
+
+   //
+   iotVideoServer
 }) => {
    console.log(videoObj);
    const [jessibuca, setjessibuca] = useState(null)
@@ -211,8 +219,23 @@ const VideoPlay = ({
 
    const createJessibuca = async () => {
       if (videoObj.type != 'yingshi') {
-         
-         let $container = document.getElementById('container');
+         try {
+            // const inviteRes = await IotVideoServerRequest.get(VideoServeApi.invite, {
+            //    id: '36011200002002021114',
+            //    channel: '36011200581314002900'
+            // }).then(res => {
+            //    console.log(res);
+            // }, err => {
+            //    console.log(err);
+            // })
+
+            const inviteRes_ = await request.get(`${iotVideoServer}/api/gb28181/invite?id=${videoObj.topSerialNo}&channel=${videoObj.serialNo}`)
+         } catch (error) {
+            console.log(error.response);
+         }
+
+
+         let $container = document.getElementById(containerId);
          const jessibuca = new window.Jessibuca({
             container: $container,
             videoBuffer: 0.2, // 缓存时长
@@ -220,18 +243,18 @@ const VideoPlay = ({
             text: "",
             loadingText: "加载中",
             debug: true,
-            showBandwidth: true, // 显示网速
+            showBandwidth: false, // 显示网速
             operateBtns: {
-               fullscreen: true,
-               screenshot: true,
-               play: true,
-               audio: true,
+               fullscreen: false,
+               screenshot: false,
+               play: false,
+               audio: false,
             },
             forceNoOffscreen: false,
             isNotMute: false,
          });
          setjessibuca(jessibuca)
-         play()
+         play({ jessibuca })
       }
    }
 
@@ -240,11 +263,12 @@ const VideoPlay = ({
       // setIsPlaying(operation == 'play')
    }
 
-   const play = () => {
+   const play = (params) => {
       if (videoObj.type == 'yingshi') {
          yingshiOperation('play')
-      } else if (jessibuca && videoObj.playUrlSd) {
-         jessibuca.play(videoObj.playUrlSd);
+      } else if ((params.jessibuca || jessibuca) && videoObj.playUrlSd) {
+         const jes = params.jessibuca || jessibuca
+         jes.play(videoObj.playUrlSd);
          setIsPlaying(true)
       }
    }
@@ -276,7 +300,7 @@ const VideoPlay = ({
 
    return (
       <>
-         <div className="vcmp_videoplay" style={{ height: height || '100%', width: width || '100%' }}>
+         <div className="vcmp_videoplay" style={{ height: height || '100%', width: width || '100%', overflow: 'hidden' }}>
             <div id="vcmp_videoplay" style={{ position: 'relative', display: 'flex', height: '100%', width: '100%' }}>
                {/* 顶部信息 */}
                <VideoHeader
@@ -306,7 +330,8 @@ const VideoPlay = ({
                         wmode="transparent"
                         style={{ pointerEvents: 'none' }}
                      /> :
-                     <div id="container"
+                     <div
+                        id={containerId}
                         style={{
                            height: '100%', width: '100%'
                         }}>
@@ -337,9 +362,11 @@ const VideoPlay = ({
 }
 
 function mapStateToProps (state) {
-   const { auth } = state;
+   const { auth, global } = state;
+   console.log(global);
    return {
       user: auth.user,
+      iotVideoServer: global.iotVideoServer,
    };
 }
 

code/VideoAccess-VCMP/web/client/src/layout/actions/global.js

@@ -37,7 +37,8 @@ export function initApiRoot () {
             type: INIT_API_ROOT,
             payload: {
                apiRoot: res.root,
-               iotAuthWeb: res.iotAuthWeb
+               iotAuthWeb: res.iotAuthWeb,
+               iotVideoServer: res.iotVideoServer
             }
          })
       });

code/VideoAccess-VCMP/web/client/src/layout/reducers/global.js

@@ -3,37 +3,41 @@ import Immutable from 'immutable';
 import { INIT_LAYOUT, RESIZE, INIT_API_ROOT } from '../actions/global';
 
 function global (state = {
-    title: '',
-    copyright: '',
-    sections: [],
-    actions: {},
-    plugins: {},
-    clientHeight: 768,
-    clientWidth: 1024,
-    apiRoot: '',
+   title: '',
+   copyright: '',
+   sections: [],
+   actions: {},
+   plugins: {},
+   clientHeight: 768,
+   clientWidth: 1024,
+   apiRoot: '',
+   iotAuthWeb: '',
+   iotVideoServer: '',
 }, action) {
-    const payload = action.payload;
-    switch (action.type) {
-        case RESIZE:
-            return Immutable.fromJS(state).merge({
-                clientHeight: payload.clientHeight,
-                clientWidth: payload.clientWidth
-            }).toJS();
-        case INIT_LAYOUT:
-            return Immutable.fromJS(state).merge({
-                title: payload.title,
-                copyright: payload.copyright,
-                sections: payload.sections,
-                actions: payload.actions,
-                plugins: payload.plugins,
-            }).toJS();
-        case INIT_API_ROOT:
-            return Immutable.fromJS(state).merge({
-                apiRoot: payload.apiRoot,
-            }).toJS();
-        default:
-            return state;
-    }
+   const payload = action.payload;
+   switch (action.type) {
+      case RESIZE:
+         return Immutable.fromJS(state).merge({
+            clientHeight: payload.clientHeight,
+            clientWidth: payload.clientWidth
+         }).toJS();
+      case INIT_LAYOUT:
+         return Immutable.fromJS(state).merge({
+            title: payload.title,
+            copyright: payload.copyright,
+            sections: payload.sections,
+            actions: payload.actions,
+            plugins: payload.plugins,
+         }).toJS();
+      case INIT_API_ROOT:
+         return Immutable.fromJS(state).merge({
+            apiRoot: payload.apiRoot,
+            iotAuthWeb: payload.iotAuthWeb,
+            iotVideoServer: payload.iotVideoServer,
+         }).toJS();
+      default:
+         return state;
+   }
 }
 
 export default global;

code/VideoAccess-VCMP/web/client/src/utils/index.js

@@ -1,8 +1,15 @@
 'use strict';
 import { isAuthorized } from './func';
 import { AuthorizationCode } from './authCode';
-import { ApiTable, RouteTable, AuthRequest, AxyRequest } from './webapi'
-import { YS_PTZ_DIRECTION, ysptz } from './videoCloudControl';
+import {
+   ApiTable, VideoServeApi,
+   RouteTable,
+   AuthRequest, AxyRequest, IotVideoServerRequest
+} from './webapi'
+import {
+   YS_PTZ_DIRECTION, ysptz,
+   gbptz
+} from './videoCloudControl';
 
 export {
    isAuthorized,
@@ -10,10 +17,14 @@ export {
    AuthorizationCode,
 
    ApiTable,
+   VideoServeApi,
    RouteTable,
    AuthRequest,
    AxyRequest,
+   IotVideoServerRequest,
 
    YS_PTZ_DIRECTION,
    ysptz,
+
+   gbptz,
 }

code/VideoAccess-VCMP/web/client/src/utils/videoCloudControl.js

@@ -1,5 +1,6 @@
 'use strict';
 import superagent from "superagent"
+import { VideoServeApi } from './'
 
 // 操作命令：0-上，1-下，2-左，3-右，4-左上，5-左下，6-右上，7-右下，8-放大，9-缩小，10-近焦距，11-远焦距	
 export const YS_PTZ_DIRECTION = {
@@ -51,4 +52,45 @@ export function ysptz (ac, { serialNo, yingshiToken, channelNo }) {
             }, 500)
          }
       })
+}
+
+
+
+
+export const GB_PTZ_DIRECTION = {
+   up: 'A50F0108007D003A',
+   down: 'A50F0104007D0036',
+   left: 'A50F01027D000034',
+   right: 'A50F01017D000033',
+   up_left: 'A50F010A7D7D00B9',
+   down_left: 'A50F01067D7D00B5',
+   up_right: 'A50F01097D7D00B8',
+   down_right: 'A50F01057D7D00B4',
+   zoom_in: 'A50F012000009065',
+   zoom_out: 'A50F011000009055',
+   focus_in: 'A50F0148007D007A',
+   focus_out: 'A50F0144007D0076',
+   stop: 'A50F0100000000B5'
+}
+
+export function gbptz (ac, { topSerialNo, serialNo }, iotVideoServer) {
+   let requestUrl = `${iotVideoServer}/${VideoServeApi.control}?id=${topSerialNo}&channel=${serialNo}`
+   superagent
+      .get(requestUrl + `&ptzcmd=${GB_PTZ_DIRECTION[ac]}`)
+      .then((res) => {
+         console.log(res.status);
+         if (res.status != '200') {
+            // message.error(resBody.msg)
+         } else {
+            setTimeout(_ => {
+               superagent
+                  .get(requestUrl + `&ptzcmd=${GB_PTZ_DIRECTION['stop']}`)
+                  .then((tRes) => {
+                     if (tRes.status != '200') {
+                        // message.error('操作失败！')
+                     }
+                  })
+            }, 500)
+         }
+      })
 }

code/VideoAccess-VCMP/web/client/src/utils/webapi.js

@@ -39,7 +39,8 @@ export const ApiTable = {
 };
 
 export const VideoServeApi = {
-   invite: 'api/gb28181/invite'
+   invite: 'api/gb28181/invite',
+   control: 'api/gb28181/control'
 }
 
 export const RouteTable = {

code/VideoAccess-VCMP/web/config.js

@@ -63,6 +63,7 @@ const product = {
       opts: {
          apiUrl: API_URL,
          iotAuthWeb: IOT_AUTH_WEB,
+         iotVideoServer: IOT_VIDEO_SERVER,
          staticRoot: './client',
       }
    }, {

code/VideoAccess-VCMP/web/routes/attachment/index.js

@@ -19,12 +19,13 @@ module.exports = {
    entry: function (app, router, opts) {
 
       const getApiRoot = async function (ctx) {
-         const { apiUrl, iotAuthWeb } = opts;
+         const { apiUrl, iotAuthWeb, iotVideoServer } = opts;
 
          ctx.status = 200;
          ctx.body = {
             root: apiUrl,
-            iotAuthWeb
+            iotAuthWeb,
+            iotVideoServer
          };
       };