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

播放器修改

release_1.1.2
wenlele 2 years ago
parent
5b9d2c746e
commit
da90aa7fc2
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. 169
      code/VideoAccess-VCMP/web/client/src/components/videoPlayer/videoOperationHistroyTime.jsx
  3. 1
      code/VideoAccess-VCMP/web/client/src/components/videoPlayer/videoOperationTalk.jsx
  4. 342
      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

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

@ -7,96 +7,97 @@ import moment from "moment";
const timeFormat = 'YYYY-MM-DD HH:mm:ss' const timeFormat = 'YYYY-MM-DD HH:mm:ss'
const VideoOperationHistroyTime = ({ close, histroyTime, setHistroyTime, setProcessDisX }) => { const VideoOperationHistroyTime = ({ close, histroyTime, setHistroyTime, setProcessDisX }) => {
const [selectedTimeRange, setSelectedTimeRange] = useState(histroyTime) const [selectedTimeRange, setSelectedTimeRange] = useState(histroyTime)
useEffect(() => { useEffect(() => {
if (!selectedTimeRange.length) { if (!selectedTimeRange.length) {
setSelectedTimeRange([moment().subtract(72, 'hours').format(timeFormat), moment().format(timeFormat)]) setSelectedTimeRange([moment().subtract(72, 'hours').format(timeFormat), moment().format(timeFormat)])
} }
}, []) }, [])
const ToastInCustomContainer = ToastFactory.create({ const ToastInCustomContainer = ToastFactory.create({
getPopupContainer: () => document.getElementById('vcmp_videoplay'), getPopupContainer: () => document.getElementById('vcmp_videoplay'),
}); });
return ( return (
<div style={{ <div style={{
position: 'absolute', top: 'calc(50% - 90px)', left: 'calc(50% - 260px)', position: 'absolute', top: 'calc(50% - 90px)', left: 'calc(50% - 260px)',
width: 520, height: 180, backgroundColor: '#000000A5', padding: '40px 30px', width: 520, height: 180, backgroundColor: '#000000A5', padding: '40px 30px',
display: 'flex', flexDirection: 'column', justifyContent: 'space-between' display: 'flex', flexDirection: 'column', justifyContent: 'space-between'
}}> }}>
<div style={{ display: 'flex', justifyContent: 'center' }}> <div style={{ display: 'flex', justifyContent: 'center' }}>
<DatePicker <DatePicker
density='compact' density='compact'
type="dateTimeRange" type="dateTimeRange"
value={selectedTimeRange} value={selectedTimeRange}
onChange={(t, timeRange) => { onChange={(t, timeRange) => {
setSelectedTimeRange(timeRange) setSelectedTimeRange(timeRange)
}} }}
style={{ width: '100%' }} style={{ width: '100%' }}
// disabledDate={(date, options) => { // disabledDate={(date, options) => {
// const { rangeStart, rangeEnd } = options; // const { rangeStart, rangeEnd } = options;
// // console.log(date, options); // // console.log(date, options);
// if (!rangeStart && !rangeEnd) { // if (!rangeStart && !rangeEnd) {
// return false // return false
// } // }
// if (rangeStart) { // if (rangeStart) {
// return Math.abs(moment(date).diff(moment(rangeStart), 'days')) > 3 // return Math.abs(moment(date).diff(moment(rangeStart), 'days')) > 3
// } // }
// if (rangeEnd) { // if (rangeEnd) {
// return Math.abs(moment(date).diff(moment(rangeEnd), 'days')) > 3 // return Math.abs(moment(date).diff(moment(rangeEnd), 'days')) > 3
// } // }
// }} // }}
// disabledTime={(date, type) => { // disabledTime={(date, type) => {
// console.log(date, type); // console.log(date, type);
// }} // }}
/> />
</div> </div>
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', }}> <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', }}>
<span style={{ color: '#FF7100' }}> <span style={{ color: '#FF7100' }}>
<img src={`/assets/images/background/warning.png`} height={14} style={{ position: 'relative', top: 2, marginRight: 2 }} /> <img src={`/assets/images/background/warning.png`} height={14} style={{ position: 'relative', top: 2, marginRight: 2 }} />
最长时间跨度不超过72小时 最长时间跨度不超过72小时
</span> </span>
<span> <span>
<Space> <Space>
<div <div
onClick={() => { onClick={() => {
close() close()
}} }}
style={{ style={{
cursor: 'pointer', height: 32, width: 56, lineHeight: '32px', borderRadius: 2, cursor: 'pointer', height: 32, width: 56, lineHeight: '32px', borderRadius: 2,
textAlign: 'center', background: '#fff', color: 'rgba(0, 0, 0, 0.65)' textAlign: 'center', background: '#fff', color: 'rgba(0, 0, 0, 0.65)'
}} }}
>取消</div> >取消</div>
<div <div
onClick={() => { onClick={() => {
if (selectedTimeRange.length == 2 && selectedTimeRange.every(t => t)) { if (selectedTimeRange.length == 2 && selectedTimeRange.every(t => t)) {
if (Math.abs(moment(selectedTimeRange[0]).diff(moment(selectedTimeRange[1]), 'hours')) > 72) { if (Math.abs(moment(selectedTimeRange[0]).diff(moment(selectedTimeRange[1]), 'hours')) > 72) {
ToastInCustomContainer.destroyAll() ToastInCustomContainer.destroyAll()
return ToastInCustomContainer.error('所选时间超过 72 小时') return ToastInCustomContainer.error('所选时间超过 72 小时')
} }
setHistroyTime(selectedTimeRange) setHistroyTime(selectedTimeRange)
setProcessDisX(0) playBackTime.current = selectedTimeRange
close() setProcessDisX(0)
} close()
}} }
style={{ }}
cursor: 'pointer', height: 32, width: 56, lineHeight: '32px', borderRadius: 2, style={{
textAlign: 'center', background: '#1859C1', color: '#fff' cursor: 'pointer', height: 32, width: 56, lineHeight: '32px', borderRadius: 2,
}} textAlign: 'center', background: '#1859C1', color: '#fff'
>播放</div> }}
</Space> >播放</div>
</span> </Space>
</div> </span>
</div> </div>
) </div>
)
} }
function mapStateToProps (state) { function mapStateToProps (state) {
const { auth } = state; const { auth } = state;
return { return {
user: auth.user, user: auth.user,
}; };
} }
export default connect(mapStateToProps)(VideoOperationHistroyTime); export default connect(mapStateToProps)(VideoOperationHistroyTime);

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={{

342
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,
@ -26,32 +29,45 @@ const VideoPlay = ({
slideDown, //视频下方操作是否滑动 slideDown, //视频下方操作是否滑动
IsSize, //是否按照16:9的比例播放 IsSize, //是否按照16:9的比例播放
// videoObj = { // videoObj = {
// type: 'yingshi', // type: 'yingshi',
// 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 = {
// type: 'cascade', // type: 'cascade',
// audio: false, // audio: false,
// serialNo: '34020000001310000001', // 设备序列号 必须 // serialNo: '34020000001310000001', // 设备序列号 必须
// topSerialNo: '34020000001110000077', // 设备顶级序列号 必须 // topSerialNo: '34020000001110000077', // 设备顶级序列号 必须
// playUrlSd: 'ws://221.230.55.27:8081/jessica/34020000001110000077/34020000001310000001', // 必须 // playUrlSd: 'ws://221.230.55.27:8081/jessica/34020000001110000077/34020000001310000001', // 必须
// // 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.rec',
// }, // },
// //
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_ = () => {
// 萤石 ifream 信息监听 // const VideoLocal = document.getElementById('vcmp_videoplay')
const listenYingshiMessage = async (e) => { // setSize({ parentWidth: VideoLocal?.clientWidth, parentHeight: VideoLocal?.clientHeight, width: VideoLocal?.clientWidth, height: VideoLocal?.clientHeight })
const { data, origin } = e
if (origin !== 'https://open.ys7.com') return // }
if (data.type == "handleSuccess") { // if (local) {
setRoll(true) // window.addEventListener('resize', resize_); //只要窗口殴大小发生像素变化就会触发
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);
}
return () => { 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(() => { 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,11 +286,11 @@ const VideoPlay = ({
// channel: '36011200581314002900' // channel: '36011200581314002900'
// }).then(res => { // }).then(res => {
// console.log(res); // console.log(res);
// }, err => { // }, err => {.
// console.log(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) { } catch (error) {
console.log(error.response); console.log(error.response);
} }
@ -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]) })
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, })
} }
} }
}, [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 ( 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