video play check

code/VideoAccess-VCMP/web/client/src/sections/monitor/containers/index.js

@@ -2,5 +2,6 @@
 
 import MonitorCenter from './monitorCenter';
 import VideoPlayCross from './videoPlayCross';
+import VideoPlayStatus from './videoPlayStatus';
 
-export { MonitorCenter, VideoPlayCross };
+export { MonitorCenter, VideoPlayCross, VideoPlayStatus };

code/VideoAccess-VCMP/web/client/src/sections/monitor/containers/videoPlayStatus.js

@@ -0,0 +1,52 @@
+import React, { useEffect, useState } from 'react';
+import EZUIKit from 'ezuikit-js'
+import qs from "qs";
+
+const VideoPlayStatus = (props) => {
+   const [playState, setPlayState] = useState({})
+
+   useEffect(() => {
+      const params = qs.parse(props.location.search.slice(1))
+      /**
+       * query 查询参数
+       * 
+       * ysToken 萤石token
+       * serialNo 序列号
+       * channelNo 通道号 默认 1
+       */
+      const player = new EZUIKit.EZUIKitPlayer({
+         id: 'video_play_check_dom', // 视频容器ID
+         accessToken: params?.ysToken,
+         url: `ezopen://open.ys7.com/${params.serialNo}/${params.channelNo || '1'}.live`,
+         width: 400,
+         height: 300,
+         handleSuccess: (e) => {
+            console.log(e);
+            setPlayState(e)
+         },
+         handleError: (e) => {
+            console.log(e);
+            console.log(e.retcode);
+            setPlayState(e)
+         },
+      })
+   }, [])
+
+   return (
+      <div style={{ height: '100vh', width: '100vw' }}>
+         <div style={{ textAlign: 'center', marginTop: '4%' }}>
+            <div id={'video_play_check_dom'} style={{ display: 'inline-block', height: 300, width: 400, }}></div>
+         </div>
+         <div id='video_play_check_result' >
+            <div style={{ width: 400, margin: 'auto' }}>
+               <p style={{ opacity: .4 }}>status_code = 0 则播放成功</p>
+               <p>status_code：<span id='status_code' style={{ float: 'right' }}>{playState.retcode}</span></p>
+               <p>status_message： <span id='status_message' style={{ float: 'right' }}>{playState.msg}</span></p>
+               <p>status_type：<span id='status_type' style={{ float: 'right' }}>{playState.type}</span></p>
+            </div>
+         </div>
+      </div>
+   )
+}
+
+export default VideoPlayStatus

code/VideoAccess-VCMP/web/client/src/sections/monitor/routes.js

@@ -1,5 +1,5 @@
 'use strict';
-import { MonitorCenter, VideoPlayCross } from './containers';
+import { MonitorCenter, VideoPlayCross, VideoPlayStatus } from './containers';
 
 export default [{
    type: 'inner',
@@ -17,4 +17,12 @@ export default [{
       breadcrumb: '',
       component: VideoPlayCross,
    }
+}, {
+   type: 'outer',
+   route: {
+      path: '/video_play_status',
+      key: 'videoPlayStatus',
+      breadcrumb: '',
+      component: VideoPlayStatus,
+   }
 }];