From 37b84265a182bcd6841ce5f230448909ad24320a Mon Sep 17 00:00:00 2001 From: wenlele Date: Tue, 5 Jul 2022 09:43:57 +0800 Subject: [PATCH] =?UTF-8?q?=E6=92=AD=E6=94=BE=E5=AE=8C=E6=88=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/videoPlayer/videoPlay.jsx | 10 ++-- .../components/cameraModal.jsx | 5 +- .../components/cascadeCamera.jsx | 49 ++++++++++++++----- .../components/fluoriteCamera.jsx | 2 + .../components/ipcCamera.jsx | 2 + .../components/nvrCamera.jsx | 37 +++++++++++--- .../equipmentWarehouse/containers/camera.jsx | 26 ++++++---- 7 files changed, 89 insertions(+), 42 deletions(-) diff --git a/code/VideoAccess-VCMP/web/client/src/components/videoPlayer/videoPlay.jsx b/code/VideoAccess-VCMP/web/client/src/components/videoPlayer/videoPlay.jsx index 2cae6d2..fd0929f 100644 --- a/code/VideoAccess-VCMP/web/client/src/components/videoPlayer/videoPlay.jsx +++ b/code/VideoAccess-VCMP/web/client/src/components/videoPlayer/videoPlay.jsx @@ -220,7 +220,6 @@ const VideoPlay = ({ const createJessibuca = async () => { if (videoObj.type != 'yingshi') { try { - // 初始化 推流 // const inviteRes = await IotVideoServerRequest.get(VideoServeApi.invite, { // id: '36011200002002021114', // channel: '36011200581314002900' @@ -235,12 +234,9 @@ const VideoPlay = ({ console.log(error.response); } - if (jessibuca) { - jessibuca.destroy() - } let $container = document.getElementById(containerId); - const jessibuca_ = new window.Jessibuca({ + const jessibuca = new window.Jessibuca({ container: $container, videoBuffer: 0.2, // 缓存时长 isResize: false, @@ -257,8 +253,8 @@ const VideoPlay = ({ forceNoOffscreen: false, isNotMute: false, }); - setjessibuca(jessibuca_) - play({ jessibuca: jessibuca_ }) + setjessibuca(jessibuca) + play({ jessibuca }) } } diff --git a/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/cameraModal.jsx b/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/cameraModal.jsx index 9a1c45a..bfd8d30 100644 --- a/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/cameraModal.jsx +++ b/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/cameraModal.jsx @@ -158,8 +158,6 @@ function cameraModal (props) { let data = cascadeRef.current.cascadeList.map((v) => { return { id: v.id, name: v.name, }; }); - console.log(cascadeRef.current.cascadeList) - console.log(data) cascadeRef.current.cascadeCameraForm().then((values) => { console.log(values); dispatch(equipmentWarehouse.postAddCascade({ ...values, camera: data })).then((res) => { @@ -312,12 +310,11 @@ function cameraModal (props) { cascadeRef.current .cascadeCameraForm() .then((values) => { - console.log(values); var front = new moment(); //验证前时间 setloading(true); dispatch( equipmentWarehouse.postVerifyCascade({ - sip: values.sip, + streamId: values.streamId, }) ).then((res) => { var after = new moment(); //验证后时间 diff --git a/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/cascadeCamera.jsx b/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/cascadeCamera.jsx index 4a922d5..5706de5 100644 --- a/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/cascadeCamera.jsx +++ b/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/cascadeCamera.jsx @@ -4,8 +4,9 @@ import { Form, Row, Col, Checkbox, Radio, CheckboxGroup, Input } from "@douyinfe import { IconEdit, IconPlayCircle, } from "@douyinfe/semi-icons"; import "./cameraModal.less"; import PerfectScrollbar from "perfect-scrollbar"; -let equipmentScrollbar; +import { VideoPlayModal } from "$components"; +let equipmentScrollbar; function cascadeCamera ({ dRef, dispatch, actions, cameraData, parentCamera, testComplete, close, ashTrue, ashFalse }) { const form = useRef(); const { equipmentWarehouse } = actions; @@ -14,13 +15,16 @@ function cascadeCamera ({ dRef, dispatch, actions, cameraData, parentCamera, tes const [CheckList, setCheckList] = useState([]); //nvr视频流多选 const [isAllChoose, setIsAllChoose] = useState(false); //全选 const [formData, setFormData] = useState() //表单数据 - console.log(cameraData.externalDomain) + const [videoPlay, setVideoPlay] = useState(false);//播放 + const [videoObj, setVideoObj] = useState(); //播放条件 + useEffect(() => { dispatch(equipmentWarehouse.getCascadeSIP()).then((res) => { setSip(res.payload.data); if (cameraData.id) { let sip = res.payload.data.find((item) => item.streamid == cameraData.topSerialNo) - dispatch(equipmentWarehouse.getCascadeStream({ sip: sip.sipip })).then((res) => { + console.log(sip); + dispatch(equipmentWarehouse.getCascadeStream({ streamId: sip.streamid })).then((res) => { let oneData = res.payload.data[0]; let modifyData = res.payload.data.find( (item) => item.id == cameraData.gbId @@ -59,7 +63,8 @@ function cascadeCamera ({ dRef, dispatch, actions, cameraData, parentCamera, tes useEffect(() => { //测试成功后获取级联视频流 if (testComplete) { - dispatch(equipmentWarehouse.getCascadeStream({ sip: formData.sip })).then((res) => { + console.log(formData); + dispatch(equipmentWarehouse.getCascadeStream({ streamId: formData.streamId })).then((res) => { console.log(res.payload.data); let chooseList = []; let data = res.payload.data.map((item, index) => { @@ -115,7 +120,6 @@ function cascadeCamera ({ dRef, dispatch, actions, cameraData, parentCamera, tes function NvrChangeName (e, index, id) { //级联摄像头视频流获取修改名称 let NvrchangeList = JSON.parse(JSON.stringify(cascadeList)); - console.log(!cameraData.gbId) if (!cameraData.gbId || cameraData.gbId == id) { NvrchangeList[index].change = true; setCascadeList(NvrchangeList); @@ -148,10 +152,20 @@ function cascadeCamera ({ dRef, dispatch, actions, cameraData, parentCamera, tes setIsAllChoose(true); } } - function playVideo (e) { + function playVideo (e, id) { //nvr播放视频 - console.log("22222222222222222"); - + if (cameraData.gbId == id || !cameraData.gbId) { + let data = cascadeList.find((item) => item.id == id) + console.log(formData); + setVideoObj({ + type: 'cascade', + audio: false, + serialNo: data.streamid, + topSerialNo: cameraData.id ? cameraData.topSerialNo : formData?.streamId, + playUrlSd: data?.playUrl?.liveUrl?.sd["WS-RAW"], + }) + setVideoPlay(true); + } e.stopPropagation(); } function onDisabled (id) { @@ -181,7 +195,6 @@ function cascadeCamera ({ dRef, dispatch, actions, cameraData, parentCamera, tes labelAlign="left" labelWidth="115px" onValueChange={(values) => { - console.log(values) setFormData(values) let setting = ["externalDomain", "cascadeType", "sip"] let b = {} @@ -227,15 +240,16 @@ function cascadeCamera ({ dRef, dispatch, actions, cameraData, parentCamera, tes {sip.map((item, index) => ( - - {item.sipip} + + {item.streamid} ))} @@ -349,7 +363,7 @@ function cascadeCamera ({ dRef, dispatch, actions, cameraData, parentCamera, tes playVideo(e)} + onClick={(e) => playVideo(e, item.id)} /> @@ -364,6 +378,15 @@ function cascadeCamera ({ dRef, dispatch, actions, cameraData, parentCamera, tes + {videoPlay ? + { + setVideoPlay(false) + }} /> + : "" + } ); } diff --git a/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/fluoriteCamera.jsx b/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/fluoriteCamera.jsx index 8a621ab..361bb7b 100644 --- a/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/fluoriteCamera.jsx +++ b/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/fluoriteCamera.jsx @@ -466,6 +466,7 @@ function fluoriteCamera ({ cRef, CameraKind, CameraAbility, cameraData, ashTrue, diff --git a/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/ipcCamera.jsx b/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/ipcCamera.jsx index 39d5e18..1b16863 100644 --- a/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/ipcCamera.jsx +++ b/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/ipcCamera.jsx @@ -394,6 +394,7 @@ function ipcCamera ({ field="serialNo" label="设备编号接入:" maxLength="39" + disabled={cameraData.id ? true : false} placeholder="请输入设备编号" style={{ width: 307 }} rules={[{ required: true, message: "请输入设备编号" }]} @@ -403,6 +404,7 @@ function ipcCamera ({ style={{ width: 320, height: 90 }} field="rtmp" label="RTMP地址接入:" + disabled={cameraData.id ? true : false} placeholder="请输入RTMP地址接入" rules={[{ required: true, message: "请输入RTMP地址" }]} /> diff --git a/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/nvrCamera.jsx b/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/nvrCamera.jsx index 0b27bbe..be6830f 100644 --- a/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/nvrCamera.jsx +++ b/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/nvrCamera.jsx @@ -14,11 +14,10 @@ import { import { IconEdit, IconPlayCircle, IconTickCircle } from "@douyinfe/semi-icons"; import "./cameraModal.less"; import PerfectScrollbar from "perfect-scrollbar"; -import { isIndexed } from "immutable"; -import { useId } from "react"; +import { VideoPlayModal } from "$components"; let equipmentScrollbar; -function nvrCamera ({ dispatch, actions, nvrRef, cameraData, addNvr, nvrNumber }) { +function nvrCamera ({ dispatch, actions, nvrRef, cameraData, addNvr, nvrNumber, }) { const { equipmentWarehouse } = actions; const cameraDataNvr = cameraData.nvr || ""; const form = useRef(); @@ -30,6 +29,8 @@ function nvrCamera ({ dispatch, actions, nvrRef, cameraData, addNvr, nvrNumber } const [loadingTip, setloadingTip] = useState("获取中..."); //loading tip的值 const [step, setstep] = useState("none"); const [stepp, setstepp] = useState("none"); + const [videoPlay, setVideoPlay] = useState(false);//播放 + const [videoObj, setVideoObj] = useState(); //播放条件 useEffect(() => { NVRcameraList @@ -201,9 +202,20 @@ function nvrCamera ({ dispatch, actions, nvrRef, cameraData, addNvr, nvrNumber } setIsAllChoose(true); } } - function playVideo (e) { + function playVideo (e, id) { //nvr播放视频 - console.log("22222222222222222"); + if (cameraData.gbId == id || !cameraData.gbId) { + let data = NVRcameraList.find((item) => item.id == id) + setVideoObj({ + type: "nvr", + audio: false, + serialNo: data.streamid, + topSerialNo: cameraDataNvr ? cameraDataNvr.serialNo : addNvr ? nvrNumber : equipmentNum, + playUrlSd: data?.playUrl?.liveUrl?.sd["WS-RAW"], + }) + setVideoPlay(true); + } + e.stopPropagation(); } function onDisabled (id) { @@ -259,7 +271,7 @@ function nvrCamera ({ dispatch, actions, nvrRef, cameraData, addNvr, nvrNumber } > 视频流获取 - {stepp!=='none' ? ( + {stepp !== 'none' ? (
@@ -334,7 +346,7 @@ function nvrCamera ({ dispatch, actions, nvrRef, cameraData, addNvr, nvrNumber } onClick={(e) => e.stopPropagation()} > ) : ( - item.name.length>8?`${item.name.substr(0,8)}...`:item.name + item.name.length > 8 ? `${item.name.substr(0, 8)}...` : item.name )}
playVideo(e)} + onClick={(e) => playVideo(e, item.id)} /> + {videoPlay ? + { + setVideoPlay(false) + }} /> + : "" + } ); } diff --git a/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/containers/camera.jsx b/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/containers/camera.jsx index e036e43..a173f33 100644 --- a/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/containers/camera.jsx +++ b/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/containers/camera.jsx @@ -188,17 +188,20 @@ const CameraHeader = (props) => { theme="borderless" onClick={() => { if (row.type == "yingshi") { - // console.log(row.serialNo); - // console.log(row.secretYingshi.token); - // console.log(row.gbCamera.playUrl.liveUrl.sd.ezopen); - // console.log(row.gbCamera.playUrl.liveUrl.hd.ezopen); - setVideoObj({ - type:row.type, + type: row.type, + serialNo: row.serialNo, + yingshiToken: row.secretYingshi?.token, + playUrlSd: row.gbCamera?.playUrl?.liveUrl?.sd?.ezopen, + playUrlHd: row.gbCamera?.playUrl?.liveUrl?.hd?.ezopen, + }) + } else { + setVideoObj({ + type: row.type, + audio: false, serialNo: row.serialNo, - yingshiToken: row.secretYingshi.token, - playUrlSd: row.gbCamera.playUrl.liveUrl.sd.ezopen, - playUrlHd: row.gbCamera.playUrl.liveUrl.hd.ezopen, + topSerialNo: row.topSerialNo, + playUrlSd: row.gbCamera?.playUrl?.liveUrl?.sd["WS-RAW"], }) } setVideoPlay(true) @@ -337,7 +340,7 @@ const CameraHeader = (props) => { title: "设备创建时间", dataIndex: "createTime", key: "time", - render: (text, r, index) => { + render: (_, r, index) => { return moment(r.createTime).format("YYYY-MM-DD HH:MM:SS"); }, }, @@ -345,6 +348,9 @@ const CameraHeader = (props) => { title: "设备添加账号", dataIndex: "size", key: "account", + render: (text, r, index) => { + return r.createUser?.namePresent + }, }, { title: "项目名称",