监控视频播放

console/client/src/sections/console/actions/index.js

@@ -26,7 +26,21 @@ export function getCrane (params) {
     });
 }
 
+export function getVideo (params) {
+    return dispatch => basicAction({
+        type: 'get',
+        query: params,
+        dispatch: dispatch,
+        actionType: 'GET_VIDEO',
+        url: ApiTable.videoGet,
+        msg: { error: '获取视频信息失败' },
+        reducer: { name: 'video' }
+    });
+}
+
+
 export default {
     editCrane,
     getCrane,
+    getVideo,
 }

console/client/src/sections/console/components/videoModal.js

@@ -0,0 +1,71 @@
+import React, { useEffect, useState, useRef } from 'react'
+import { push } from 'react-router-redux';
+import { connect } from 'react-redux';
+import flvjs from 'flv.js'
+import { getVideo } from '../actions'
+import { Modal } from 'antd'
+
+const VideoModal = ({ dispatch, onCancel }) => {
+    const [video, setVideo] = useState({})
+    const flvPlayer = useRef()
+
+    useEffect(() => {
+        dispatch(getVideo()).then(res => {
+            console.log(res);
+            if (res.success) {
+                setVideo(res.payload.data)
+                const container = document.getElementById('video-play');
+                const flv = flvjs.createPlayer({
+                    type: 'flv',
+                    url: `${res.payload.data.ws_flv}`,
+                    isLive: true,
+                    hasAudio: false,
+                    hasVideo: true,
+                }, {
+                    enableWorker: false,
+                    enalleStashBuffer: true,
+                    stashInitialSize: 128,
+                    lazyLoadMaxDuration: 3 * 60,
+                    seekType: 'range',
+                    autoCleanupSourceBuffer: true,
+                    cors: true,
+                });
+                flv.attachMediaElement(container);
+                flv.load();
+                flv.play();
+                flvPlayer.current = flv
+            }
+        })
+    }, [])
+
+    return (
+        <Modal
+            title="监控视频"
+            open={true}
+            onOk={() => { }}
+            onCancel={() => {
+                onCancel()
+            }}
+            width={'64%'}
+            style={{}}
+            footer={null}
+        >
+            <video
+                id={'video-play'}
+                autoPlay muted controls
+                style={{ height: '100%', width: '100%', }}
+            >
+
+            </video>
+        </Modal>
+    )
+}
+
+function mapStateToProps (state) {
+    const { crane } = state;
+    return {
+        craneData: crane.data || {}
+    }
+}
+
+export default connect(mapStateToProps)(VideoModal);

console/client/src/sections/console/containers/index.js

@@ -8,6 +8,7 @@ import { Colors } from '@peace/utils'
 import {
     SettingOutlined, VideoCameraOutlined
 } from '@ant-design/icons';
+import VideoModal from '../components/videoModal'
 import { Col, Row, Button, Modal, Input, Space } from 'antd';
 import '../style.less'
 
@@ -55,6 +56,7 @@ function Index (props) {
         shadow: '#303030'
     })
     const [isModalOpen, setIsModalOpen] = useState(false);
+    const [videoVis, setVideoVis] = useState(false)
 
     const draw = (type, params = {}) => {
         const canvasArea = document.getElementById('canvasArea')
@@ -475,7 +477,7 @@ function Index (props) {
         }}>
             <div style={{ padding: '0 8px 8px', textAlign: 'right' }}>
                 <Space>
-                    <Button type="primary" size={'large'} style={{}} icon={<VideoCameraOutlined />} onClick={() => { }}>
+                    <Button type="primary" size={'large'} style={{}} icon={<VideoCameraOutlined />} onClick={() => { setVideoVis(true) }}>
                         监控视频
                     </Button>
                     <Button type="primary" size={'large'} style={{}} icon={<SettingOutlined />} onClick={() => setIsModalOpen(true)}>
@@ -607,6 +609,10 @@ function Index (props) {
             >
                 <Input.Password size="large" placeholder="请输入密码" />
             </Modal>
+            {
+                videoVis ?
+                    <VideoModal onCancel={() => { setVideoVis(false) }} /> : ''
+            }
         </div>
     )
 }

console/client/src/utils/webapi.js

@@ -10,6 +10,7 @@ export const ApiTable = {
     dataLatest: 'v1/data/latest',
     craneSetting: 'v1/settings',
     dataLive: 'v1/data/live',
+    videoGet: 'v1/video/get',
 };
 
 export const RouteTable = {

console/package.json

@@ -72,6 +72,7 @@
     "cross-env": "^7.0.3",
     "crypto-js": "^4.1.1",
     "file-saver": "^2.0.5",
+    "flv.js": "^1.6.2",
     "fs-attachment": "^1.0.0",
     "fs-web-server-scaffold": "^1.0.6",
     "koa-better-http-proxy": "^0.2.5",