From da90aa7fc2b6b8283b5e6ac1778e7f3269afb983 Mon Sep 17 00:00:00 2001 From: wenlele Date: Mon, 1 Aug 2022 14:55:40 +0800 Subject: [PATCH] =?UTF-8?q?=E6=92=AD=E6=94=BE=E5=99=A8=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/videoPlayer/videoOperation.jsx | 27 +- .../videoPlayer/videoOperationHistroyTime.jsx | 169 ++++----- .../videoPlayer/videoOperationTalk.jsx | 1 - .../src/components/videoPlayer/videoPlay.jsx | 342 ++++++++++-------- .../components/videoPlayer/videoPlayModal.jsx | 12 +- .../components/videoPlayer/voiceHeader.jsx | 22 +- .../components/cascadeCamera.jsx | 6 +- .../equipmentWarehouse/containers/camera.jsx | 1 - .../monitor/containers/videoPlayCross.jsx | 13 +- code/VideoAccess-VCMP/web/package.json | 3 +- 10 files changed, 336 insertions(+), 260 deletions(-) diff --git a/code/VideoAccess-VCMP/web/client/src/components/videoPlayer/videoOperation.jsx b/code/VideoAccess-VCMP/web/client/src/components/videoPlayer/videoOperation.jsx index 4d79544..a5298ad 100644 --- a/code/VideoAccess-VCMP/web/client/src/components/videoPlayer/videoOperation.jsx +++ b/code/VideoAccess-VCMP/web/client/src/components/videoPlayer/videoOperation.jsx @@ -9,6 +9,7 @@ import VideoOperationHistroyTime from './videoOperationHistroyTime' import VideoOperationHistroyProcess from "./videoOperationHistroyProcess"; import { IconPause, IconPlay } from '@douyinfe/semi-icons'; import './videoPlay.less'; +import { log } from "ezuikit-js"; const timeFormat = 'YYYY-MM-DD HH:mm:ss' @@ -26,6 +27,9 @@ const VideoOperation = ({ videoObj, setYingshiPrepare, yingshiPrepareRef, slideDown, + player, + // setPlayer, + playState, }) => { const [showTimeSelect, setShowTimeSelect] = useState(false) @@ -36,14 +40,25 @@ const VideoOperation = ({ } const changeResolution = () => { - if (yingshiPrepareRef.current) { - return - } + // if (yingshiPrepareRef.current) { + // return + // } if (videoObj.type == 'yingshi') { - yingshiPrepareRef.current = 'yingshi' - setYingshiPrepare('play') + // yingshiPrepareRef.current = 'yingshi' + // setYingshiPrepare('play') } + + console.log(player); + player.stop().then((res) => { + if (resolution == 'sd') { + player.play({ url: videoObj?.playUrlHd, options: { hd: true } }) + } else { + player.play({ url: videoObj?.playUrlSd, options: { hd: false } }) + } + playState=false + }) setResolution(resolution == 'sd' ? 'hd' : 'sd') + // setPlayer({ url: resolution == 'sd' ? videoObj?.playUrlSd : videoObj?.playUrlHd }) } const histroySelected = operationState && operationState.histroy.select @@ -52,7 +67,7 @@ const VideoOperation = ({ <> { operationState ? - operationState.control.select ? + operationState?.control?.select ? : operationState.talk.select ? { - const [selectedTimeRange, setSelectedTimeRange] = useState(histroyTime) + const [selectedTimeRange, setSelectedTimeRange] = useState(histroyTime) - useEffect(() => { - if (!selectedTimeRange.length) { - setSelectedTimeRange([moment().subtract(72, 'hours').format(timeFormat), moment().format(timeFormat)]) - } - }, []) + useEffect(() => { + if (!selectedTimeRange.length) { + setSelectedTimeRange([moment().subtract(72, 'hours').format(timeFormat), moment().format(timeFormat)]) + } + }, []) - const ToastInCustomContainer = ToastFactory.create({ - getPopupContainer: () => document.getElementById('vcmp_videoplay'), - }); + const ToastInCustomContainer = ToastFactory.create({ + getPopupContainer: () => document.getElementById('vcmp_videoplay'), + }); - return ( -
-
- { - setSelectedTimeRange(timeRange) - }} - style={{ width: '100%' }} - // disabledDate={(date, options) => { - // const { rangeStart, rangeEnd } = options; - // // console.log(date, options); - // if (!rangeStart && !rangeEnd) { - // return false - // } - // if (rangeStart) { - // return Math.abs(moment(date).diff(moment(rangeStart), 'days')) > 3 - // } - // if (rangeEnd) { - // return Math.abs(moment(date).diff(moment(rangeEnd), 'days')) > 3 - // } - // }} - // disabledTime={(date, type) => { - // console.log(date, type); - // }} - /> -
-
- - - 最长时间跨度不超过72小时 - - - -
{ - close() - }} - style={{ - cursor: 'pointer', height: 32, width: 56, lineHeight: '32px', borderRadius: 2, - textAlign: 'center', background: '#fff', color: 'rgba(0, 0, 0, 0.65)' - }} - >取消
-
{ - if (selectedTimeRange.length == 2 && selectedTimeRange.every(t => t)) { - if (Math.abs(moment(selectedTimeRange[0]).diff(moment(selectedTimeRange[1]), 'hours')) > 72) { - ToastInCustomContainer.destroyAll() - return ToastInCustomContainer.error('所选时间超过 72 小时') - } - setHistroyTime(selectedTimeRange) - setProcessDisX(0) - close() - } - }} - style={{ - cursor: 'pointer', height: 32, width: 56, lineHeight: '32px', borderRadius: 2, - textAlign: 'center', background: '#1859C1', color: '#fff' - }} - >播放
- - -
-
- ) + return ( +
+
+ { + setSelectedTimeRange(timeRange) + }} + style={{ width: '100%' }} + // disabledDate={(date, options) => { + // const { rangeStart, rangeEnd } = options; + // // console.log(date, options); + // if (!rangeStart && !rangeEnd) { + // return false + // } + // if (rangeStart) { + // return Math.abs(moment(date).diff(moment(rangeStart), 'days')) > 3 + // } + // if (rangeEnd) { + // return Math.abs(moment(date).diff(moment(rangeEnd), 'days')) > 3 + // } + // }} + // disabledTime={(date, type) => { + // console.log(date, type); + // }} + /> +
+
+ + + 最长时间跨度不超过72小时 + + + +
{ + close() + }} + style={{ + cursor: 'pointer', height: 32, width: 56, lineHeight: '32px', borderRadius: 2, + textAlign: 'center', background: '#fff', color: 'rgba(0, 0, 0, 0.65)' + }} + >取消
+
{ + if (selectedTimeRange.length == 2 && selectedTimeRange.every(t => t)) { + if (Math.abs(moment(selectedTimeRange[0]).diff(moment(selectedTimeRange[1]), 'hours')) > 72) { + ToastInCustomContainer.destroyAll() + return ToastInCustomContainer.error('所选时间超过 72 小时') + } + setHistroyTime(selectedTimeRange) + playBackTime.current = selectedTimeRange + setProcessDisX(0) + close() + } + }} + style={{ + cursor: 'pointer', height: 32, width: 56, lineHeight: '32px', borderRadius: 2, + textAlign: 'center', background: '#1859C1', color: '#fff' + }} + >播放
+ + +
+
+ ) } function mapStateToProps (state) { - const { auth } = state; - return { - user: auth.user, - }; + const { auth } = state; + return { + user: auth.user, + }; } export default connect(mapStateToProps)(VideoOperationHistroyTime); \ No newline at end of file diff --git a/code/VideoAccess-VCMP/web/client/src/components/videoPlayer/videoOperationTalk.jsx b/code/VideoAccess-VCMP/web/client/src/components/videoPlayer/videoOperationTalk.jsx index ac80ba3..cc8865c 100644 --- a/code/VideoAccess-VCMP/web/client/src/components/videoPlayer/videoOperationTalk.jsx +++ b/code/VideoAccess-VCMP/web/client/src/components/videoPlayer/videoOperationTalk.jsx @@ -58,7 +58,6 @@ const VideoOperationTalk = ({ } } const vcmpVideo = document.getElementById('vcmp_videoplay')?.offsetHeight; - console.log(vcmpVideo); return (
{ + console.log(sizeWh); const [jessibuca, setjessibuca] = useState(null) + const [player, setPlayer] = useState(null) const [isPlaying, setIsPlaying] = useState(false) const [operationState, setoperationState] = useState() const [voiceDisY, setVoiceDisY] = useState(0) @@ -60,22 +76,27 @@ const VideoPlay = ({ const [histroyTime, setHistroyTime] = useState([]) const [histroyBegain, setHistroyBegain] = useState() const [roll, setRoll] = useState()//滚动备注 - const [size, setSize] = useState(sizeWh) //视频本身和父级尺寸 + const [photo, setPhoto] = useState(1)//滚动备注 + const [size, setSize] = useState({ parentWidth: sizeWh?.parentWidth, parentHeight: sizeWh?.parentHeight, width: width || sizeWh?.parentWidth, height: height || sizeWh?.parentHeight }) //视频本身和父级尺寸 const [resolution, setResolution] = useState('sd') // 标清 sd 高清 hd - // const [frequency, setFrequency] = useState(true) + const [videoMask, setVideoMask] = useState(true) // 标清 sd 高清 hd // 标记萤石操作中，等待ifream返回信息后清空 const [yingshiPrepare, setYingshiPrepare] = useState('') const operationRef = useRef(null) + const Begain = useRef() + const playBackTime = useRef([]) + const quanp = useRef() const processChangeTimeoutRef = useRef(null) // 标记萤石操作中，等待ifream返回信息后清空 const yingshiPrepareRef = useRef(null) + const playState = useRef(false) //播放状态 useEffect(() => { setRoll(false) - }, [resolution]); + }, [resolution,]); useEffect(() => { @@ -83,14 +104,15 @@ const VideoPlay = ({ }, [changeData?.hdChecked]) const changeSelectState = (key) => { - if (videoObj.type == 'yingshi' && yingshiPrepareRef.current) { - return - } + // if (videoObj.type == 'yingshi' && yingshiPrepareRef.current) { + // return + // } const nextOperationState = JSON.parse(JSON.stringify(operationRef.current)) if (key == 'histroy' && nextOperationState.histroy.select) { // 取消历史播放 setProcessDisX(0) setHistroyTime([]) + playBackTime.current = [] } for (let k in nextOperationState) { @@ -104,6 +126,7 @@ const VideoPlay = ({ if (operationRef.current.histroy.select && histroyTime.length == 0) { setHistroyTime([moment().subtract(72, 'hours').format(timeFormat), moment().format(timeFormat)]) + playBackTime.current = [moment().subtract(72, 'hours').format(timeFormat), moment().format(timeFormat)] } setoperationState(nextOperationState) } @@ -124,14 +147,20 @@ const VideoPlay = ({ }, { key: 'fullScreen', click: () => { - if (yingshiPrepareRef.current) { - return - } changeSelectState('fullScreen') - let player = document.getElementById('vcmp_videoplay') - console.log(player); + let videoplay = document.getElementById('vcmp_videoplay') if (screenfull.isEnabled) { - screenfull.toggle(player); + screenfull.toggle(videoplay); + if (videoObj?.type == 'yingshi') { + console.log(operationRef.current); + if (operationRef.current?.fullScreen.select) { + player.reSize(screen.width, screen.height); + } else { + player.reSize(size?.width, size?.height); + } + } + + } } }, { @@ -139,18 +168,21 @@ const VideoPlay = ({ hide: !Boolean(videoObj.replayUrl), click: () => { changeSelectState('histroy') - yingshiPrepareRef.current = 'play' - setYingshiPrepare('play') + player.stop().then(() => { + if (operationRef.current?.histroy?.select && Begain.current) { + player.play({ url: `${videoObj.replayUrl}?begin=${moment(Begain.current).format("YYYYMMDDHHmmss")}&end=${moment(playBackTime.current[1]).format("YYYYMMDDHHmmss")}` }) + } + playState.current = false + }) } },] + // useEffect(() => { + // createPlay() + // }, [quanp.current]) + useEffect(() => { - if (videoObj.type == 'yingshi') { - yingshiPrepareRef.current = 'play' - setYingshiPrepare('play') - } else { - createJessibuca() - } + createPlay() let nextOperationState = {} for (let p of operation) { nextOperationState[p.key] = { @@ -169,46 +201,40 @@ const VideoPlay = ({ changeSelectState('fullScreen') } }); - - // 萤石 ifream 信息监听 - const listenYingshiMessage = async (e) => { - const { data, origin } = e - if (origin !== 'https://open.ys7.com') return - if (data.type == "handleSuccess") { - setRoll(true) - if (yingshiPrepareRef.current == 'play') { - setIsPlaying(true) - } - } else if (data.type == yingshiOpenSoundKey && data.code == 0) { - if (yingshiPrepareRef.current == yingshiOpenSoundKey) { - setVoiceDisY(30) - } - } if (data.type == yingshiCloseSoundKey && data.code == 0) { - if (yingshiPrepareRef.current == yingshiCloseSoundKey) { - setVoiceDisY(0) - } - } - yingshiPrepareRef.current = null - setYingshiPrepare(null) - } - if (videoObj.type == 'yingshi') { - window.addEventListener('message', listenYingshiMessage); - } + // const resize_ = () => { + // const VideoLocal = document.getElementById('vcmp_videoplay') + // setSize({ parentWidth: VideoLocal?.clientWidth, parentHeight: VideoLocal?.clientHeight, width: VideoLocal?.clientWidth, height: VideoLocal?.clientHeight }) + + // } + // if (local) { + // window.addEventListener('resize', resize_); //只要窗口殴大小发生像素变化就会触发 + // } return () => { - window.removeEventListener('message', listenYingshiMessage); + if (jessibuca) { + jessibuca.destroy() + } + if (player && videoObj.type == 'yingshi' && player) { + console.log(11111111111); + player.stop() + } + // if (local) { + // window.removeEventListener('resize', resize_); + // } } }, []) useEffect(() => { if (histroyTime.length) { setHistroyBegain(histroyTime[0]) + Begain.current = histroyTime[0] document.getElementById('process_point').style.left = 0 + 'px'; // 重置进度条的位置 if (videoObj.type == 'yingshi') { - yingshiPrepareRef.current = 'play' - setYingshiPrepare('play') + // yingshiPrepareRef.current = 'play' + // setYingshiPrepare('play') } } else { setHistroyBegain(null) + Begain.current == null } }, [histroyTime]) useEffect(() => { @@ -227,19 +253,32 @@ const VideoPlay = ({ ) .format(timeFormat) ) + Begain.current = moment(histroyTime[0]) + .add( + Math.abs(moment(histroyTime[0]).diff(moment(histroyTime[1]), 'seconds')) * (processDisX / document.getElementById('process_point').parentElement.offsetWidth), + 'second' + ) + .format(timeFormat) if (videoObj.type == 'yingshi') { - yingshiPrepareRef.current = 'play' - setYingshiPrepare('play') + // yingshiPrepareRef.current = 'play' + // setYingshiPrepare('play') } }, 300) + + player.stop().then(() => { + player.play({ url: `${videoObj.replayUrl}?begin=${moment(Begain.current).format("YYYYMMDDHHmmss")}&end=${moment(playBackTime.current[1]).format("YYYYMMDDHHmmss")}` }) + playState.current = false + }) } else { // 随播放时间变化更新进度条 document.getElementById('process_point').style.left = processDisX - 4.5 + 'px' } + } }, [processDisX]) - const createJessibuca = async () => { + const createPlay = async () => { + console.log(size); if (videoObj.type != 'yingshi') { try { // const inviteRes = await IotVideoServerRequest.get(VideoServeApi.invite, { @@ -247,11 +286,11 @@ const VideoPlay = ({ // channel: '36011200581314002900' // }).then(res => { // console.log(res); - // }, err => { + // }, err => {. // console.log(err); // }) - const inviteRes_ = await request.get(`${iotVideoServer}/api/gb28181/invite?id=${videoObj.topSerialNo}&channel=${videoObj.serialNo}`) + const inviteRes_ = await request.get(`${iotVideoServer}/api/gb28181/invite?id=${videoObj.topSerialNo}&channel=${videoObj.serialNo}`) } catch (error) { console.log(error.response); } @@ -277,17 +316,29 @@ const VideoPlay = ({ }); setjessibuca(jessibuca) play({ jessibuca }) + } else { + const player = new EZUIKit.EZUIKitPlayer({ + id: containerId, // 视频容器ID + accessToken: videoObj?.yingshiToken, + url: videoObj.playUrlSd, + width: size?.width, + height: size?.height, + handleSuccess: () => { //播放成功 + setRoll(true) + setVideoMask(false) + playState.current = true + }, + handleError: (e) => { //播放失败 + console.log(e, '播放失败'); + }, + }) + setPlayer(player) } } - const yingshiOperation = (operation) => { - document.getElementById(containerId).contentWindow.postMessage(operation, yingshiUrl) - // setIsPlaying(operation == 'play') - } - const play = (params) => { if (videoObj.type == 'yingshi') { - yingshiOperation('play') + } else if ((params.jessibuca || jessibuca) && videoObj.playUrlSd) { const jes = params.jessibuca || jessibuca jes.play(videoObj.playUrlSd); @@ -296,8 +347,8 @@ const VideoPlay = ({ } const pause = () => { - if (videoObj.type == 'yingshi') { - // yingshiOperation('stop') + if (videoObj.type == 'yingshi' && player) { + 5 } else if (jessibuca) { jessibuca.pause(); setIsPlaying(false) @@ -308,7 +359,7 @@ const VideoPlay = ({ if (videoObj.type == 'yingshi') { yingshiPrepareRef.current = yingshiCloseSoundKey setYingshiPrepare(yingshiCloseSoundKey) - yingshiOperation(yingshiCloseSoundKey) + // yingshiOperation(yingshiCloseSoundKey) } } @@ -316,92 +367,94 @@ const VideoPlay = ({ if (videoObj.type == 'yingshi') { yingshiPrepareRef.current = yingshiOpenSoundKey setYingshiPrepare(yingshiOpenSoundKey) - yingshiOperation(yingshiOpenSoundKey) + // yingshiOperation(yingshiOpenSoundKey) } } useEffect(() => { - if (local) { - //弹框视频自适应 - const VideoLocal = document.getElementById('video_local') - setSize({ parentWidth: VideoLocal?.clientWidth, parentHeight: '100%', width: width, height: height }) - } else { - setSize(sizeWh) - } - }, [sizeWh]) - useEffect(() => { - if (size?.width || size?.height) { - // if (size?.parentWidth >= size?.width && size?.parentHeight >= size?.height) { - if (size?.width && size?.height) { - if (size?.height / size?.width < 0.55 || size?.height / size?.width > 0.57) { - if (size?.width / 16 > size?.height / 9) { - setSize({ ...size, width: (size?.height / 9) * 16, }) - } else { - setSize({ ...size, height: (size?.width / 16) * 9 }) - } - } - } else if (size?.width) { - setSize({ ...size, height: (size?.width / 16) * 9, }) - } else if (size?.height) { - setSize({ ...size, width: (size?.height / 9) * 16, }) - } - // } else { - // setSize({ ...size, width: size?.parentWidth, height: size?.parentHeight }) - // } - } else { - if (size && size?.width / 16 > size?.height / 9) { - setSize({ ...size, height: size?.parentHeight }) - } else { - setSize({ ...size, width: size?.parentWidth, }) + if (!operationRef.current?.fullScreen.select) { + setSize({ parentWidth: sizeWh?.parentWidth, parentHeight: sizeWh?.parentHeight, width: width || sizeWh?.parentWidth, height: height || sizeWh?.parentHeight }) + if (videoObj.type == 'yingshi' && player && IsSize == !'true') { + console.log(11111111111); + player.stop().then(() => { + player.play().then(() => { + player.reSize(width || sizeWh?.parentWidth, height || sizeWh?.parentHeight) + }) + + }) + } } - }, [size]) + }, [sizeWh]) + + // useEffect(() => { + // if (IsSize == 'true') { + // console.log(size?.parentWidth >= size?.width && size?.parentHeight >= size?.height); + // if (size?.parentWidth >= size?.width && size?.parentHeight >= size?.height) { + // if (size?.height / size?.width >= 0.55 && size?.height / size?.width <= 0.57) { + + // } else { + // console.warn('宽高不符合尺寸要求，故返回合适的尺寸') + // if (size?.width / 16 > size?.height / 9) { + // setSize({ ...size, width: (size?.height / 9) * 16, }) + // } else { + // setSize({ ...size, height: (size?.width / 16) * 9 }) + // } + // } + // } else { + // console.warn('传递宽高参数有误，请确认容器大小范围内') + // if (size?.parentWidth / 16 > size?.parentHeight / 9) { + // setSize({ ...size, width: (size?.parentHeight / 9) * 16, height: size?.parentHeight }) + // } else { + // setSize({ ...size, width: size?.parentWidth, height: (size?.parentWidth / 16) * 9 }) + // } + // } + // } + // }, [sizeWh]) return ( <> -
-
+
+
{/* 顶部信息 */} - { 320 ? } + player={player} + resolution={resolution} + playState={playState.current} + /> : ""} {/* 视频内容 */} - {videoObj.type == 'yingshi' ? -