视频监控

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

@@ -2,7 +2,7 @@ import React, { useEffect, useState, useRef } from 'react'
 import { push } from 'react-router-redux';
 import { connect } from 'react-redux';
 import request from 'superagent';
-import { getCrane, logoutApp } from '../actions'
+import { getCrane, logoutApp, getVideo } from '../actions'
 import { ApiTable } from '$utils'
 import { Colors } from '@peace/utils'
 import {
@@ -11,6 +11,7 @@ import {
 import VideoModal from '../components/videoModal'
 import { Col, Row, Button, Modal, Input, Space } from 'antd';
 import '../style.less'
+import flvjs from 'flv.js'
 
 function calculateIntersection (cx, cy, d, angle) {
     // 将角度转换为弧度
@@ -58,8 +59,11 @@ function Index (props) {
     const [isModalOpen, setIsModalOpen] = useState(false);
     const [videoVis, setVideoVis] = useState(false)
     const [isOutModalOpen, setIsOutModalOpen] = useState(false)
+    const [video, setVideo] = useState({})
+    const flvPlayer = useRef()
 
     const draw = (type, params = {}) => {
+        return
         const canvasArea = document.getElementById('canvasArea')
         const canvasHeight = canvasArea.clientHeight - 12 * 2 - 6
         const canvasWidth = canvasArea.clientWidth - 12 * 2
@@ -457,6 +461,35 @@ function Index (props) {
             }
         }
 
+        //
+
+        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 () => {
             if (ws) {
                 ws.close();//关闭连接
@@ -483,9 +516,9 @@ function Index (props) {
                     </Button>
                 </Space>
                 <Space style={{ float: 'right' }}>
-                    <Button type="primary" size={'large'} style={{}} icon={<VideoCameraOutlined />} onClick={() => { setVideoVis(true) }}>
+                    {/* <Button type="primary" size={'large'} style={{}} icon={<VideoCameraOutlined />} onClick={() => { setVideoVis(true) }}>
                         监控视频
-                    </Button>
+                    </Button> */}
                     <Button type="primary" size={'large'} style={{}} icon={<SettingOutlined />} onClick={() => setIsModalOpen(true)}>
                         设置
                     </Button>
@@ -493,7 +526,10 @@ function Index (props) {
             </div>
 
             <div style={{ height: 'calc(80% - 40px)', padding: 8 }}>
-                <Row style={{ height: '100%' }}>
+                <Row style={{
+                    height: '100%',
+                    display: 'none'
+                }}>
                     <Col span={12} id="canvasArea" style={{ paddingRight: 8, maxHeight: '100%' }}>
                         <div className='card' style={cardStyle}>
                             <canvas ref={xzCvs} id='xzCvs' height={120} width={120} style={{}}>
@@ -509,6 +545,14 @@ function Index (props) {
                         </div>
                     </Col>
                 </Row>
+
+                <video
+                    id={'video-play'}
+                    autoPlay muted controls
+                    style={{ height: '100%', width: '100%', }}
+                >
+
+                </video>
             </div>
             <div style={{ height: '20%' }}>
                 <Row style={{ height: '100%' }}>