free-sun
/
FS-IOT
15
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Merge branch 'dev_trial' of https://gitea.anxinyun.cn/free-sun/FS-IOT into dev_trial

release_1.1.2
巴林闲侠 2 years ago
parent
03c69cedc8 da90aa7fc2
commit
98dcbe6308
10 changed files with 336 additions and 260 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 27
      code/VideoAccess-VCMP/web/client/src/components/videoPlayer/videoOperation.jsx
  2. 1
      code/VideoAccess-VCMP/web/client/src/components/videoPlayer/videoOperationHistroyTime.jsx
  3. 1
      code/VideoAccess-VCMP/web/client/src/components/videoPlayer/videoOperationTalk.jsx
  4. 302
      code/VideoAccess-VCMP/web/client/src/components/videoPlayer/videoPlay.jsx
  5. 12
      code/VideoAccess-VCMP/web/client/src/components/videoPlayer/videoPlayModal.jsx
  6. 22
      code/VideoAccess-VCMP/web/client/src/components/videoPlayer/voiceHeader.jsx
  7. 6
      code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/cascadeCamera.jsx
  8. 1
      code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/containers/camera.jsx
  9. 13
      code/VideoAccess-VCMP/web/client/src/sections/monitor/containers/videoPlayCross.jsx
  10. 3
      code/VideoAccess-VCMP/web/package.json

27
code/VideoAccess-VCMP/web/client/src/components/videoPlayer/videoOperation.jsx
View File

@ -9,6 +9,7 @@ import VideoOperationHistroyTime from './videoOperationHistroyTime'
import VideoOperationHistroyProcess from "./videoOperationHistroyProcess"; import VideoOperationHistroyProcess from "./videoOperationHistroyProcess";
import { IconPause, IconPlay } from '@douyinfe/semi-icons'; import { IconPause, IconPlay } from '@douyinfe/semi-icons';
import './videoPlay.less'; import './videoPlay.less';
import { log } from "ezuikit-js";
const timeFormat = 'YYYY-MM-DD HH:mm:ss' const timeFormat = 'YYYY-MM-DD HH:mm:ss'
@ -26,6 +27,9 @@ const VideoOperation = ({
videoObj, videoObj,
setYingshiPrepare, yingshiPrepareRef, setYingshiPrepare, yingshiPrepareRef,
slideDown, slideDown,
player,
// setPlayer,
playState,
}) => { }) => {
const [showTimeSelect, setShowTimeSelect] = useState(false) const [showTimeSelect, setShowTimeSelect] = useState(false)
@ -36,14 +40,25 @@ const VideoOperation = ({
} }
const changeResolution = () => { const changeResolution = () => {
if (yingshiPrepareRef.current) { // if (yingshiPrepareRef.current) {
return // return
} // }
if (videoObj.type == 'yingshi') { if (videoObj.type == 'yingshi') {
yingshiPrepareRef.current = 'yingshi' // yingshiPrepareRef.current = 'yingshi'
setYingshiPrepare('play') // 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') setResolution(resolution == 'sd' ? 'hd' : 'sd')
// setPlayer({ url: resolution == 'sd' ? videoObj?.playUrlSd : videoObj?.playUrlHd })
} }
const histroySelected = operationState && operationState.histroy.select const histroySelected = operationState && operationState.histroy.select
@ -52,7 +67,7 @@ const VideoOperation = ({
<> <>
{ {
operationState ? operationState ?
operationState.control.select ? operationState?.control?.select ?
<VideoOperationCloudControl videoObj={videoObj} /> : <VideoOperationCloudControl videoObj={videoObj} /> :
operationState.talk.select ? operationState.talk.select ?
<VideoOperationTalk <VideoOperationTalk

1
code/VideoAccess-VCMP/web/client/src/components/videoPlayer/videoOperationHistroyTime.jsx
View File

@ -76,6 +76,7 @@ const VideoOperationHistroyTime = ({ close, histroyTime, setHistroyTime, setProc
return ToastInCustomContainer.error('所选时间超过 72 小时') return ToastInCustomContainer.error('所选时间超过 72 小时')
} }
setHistroyTime(selectedTimeRange) setHistroyTime(selectedTimeRange)
playBackTime.current = selectedTimeRange
setProcessDisX(0) setProcessDisX(0)
close() close()
} }

1
code/VideoAccess-VCMP/web/client/src/components/videoPlayer/videoOperationTalk.jsx
View File

@ -58,7 +58,6 @@ const VideoOperationTalk = ({
} }
} }
const vcmpVideo = document.getElementById('vcmp_videoplay')?.offsetHeight; const vcmpVideo = document.getElementById('vcmp_videoplay')?.offsetHeight;
console.log(vcmpVideo);
return ( return (
<div style={{ <div style={{

302
code/VideoAccess-VCMP/web/client/src/components/videoPlayer/videoPlay.jsx
View File

@ -4,16 +4,19 @@ import screenfull from 'screenfull';
import moment from "moment"; import moment from "moment";
import request from 'superagent' import request from 'superagent'
import { VideoServeApi, IotVideoServerRequest, checkAudioVideo } from '$utils' import { VideoServeApi, IotVideoServerRequest, checkAudioVideo } from '$utils'
import { ToastFactory, } from '@douyinfe/semi-ui'; import { Button, ToastFactory, } from '@douyinfe/semi-ui';
import VideoHeader from './voiceHeader' import VideoHeader from './voiceHeader'
import VideoOperation from './videoOperation' import VideoOperation from './videoOperation'
import './videoPlay.less'; import './videoPlay.less';
import EZUIKit from 'ezuikit-js'
import { done } from "nprogress";
const timeFormat = 'YYYY-MM-DD HH:mm:ss' const timeFormat = 'YYYY-MM-DD HH:mm:ss'
const yingshiUrl = 'https://open.ys7.com/ezopen/h5/iframe' const yingshiUrl = 'https://open.ys7.com/ezopen/h5/iframe'
const yingshiCloseSoundKey = 'closeSound' const yingshiCloseSoundKey = 'closeSound'
const yingshiOpenSoundKey = 'openSound' const yingshiOpenSoundKey = 'openSound'
const VideoPlay = ({ const VideoPlay = ({
height, width, containerId = 'myPlayer', height, width, containerId = 'myPlayer',
// playUrl, // playUrl,
@ -30,11 +33,22 @@ const VideoPlay = ({
// audio: false, // audio: false,
// serialNo: 'G75922040', // 设备序列号 必须 // serialNo: 'G75922040', // 设备序列号 必须
// channelNo: 1, // // channelNo: 1, //
// yingshiToken: 'at.3j6eyqbn0g5xvcut73v0rzdu1nh0gnxx-4ua03m82o9-12u1t9g-rtzndpyds', // 萤石必须 // yingshiToken: 'at.6nn6duwz8g8gbd919as9a6ea82bmn31x-709fnp7s3k-13q3v7e-mlov7lysf', // 萤石必须
// playUrlSd: 'ezopen://open.ys7.com/G75922040/1.live', // 必须 // playUrlSd: 'ezopen://open.ys7.com/G75922040/1.live', // 必须
// // playUrl: 'ws://221.230.55.27:8081/jessica/34020000001110000077/34020000001310000003', // // playUrl: 'ws://221.230.55.27:8081/jessica/34020000001110000077/34020000001310000003',
// playUrlHd: 'ezopen://open.ys7.com/G75922040/1.hd.live', // playUrlHd: 'ezopen://open.ys7.com/G75922040/1.hd.live',
// // replayUrl: 'ezopen://open.ys7.com/G75922040/1.rec', // replayUrl: 'ezopen://open.ys7.com/G75922040/1.hd.local.rec',
// },
// videoObj = {
// type: 'yingshi',
// audio: false,
// serialNo: 'G56385051', // 设备序列号 必须
// channelNo: 1, //
// yingshiToken: 'at.6nn6duwz8g8gbd919as9a6ea82bmn31x-709fnp7s3k-13q3v7e-mlov7lysf', // 萤石必须
// playUrlSd: 'ezopen://open.ys7.com/G56384814/1.live', // 必须
// // playUrl: 'ws://221.230.55.27:8081/jessica/34020000001110000077/34020000001310000003',
// playUrlHd: 'ezopen://open.ys7.com/G56384814/1.hd.live',
// replayUrl: 'ezopen://open.ys7.com/G56384814/1.hd.local.rec',
// }, // },
// videoObj = { // videoObj = {
@ -51,7 +65,9 @@ const VideoPlay = ({
iotVideoServer, iotVideoServer,
local, //是否本地调用视频 local, //是否本地调用视频
}) => { }) => {
console.log(sizeWh);
const [jessibuca, setjessibuca] = useState(null) const [jessibuca, setjessibuca] = useState(null)
const [player, setPlayer] = useState(null)
const [isPlaying, setIsPlaying] = useState(false) const [isPlaying, setIsPlaying] = useState(false)
const [operationState, setoperationState] = useState() const [operationState, setoperationState] = useState()
const [voiceDisY, setVoiceDisY] = useState(0) const [voiceDisY, setVoiceDisY] = useState(0)
@ -60,22 +76,27 @@ const VideoPlay = ({
const [histroyTime, setHistroyTime] = useState([]) const [histroyTime, setHistroyTime] = useState([])
const [histroyBegain, setHistroyBegain] = useState() const [histroyBegain, setHistroyBegain] = useState()
const [roll, setRoll] = 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 [resolution, setResolution] = useState('sd') // 标清 sd 高清 hd
// const [frequency, setFrequency] = useState(true) const [videoMask, setVideoMask] = useState(true) // 标清 sd 高清 hd
// 标记萤石操作中，等待ifream返回信息后清空 // 标记萤石操作中，等待ifream返回信息后清空
const [yingshiPrepare, setYingshiPrepare] = useState('') const [yingshiPrepare, setYingshiPrepare] = useState('')
const operationRef = useRef(null) const operationRef = useRef(null)
const Begain = useRef()
const playBackTime = useRef([])
const quanp = useRef()
const processChangeTimeoutRef = useRef(null) const processChangeTimeoutRef = useRef(null)
// 标记萤石操作中，等待ifream返回信息后清空 // 标记萤石操作中，等待ifream返回信息后清空
const yingshiPrepareRef = useRef(null) const yingshiPrepareRef = useRef(null)
const playState = useRef(false) //播放状态
useEffect(() => { useEffect(() => {
setRoll(false) setRoll(false)
}, [resolution]); }, [resolution,]);
useEffect(() => { useEffect(() => {
@ -83,14 +104,15 @@ const VideoPlay = ({
}, [changeData?.hdChecked]) }, [changeData?.hdChecked])
const changeSelectState = (key) => { const changeSelectState = (key) => {
if (videoObj.type == 'yingshi' && yingshiPrepareRef.current) { // if (videoObj.type == 'yingshi' && yingshiPrepareRef.current) {
return // return
} // }
const nextOperationState = JSON.parse(JSON.stringify(operationRef.current)) const nextOperationState = JSON.parse(JSON.stringify(operationRef.current))
if (key == 'histroy' && nextOperationState.histroy.select) { if (key == 'histroy' && nextOperationState.histroy.select) {
// 取消历史播放 // 取消历史播放
setProcessDisX(0) setProcessDisX(0)
setHistroyTime([]) setHistroyTime([])
playBackTime.current = []
} }
for (let k in nextOperationState) { for (let k in nextOperationState) {
@ -104,6 +126,7 @@ const VideoPlay = ({
if (operationRef.current.histroy.select && histroyTime.length == 0) { if (operationRef.current.histroy.select && histroyTime.length == 0) {
setHistroyTime([moment().subtract(72, 'hours').format(timeFormat), moment().format(timeFormat)]) setHistroyTime([moment().subtract(72, 'hours').format(timeFormat), moment().format(timeFormat)])
playBackTime.current = [moment().subtract(72, 'hours').format(timeFormat), moment().format(timeFormat)]
} }
setoperationState(nextOperationState) setoperationState(nextOperationState)
} }
@ -124,14 +147,20 @@ const VideoPlay = ({
}, { }, {
key: 'fullScreen', key: 'fullScreen',
click: () => { click: () => {
if (yingshiPrepareRef.current) {
return
}
changeSelectState('fullScreen') changeSelectState('fullScreen')
let player = document.getElementById('vcmp_videoplay') let videoplay = document.getElementById('vcmp_videoplay')
console.log(player);
if (screenfull.isEnabled) { 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), hide: !Boolean(videoObj.replayUrl),
click: () => { click: () => {
changeSelectState('histroy') changeSelectState('histroy')
yingshiPrepareRef.current = 'play' player.stop().then(() => {
setYingshiPrepare('play') 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(() => { useEffect(() => {
if (videoObj.type == 'yingshi') { createPlay()
yingshiPrepareRef.current = 'play'
setYingshiPrepare('play')
} else {
createJessibuca()
}
let nextOperationState = {} let nextOperationState = {}
for (let p of operation) { for (let p of operation) {
nextOperationState[p.key] = { nextOperationState[p.key] = {
@ -169,46 +201,40 @@ const VideoPlay = ({
changeSelectState('fullScreen') changeSelectState('fullScreen')
} }
}); });
// const resize_ = () => {
// const VideoLocal = document.getElementById('vcmp_videoplay')
// setSize({ parentWidth: VideoLocal?.clientWidth, parentHeight: VideoLocal?.clientHeight, width: VideoLocal?.clientWidth, height: VideoLocal?.clientHeight })
// 萤石 ifream 信息监听 // }
const listenYingshiMessage = async (e) => { // if (local) {
const { data, origin } = e // window.addEventListener('resize', resize_); //只要窗口殴大小发生像素变化就会触发
if (origin !== 'https://open.ys7.com') return // }
if (data.type == "handleSuccess") { return () => {
setRoll(true) if (jessibuca) {
if (yingshiPrepareRef.current == 'play') { jessibuca.destroy()
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') { if (player && videoObj.type == 'yingshi' && player) {
window.addEventListener('message', listenYingshiMessage); console.log(11111111111);
player.stop()
} }
return () => { // if (local) {
window.removeEventListener('message', listenYingshiMessage); // window.removeEventListener('resize', resize_);
// }
} }
}, []) }, [])
useEffect(() => { useEffect(() => {
if (histroyTime.length) { if (histroyTime.length) {
setHistroyBegain(histroyTime[0]) setHistroyBegain(histroyTime[0])
Begain.current = histroyTime[0]
document.getElementById('process_point').style.left = 0 + 'px'; // 重置进度条的位置 document.getElementById('process_point').style.left = 0 + 'px'; // 重置进度条的位置
if (videoObj.type == 'yingshi') { if (videoObj.type == 'yingshi') {
yingshiPrepareRef.current = 'play' // yingshiPrepareRef.current = 'play'
setYingshiPrepare('play') // setYingshiPrepare('play')
} }
} else { } else {
setHistroyBegain(null) setHistroyBegain(null)
Begain.current == null
} }
}, [histroyTime]) }, [histroyTime])
useEffect(() => { useEffect(() => {
@ -227,19 +253,32 @@ const VideoPlay = ({
) )
.format(timeFormat) .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') { if (videoObj.type == 'yingshi') {
yingshiPrepareRef.current = 'play' // yingshiPrepareRef.current = 'play'
setYingshiPrepare('play') // setYingshiPrepare('play')
} }
}, 300) }, 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 { } else {
// 随播放时间变化更新进度条 // 随播放时间变化更新进度条
document.getElementById('process_point').style.left = processDisX - 4.5 + 'px' document.getElementById('process_point').style.left = processDisX - 4.5 + 'px'
} }
} }
}, [processDisX]) }, [processDisX])
const createJessibuca = async () => { const createPlay = async () => {
console.log(size);
if (videoObj.type != 'yingshi') { if (videoObj.type != 'yingshi') {
try { try {
// const inviteRes = await IotVideoServerRequest.get(VideoServeApi.invite, { // const inviteRes = await IotVideoServerRequest.get(VideoServeApi.invite, {
@ -247,7 +286,7 @@ const VideoPlay = ({
// channel: '36011200581314002900' // channel: '36011200581314002900'
// }).then(res => { // }).then(res => {
// console.log(res); // console.log(res);
// }, err => { // }, err => {.
// console.log(err); // console.log(err);
// }) // })
@ -277,17 +316,29 @@ const VideoPlay = ({
}); });
setjessibuca(jessibuca) setjessibuca(jessibuca)
play({ 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) => { const play = (params) => {
if (videoObj.type == 'yingshi') { if (videoObj.type == 'yingshi') {
yingshiOperation('play')
} else if ((params.jessibuca || jessibuca) && videoObj.playUrlSd) { } else if ((params.jessibuca || jessibuca) && videoObj.playUrlSd) {
const jes = params.jessibuca || jessibuca const jes = params.jessibuca || jessibuca
jes.play(videoObj.playUrlSd); jes.play(videoObj.playUrlSd);
@ -296,8 +347,8 @@ const VideoPlay = ({
} }
const pause = () => { const pause = () => {
if (videoObj.type == 'yingshi') { if (videoObj.type == 'yingshi' && player) {
// yingshiOperation('stop') 5
} else if (jessibuca) { } else if (jessibuca) {
jessibuca.pause(); jessibuca.pause();
setIsPlaying(false) setIsPlaying(false)
@ -308,7 +359,7 @@ const VideoPlay = ({
if (videoObj.type == 'yingshi') { if (videoObj.type == 'yingshi') {
yingshiPrepareRef.current = yingshiCloseSoundKey yingshiPrepareRef.current = yingshiCloseSoundKey
setYingshiPrepare(yingshiCloseSoundKey) setYingshiPrepare(yingshiCloseSoundKey)
yingshiOperation(yingshiCloseSoundKey) // yingshiOperation(yingshiCloseSoundKey)
} }
} }
@ -316,92 +367,94 @@ const VideoPlay = ({
if (videoObj.type == 'yingshi') { if (videoObj.type == 'yingshi') {
yingshiPrepareRef.current = yingshiOpenSoundKey yingshiPrepareRef.current = yingshiOpenSoundKey
setYingshiPrepare(yingshiOpenSoundKey) setYingshiPrepare(yingshiOpenSoundKey)
yingshiOperation(yingshiOpenSoundKey) // yingshiOperation(yingshiOpenSoundKey)
} }
} }
useEffect(() => { useEffect(() => {
if (local) { if (!operationRef.current?.fullScreen.select) {
//弹框视频自适应 setSize({ parentWidth: sizeWh?.parentWidth, parentHeight: sizeWh?.parentHeight, width: width || sizeWh?.parentWidth, height: height || sizeWh?.parentHeight })
const VideoLocal = document.getElementById('video_local') if (videoObj.type == 'yingshi' && player && IsSize == !'true') {
setSize({ parentWidth: VideoLocal?.clientWidth, parentHeight: '100%', width: width, height: height }) console.log(11111111111);
} else { player.stop().then(() => {
setSize(sizeWh) player.play().then(() => {
player.reSize(width || sizeWh?.parentWidth, height || sizeWh?.parentHeight)
})
})
}
} }
}, [sizeWh]) }, [sizeWh])
useEffect(() => {
if (size?.width || size?.height) { // 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?.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?.height / size?.width < 0.55 || size?.height / size?.width > 0.57) {
if (size?.width / 16 > size?.height / 9) { // } else {
setSize({ ...size, width: (size?.height / 9) * 16, }) // console.warn('宽高不符合尺寸要求，故返回合适的尺寸')
} else { // if (size?.width / 16 > size?.height / 9) {
setSize({ ...size, height: (size?.width / 16) * 9 }) // setSize({ ...size, width: (size?.height / 9) * 16, })
}
}
} else if (size?.width) {
setSize({ ...size, height: (size?.width / 16) * 9, })
} else if (size?.height) {
setSize({ ...size, width: (size?.height / 9) * 16, })
}
// } else { // } else {
// setSize({ ...size, width: size?.parentWidth, height: size?.parentHeight }) // setSize({ ...size, height: (size?.width / 16) * 9 })
// } // }
} else { // }
if (size && size?.width / 16 > size?.height / 9) { // } else {
setSize({ ...size, height: size?.parentHeight }) // console.warn('传递宽高参数有误，请确认容器大小范围内')
} else { // if (size?.parentWidth / 16 > size?.parentHeight / 9) {
setSize({ ...size, width: size?.parentWidth, }) // setSize({ ...size, width: (size?.parentHeight / 9) * 16, height: size?.parentHeight })
} // } else {
} // setSize({ ...size, width: size?.parentWidth, height: (size?.parentWidth / 16) * 9 })
}, [size]) // }
// }
// }
// }, [sizeWh])
return ( return (
<> <>
<div className="vcmp_videoplay" style={{ width: IsSize == 'true' ? size?.parentWidth : width || '100%', height: IsSize == 'true' ? size?.parentHeight : height || '100%', backgroundColor: 'black', overflow: 'hidden', display: 'flex', alignItems: 'center', justifyContent: 'center', }}> <div className="vcmp_videoplay" style={{ width: size?.parentWidth || '100%', height: size?.parentHeight || '100%', backgroundColor: 'black', overflow: 'hidden', display: 'flex', alignItems: 'center', justifyContent: 'center', }}>
<div id="vcmp_videoplay" style={{ position: 'relative', height: IsSize == 'true' ? size?.height : height || '100%', width: IsSize == 'true' ? size?.width : width || '100%', minWidth: 400, minHeight: 225, overflow: 'hidden' }}> <div id="vcmp_videoplay" style={{ position: 'relative', height: size?.height || '100%', width: size?.width || '100%', minWidth: 240, minHeight: 135, overflow: 'hidden' }}>
{/* 顶部信息 */} {/* 顶部信息 */}
{<VideoHeader {size?.parentWidth > 320 ? <VideoHeader
operationState={operationState} changeSelectState={changeSelectState} operationState={operationState} changeSelectState={changeSelectState}
histroyTime={histroyTime} histroyTime={histroyTime}
setoperationState={setoperationState} name={name} setoperationState={setoperationState} name={name}
roll={roll} roll={roll}
showTime={ videoObj={videoObj}
videoObj.type == 'yingshi' && yingshiPrepare == 'play' ? showTime={histroyBegain || moment()}
null : (histroyBegain || moment())
}
setProcessDisX={setProcessDisX} setProcessDisX={setProcessDisX}
content={videoObj.content} content={videoObj.content}
videoStyle={videoStyle} videoStyle={videoStyle}
/>} player={player}
resolution={resolution}
playState={playState.current}
/> : ""}
{/* 视频内容 */} {/* 视频内容 */}
{videoObj.type == 'yingshi' ? {
<iframe // <iframe
frameBorder="0" // frameBorder="0"
allowFullScreen='true' // allowFullScreen='true'
id={containerId} // id={containerId}
src={ // src={
`${yingshiUrl}?audio=${videoObj.audio && operationState && !operationState.histroy.select ? '1' : '0'}&url=${operationState && operationState.histroy.select && histroyBegain ? `${videoObj.replayUrl}?begin=${moment(histroyBegain).format("YYYYMMDDHHmmss")}&end=${moment(histroyTime[1]).format("YYYYMMDDHHmmss")}` : resolution == 'sd' ? videoObj.playUrlSd : videoObj.playUrlHd}&autoplay=${'1'}&accessToken=${videoObj.yingshiToken}` // `${yingshiUrl}?audio=${videoObj.audio && operationState && !operationState.histroy.select ? '1' : '0'}&url=${operationState && operationState.histroy.select && histroyBegain ? `${videoObj.replayUrl}?begin=${moment(histroyBegain).format("YYYYMMDDHHmmss")}&end=${moment(histroyTime[1]).format("YYYYMMDDHHmmss")}` : resolution == 'sd' ? videoObj.playUrlSd : videoObj.playUrlHd}&autoplay=${'1'}&accessToken=${videoObj.yingshiToken}`
} // }
// https://open.ys7.com/doc/zh/book/index/live_proto.html // // https://open.ys7.com/doc/zh/book/index/live_proto.html
// 单个播放器的长宽比例限制最小为{width: 400px;height: 300px;} // // 单个播放器的长宽比例限制最小为{width: 400px;height: 300px;}
width={'100%'} // width={'100%'}
height={'100%'} // height={'100%'}
wmode="transparent" // wmode="transparent"
style={{ pointerEvents: 'none' }} // style={{ pointerEvents: 'none' }}
/> : // />
<div
id={containerId}
style={{
height: '100%', width: '100%'
}}>
</div>
} }
<div id={containerId} style={{ height: '100%', width: '100%', }}></div>
{videoMask ? <div style={{ height: size?.height || '100%', width: size?.width || '100%', minWidth: 400, minHeight: 225, overflow: 'hidden', position: 'absolute', top: '0', left: '0', zIndex: 99, backgroundColor: 'red' }}>hhktyjr6tyr5</div> : ''}
{/* 下方操作栏 */} {/* 下方操作栏 */}
{/* 显示操作功能条件（宽高） */} {/* 显示操作功能条件（宽高） */}
{size?.parentWidth > 400 ? {size?.parentWidth > 320 ?
<VideoOperation <VideoOperation
operationState={operationState} operation={operation} operationState={operationState} operation={operation}
voiceDisY={voiceDisY} setVoiceDisY={setVoiceDisY} voiceDisY={voiceDisY} setVoiceDisY={setVoiceDisY}
@ -416,6 +469,9 @@ const VideoPlay = ({
setYingshiPrepare={setYingshiPrepare} setYingshiPrepare={setYingshiPrepare}
yingshiPrepareRef={yingshiPrepareRef} yingshiPrepareRef={yingshiPrepareRef}
slideDown={slideDown} slideDown={slideDown}
setPlayer={setPlayer}
player={player}
playState={playState.current}
/> : "" /> : ""
} }
</div> </div>

12
code/VideoAccess-VCMP/web/client/src/components/videoPlayer/videoPlayModal.jsx
View File

@ -20,15 +20,17 @@ const VideoPlayModal = ({ visible, close, videoObj, name }) => {
> >
<div id="video_local" style={{ width: '100%' }}> <div id="video_local" style={{ width: '100%' }}>
<VideoPlay sizeWh={{ <VideoPlay sizeWh={{
width: '100%', width:'',
height: 460, height: '',
parentWidth: '100%', parentWidth: 918,
parentHeight: '100%', parentHeight: 460,
}} }}
videoObj={videoObj} videoObj={videoObj}
name={name} name={name}
height={460} height={460}
local={true} /> local={true}
// IsSize='true' //是否全屏
/>
</div> </div>
</Modal> </Modal>
) )

22
code/VideoAccess-VCMP/web/client/src/components/videoPlayer/voiceHeader.jsx
View File

@ -5,14 +5,14 @@ import { Col, Row, } from "@douyinfe/semi-ui";
import { IconReply } from '@douyinfe/semi-icons'; import { IconReply } from '@douyinfe/semi-icons';
import TextScroll from '../textScroll' import TextScroll from '../textScroll'
import './videoPlay.less'; import './videoPlay.less';
import { log } from "ezuikit-js";
const timeFormat = 'YYYY-MM-DD HH:mm:ss' const timeFormat = 'YYYY-MM-DD HH:mm:ss'
const VideoHeader = ({ operationState, changeSelectState, setProcessDisX, name, showTime, histroyTime, content, roll, videoStyle }) => { const VideoHeader = ({ operationState, changeSelectState, setProcessDisX, name, videoObj, showTime, histroyTime, content, roll, videoStyle, player, resolution, playState }) => {
const time = useRef(moment(showTime || undefined)) const time = useRef(moment(showTime || undefined))
const upTimeInterval = useRef(null) const upTimeInterval = useRef(null)
const [showTime_, setShowTime] = useState(' ') const [showTime_, setShowTime] = useState(' ')
const updateTime = () => { const updateTime = () => {
if (!showTime) { if (!showTime) {
setShowTime('') setShowTime('')
@ -59,7 +59,7 @@ const VideoHeader = ({ operationState, changeSelectState, setProcessDisX, name,
{roll ? {roll ?
<div style={{ <div style={{
height: '12%', lineHeight: `${vcmp_videoplay * 0.12 > 42 ? 42 : vcmp_videoplay * 0.12 < 30 ? 30 : vcmp_videoplay * 0.12}px`, background: videoStyle == 'true' ? '#467ACD' : '#00000026', maxHeight: 42, minHeight: 30, height: '12%', lineHeight: `${vcmp_videoplay * 0.12 > 42 ? 42 : vcmp_videoplay * 0.12 < 30 ? 30 : vcmp_videoplay * 0.12}px`, background: videoStyle == 'true' ? '#467ACD' : '#00000026', maxHeight: 42, minHeight: 30,
position: 'absolute', width: '100%', zIndex: 99, position: 'absolute', width: '100%', zIndex: 80,
color: '#fff' color: '#fff'
}}> }}>
<Row> <Row>
@ -74,6 +74,20 @@ const VideoHeader = ({ operationState, changeSelectState, setProcessDisX, name,
<> <>
<IconReply style={{ marginRight: 12, cursor: 'pointer' }} onClick={() => { <IconReply style={{ marginRight: 12, cursor: 'pointer' }} onClick={() => {
changeSelectState('histroy') changeSelectState('histroy')
if (playState) {
player.stop().then(() => {
if (resolution == 'sd') {
player.play({ url: videoObj?.playUrlSd, })
} else {
player.play({ url: videoObj?.playUrlHd, })
}
playState = false
})
} else {
player.play({ url: resolution == 'sd' ? videoObj?.playUrlSd : videoObj?.playUrlHd, })
}
}} /> }} />
</> : '' </> : ''
} }
@ -81,7 +95,7 @@ const VideoHeader = ({ operationState, changeSelectState, setProcessDisX, name,
</Col> </Col>
<Col span={videoStyle == 'true' ? 24 : 15} style={{}}> <Col span={videoStyle == 'true' ? 24 : 15} style={{}}>
<div style={{ paddingRight: 12 }}> <div style={{ paddingRight: 12 }}>
<TextScroll content={content || []} duration={6} /> {content ? <TextScroll content={content || []} duration={6} /> : ""}
</div> </div>
</Col> </Col>
</Row> </Row>

6
code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/cascadeCamera.jsx
View File

@ -238,13 +238,13 @@ function cascadeCamera ({ dRef, dispatch, actions, cameraData, parentCamera, tes
</Col> </Col>
<Col span={14}> <Col span={14}>
<Form.Select <Form.Select
label="SIP编号:" label="设备编号:"
field="streamId" field="streamId"
disabled={cameraData.id ? true : false} disabled={cameraData.id ? true : false}
initValue={cameraData?.topSerialNo || ""} initValue={cameraData?.topSerialNo || ""}
placeholder="请选择SIP编号" placeholder="请选择设备编号"
style={{ width: 307 }} style={{ width: 307 }}
rules={[{ required: true, message: "请选择SIP编号" }]} rules={[{ required: true, message: "请选择设备编号" }]}
> >
{sip.map((item, index) => ( {sip.map((item, index) => (
<Form.Select.Option key={index} value={item.streamid}> <Form.Select.Option key={index} value={item.streamid}>

1
code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/containers/camera.jsx
View File

@ -239,7 +239,6 @@ const CameraHeader = (props) => {
}) })
} }
setVideoPlay(true) setVideoPlay(true)
}} }}
> >
播放 播放

13
code/VideoAccess-VCMP/web/client/src/sections/monitor/containers/videoPlayCross.jsx
View File

@ -35,18 +35,7 @@ const VideoPlayCross = (props) => {
} }
const resize_ = () => { const resize_ = () => {
const params = qs.parse(props.location.search.slice(1)) const params = qs.parse(props.location.search.slice(1))
// if (params.local) { setSizeWh({ parentWidth: document.body.clientWidth, parentHeight: document.body.clientHeight, width: params.width || document.body.clientWidth, height: params.height || document.body.clientHeight })
// //弹框视频自适应
// const VideoLocal = document.getElementById('video_local')
// setSizeWh({ parentWidth: VideoLocal?.clientWidth, parentHeight: '100%', width: width, height: height })
// } else {
if (params?.width || params?.height) {
setSizeWh({ parentWidth: document.body.clientWidth, parentHeight: document.body.clientHeight, width: params.width, height: params.height })
} else {
setSizeWh({ parentWidth: document.body.clientWidth, parentHeight: document.body.clientHeight, width: document.body.clientWidth, height: document.body.clientHeight })
}
// }
} }
resize_() resize_()
if (window.parent) { if (window.parent) {

3
code/VideoAccess-VCMP/web/package.json
View File

@ -7,7 +7,7 @@
"test": "mocha", "test": "mocha",
"start-vite": "cross-env NODE_ENV=developmentVite npm run start-params", "start-vite": "cross-env NODE_ENV=developmentVite npm run start-params",
"start": "cross-env NODE_ENV=development npm run start-params", "start": "cross-env NODE_ENV=development npm run start-params",
"start-params": "node server -p 5000 -u http://10.8.30.7:4000 --apiVcmpUrl http://localhost:4000 --apiAuthUrl http://10.8.30.7:4200 --apiAnxinyunUrl http://10.8.30.7:4100 --iotAuthWeb http://localhost:5200 --iotVideoServer http://221.230.55.27:8081", "start-params": "node server -p 5000 -u http://10.8.30.29:4000 --apiVcmpUrl http://localhost:4000 --apiAuthUrl http://10.8.30.29:4200 --apiAnxinyunUrl http://10.8.30.29:4100 --iotAuthWeb http://localhost:5200 --iotVideoServer ws://221.230.55.27:8081",
"deploy": "export NODE_ENV=production&& npm run build && node server", "deploy": "export NODE_ENV=production&& npm run build && node server",
"build-dev": "cross-env NODE_ENV=development&&webpack --config webpack.config.js", "build-dev": "cross-env NODE_ENV=development&&webpack --config webpack.config.js",
"build": "export NODE_ENV=production&&webpack --config webpack.config.prod.js" "build": "export NODE_ENV=production&&webpack --config webpack.config.prod.js"
@ -59,6 +59,7 @@
"babel-polyfill": "^6.26.0", "babel-polyfill": "^6.26.0",
"copy-to-clipboard": "^3.3.1", "copy-to-clipboard": "^3.3.1",
"cross-env": "^7.0.3", "cross-env": "^7.0.3",
"ezuikit-js": "^0.6.1",
"fs-web-server-scaffold": "^1.0.6", "fs-web-server-scaffold": "^1.0.6",
"koa-better-http-proxy": "^0.2.5", "koa-better-http-proxy": "^0.2.5",
"koa-proxy": "^1.0.0-alpha.3", "koa-proxy": "^1.0.0-alpha.3",

Write Preview
Loading…
Cancel
Save