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

播放修改

release_0.0.2
wenlele 2 years ago
parent
ce3e1c932d
commit
1453d187c4
2 changed files with 353 additions and 352 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. 700
      code/VideoAccess-VCMP/web/client/src/components/videoPlayer/videoPlay.jsx
  2. 5
      code/VideoAccess-VCMP/web/client/src/sections/monitor/containers/videoPlayCross.jsx

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

@ -15,371 +15,369 @@ const yingshiCloseSoundKey = 'closeSound'
const yingshiOpenSoundKey = 'openSound' const yingshiOpenSoundKey = 'openSound'
const VideoPlay = ({ const VideoPlay = ({
height, width, containerId = 'myPlayer', height, width, containerId = 'myPlayer',
// playUrl, // playUrl,
name, name,
videoObj, videoObj,
// 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.3j6eyqbn0g5xvcut73v0rzdu1nh0gnxx-4ua03m82o9-12u1t9g-rtzndpyds', // 萤石必须
// 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.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
}) => { }) => {
console.log(videoObj); const [jessibuca, setjessibuca] = useState(null)
const [jessibuca, setjessibuca] = 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) const [processDisX, setProcessDisX] = useState(0)
const [processDisX, setProcessDisX] = useState(0) const [isAdjustProcess, setIsAdjustProcess] = useState(false)
const [isAdjustProcess, setIsAdjustProcess] = useState(false) 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 [resolution, setResolution] = useState('sd') // 标清 sd 高清 hd
const [resolution, setResolution] = useState('sd') // 标清 sd 高清 hd
// 标记萤石操作中，等待ifream返回信息后清空
// 标记萤石操作中，等待ifream返回信息后清空 const [yingshiPrepare, setYingshiPrepare] = useState('')
const [yingshiPrepare, setYingshiPrepare] = useState('')
const operationRef = useRef(null)
const operationRef = useRef(null) const processChangeTimeoutRef = useRef(null)
const processChangeTimeoutRef = useRef(null) // 标记萤石操作中，等待ifream返回信息后清空
// 标记萤石操作中，等待ifream返回信息后清空 const yingshiPrepareRef = useRef(null)
const yingshiPrepareRef = useRef(null)
useEffect(() => {
useEffect(() => { setRoll(false)
setRoll(false)
}, [resolution]); }, [resolution]);
const changeSelectState = (key) => { const changeSelectState = (key) => {
if (videoObj.type == 'yingshi' && yingshiPrepareRef.current) { if (videoObj.type == 'yingshi' && yingshiPrepareRef.current) {
return
}
const nextOperationState = JSON.parse(JSON.stringify(operationRef.current))
if (key == 'histroy' && nextOperationState.histroy.select) {
// 取消历史播放
setProcessDisX(0)
setHistroyTime([])
}
for (let k in nextOperationState) {
if (k == key) {
nextOperationState[k].select = !nextOperationState[k].select
} else if (k !== 'fullScreen') {
nextOperationState[k].select = false
}
}
operationRef.current = nextOperationState
if (operationRef.current.histroy.select && histroyTime.length == 0) {
setHistroyTime([moment().subtract(72, 'hours').format(timeFormat), moment().format(timeFormat)])
}
setoperationState(nextOperationState)
}
// 实时播放左下方操作栏内容
const operation = [{
key: 'control',
click: () => {
changeSelectState('control')
}
}, {
key: 'talk',
hide: !(videoObj.type == 'yingshi'),
click: () => {
changeSelectState('talk')
}
}, {
key: 'fullScreen',
click: () => {
if (yingshiPrepareRef.current) {
return return
} }
changeSelectState('fullScreen') const nextOperationState = JSON.parse(JSON.stringify(operationRef.current))
let player = document.getElementById('vcmp_videoplay') if (key == 'histroy' && nextOperationState.histroy.select) {
if (screenfull.isEnabled) { // 取消历史播放
screenfull.toggle(player); setProcessDisX(0)
} setHistroyTime([])
} }
}, {
key: 'histroy', for (let k in nextOperationState) {
hide: !Boolean(videoObj.replayUrl), if (k == key) {
click: () => { nextOperationState[k].select = !nextOperationState[k].select
changeSelectState('histroy') } else if (k !== 'fullScreen') {
yingshiPrepareRef.current = 'play' nextOperationState[k].select = false
setYingshiPrepare('play')
}
},]
useEffect(() => {
if (videoObj.type == 'yingshi') {
yingshiPrepareRef.current = 'play'
setYingshiPrepare('play')
} else {
createJessibuca()
}
let nextOperationState = {}
for (let p of operation) {
nextOperationState[p.key] = {
select: false
}
}
setoperationState(nextOperationState)
operationRef.current = nextOperationState
// 全屏状态监听
screenfull.on('change', () => {
if (screenfull.isFullscreen && operationRef.current && !operationRef.current['fullScreen'].select) {
changeSelectState('fullScreen')
}
if (!screenfull.isFullscreen && operationRef.current && operationRef.current['fullScreen'].select) {
changeSelectState('fullScreen')
}
});
// 萤石 ifream 信息监听
const listenYingshiMessage = async (e) => {
const { data, origin } = e
console.log(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) { operationRef.current = nextOperationState
setVoiceDisY(30)
if (operationRef.current.histroy.select && histroyTime.length == 0) {
setHistroyTime([moment().subtract(72, 'hours').format(timeFormat), moment().format(timeFormat)])
}
setoperationState(nextOperationState)
}
// 实时播放左下方操作栏内容
const operation = [{
key: 'control',
click: () => {
changeSelectState('control')
}
}, {
key: 'talk',
hide: !(videoObj.type == 'yingshi'),
click: () => {
changeSelectState('talk')
}
}, {
key: 'fullScreen',
click: () => {
if (yingshiPrepareRef.current) {
return
} }
} if (data.type == yingshiCloseSoundKey && data.code == 0) { changeSelectState('fullScreen')
if (yingshiPrepareRef.current == yingshiCloseSoundKey) { let player = document.getElementById('vcmp_videoplay')
setVoiceDisY(0) if (screenfull.isEnabled) {
screenfull.toggle(player);
} }
} }
yingshiPrepareRef.current = null }, {
setYingshiPrepare(null) key: 'histroy',
} hide: !Boolean(videoObj.replayUrl),
if (videoObj.type == 'yingshi') { click: () => {
window.addEventListener('message', listenYingshiMessage); changeSelectState('histroy')
}
return () => {
window.removeEventListener('message', listenYingshiMessage);
}
}, [])
useEffect(() => {
if (histroyTime.length) {
setHistroyBegain(histroyTime[0])
document.getElementById('process_point').style.left = 0 + 'px'; // 重置进度条的位置
if (videoObj.type == 'yingshi') {
yingshiPrepareRef.current = 'play' yingshiPrepareRef.current = 'play'
setYingshiPrepare('play') setYingshiPrepare('play')
} }
} else { },]
setHistroyBegain(null)
} useEffect(() => {
}, [histroyTime]) if (videoObj.type == 'yingshi') {
useEffect(() => { yingshiPrepareRef.current = 'play'
if (operationState && operationState.histroy.select) { setYingshiPrepare('play')
if (isAdjustProcess) { } else {
// 调整进度条 更新播放开始时间 createJessibuca()
if (processChangeTimeoutRef.current) { }
clearTimeout(processChangeTimeoutRef.current) let nextOperationState = {}
for (let p of operation) {
nextOperationState[p.key] = {
select: false
}
}
setoperationState(nextOperationState)
operationRef.current = nextOperationState
// 全屏状态监听
screenfull.on('change', () => {
if (screenfull.isFullscreen && operationRef.current && !operationRef.current['fullScreen'].select) {
changeSelectState('fullScreen')
}
if (!screenfull.isFullscreen && operationRef.current && operationRef.current['fullScreen'].select) {
changeSelectState('fullScreen')
} }
processChangeTimeoutRef.current = setTimeout(() => { });
setHistroyBegain(
moment(histroyTime[0]) // 萤石 ifream 信息监听
.add( const listenYingshiMessage = async (e) => {
Math.abs(moment(histroyTime[0]).diff(moment(histroyTime[1]), 'seconds')) * (processDisX / document.getElementById('process_point').parentElement.offsetWidth), const { data, origin } = e
'second' console.log(e);
) if (origin !== 'https://open.ys7.com') return
.format(timeFormat) if (data.type == "handleSuccess") {
) setRoll(true)
if (videoObj.type == 'yingshi') { if (yingshiPrepareRef.current == 'play') {
yingshiPrepareRef.current = 'play' setIsPlaying(true)
setYingshiPrepare('play') }
} } else if (data.type == yingshiOpenSoundKey && data.code == 0) {
}, 300) if (yingshiPrepareRef.current == yingshiOpenSoundKey) {
} else { setVoiceDisY(30)
// 随播放时间变化更新进度条 }
document.getElementById('process_point').style.left = processDisX - 4.5 + 'px' } if (data.type == yingshiCloseSoundKey && data.code == 0) {
} if (yingshiPrepareRef.current == yingshiCloseSoundKey) {
} setVoiceDisY(0)
}, [processDisX]) }
}
const createJessibuca = async () => { yingshiPrepareRef.current = null
if (videoObj.type != 'yingshi') { setYingshiPrepare(null)
try { }
// const inviteRes = await IotVideoServerRequest.get(VideoServeApi.invite, { if (videoObj.type == 'yingshi') {
// id: '36011200002002021114', window.addEventListener('message', listenYingshiMessage);
// channel: '36011200581314002900' }
// }).then(res => { return () => {
// console.log(res); window.removeEventListener('message', listenYingshiMessage);
// }, err => { }
// console.log(err); }, [])
// })
useEffect(() => {
const inviteRes_ = await request.get(`${iotVideoServer}/api/gb28181/invite?id=${videoObj.topSerialNo}&channel=${videoObj.serialNo}`) if (histroyTime.length) {
} catch (error) { setHistroyBegain(histroyTime[0])
console.log(error.response); document.getElementById('process_point').style.left = 0 + 'px'; // 重置进度条的位置
} if (videoObj.type == 'yingshi') {
yingshiPrepareRef.current = 'play'
setYingshiPrepare('play')
let $container = document.getElementById(containerId); }
const jessibuca = new window.Jessibuca({ } else {
container: $container, setHistroyBegain(null)
videoBuffer: 0.2, // 缓存时长 }
isResize: false, }, [histroyTime])
text: "", useEffect(() => {
loadingText: "加载中", if (operationState && operationState.histroy.select) {
debug: true, if (isAdjustProcess) {
showBandwidth: false, // 显示网速 // 调整进度条 更新播放开始时间
operateBtns: { if (processChangeTimeoutRef.current) {
fullscreen: false, clearTimeout(processChangeTimeoutRef.current)
screenshot: false, }
play: false, processChangeTimeoutRef.current = setTimeout(() => {
audio: false, setHistroyBegain(
}, moment(histroyTime[0])
forceNoOffscreen: false, .add(
isNotMute: false, Math.abs(moment(histroyTime[0]).diff(moment(histroyTime[1]), 'seconds')) * (processDisX / document.getElementById('process_point').parentElement.offsetWidth),
}); 'second'
setjessibuca(jessibuca) )
play({ jessibuca }) .format(timeFormat)
} )
} if (videoObj.type == 'yingshi') {
yingshiPrepareRef.current = 'play'
const yingshiOperation = (operation) => { setYingshiPrepare('play')
document.getElementById(containerId).contentWindow.postMessage(operation, yingshiUrl) }
// setIsPlaying(operation == 'play') }, 300)
} } else {
// 随播放时间变化更新进度条
const play = (params) => { document.getElementById('process_point').style.left = processDisX - 4.5 + 'px'
if (videoObj.type == 'yingshi') { }
yingshiOperation('play') }
} else if ((params.jessibuca || jessibuca) && videoObj.playUrlSd) { }, [processDisX])
const jes = params.jessibuca || jessibuca
jes.play(videoObj.playUrlSd); const createJessibuca = async () => {
setIsPlaying(true) if (videoObj.type != 'yingshi') {
} try {
} // const inviteRes = await IotVideoServerRequest.get(VideoServeApi.invite, {
// id: '36011200002002021114',
const pause = () => { // channel: '36011200581314002900'
if (videoObj.type == 'yingshi') { // }).then(res => {
// yingshiOperation('stop') // console.log(res);
} else if (jessibuca) { // }, err => {
jessibuca.pause(); // console.log(err);
setIsPlaying(false) // })
}
} const inviteRes_ = await request.get(`${iotVideoServer}/api/gb28181/invite?id=${videoObj.topSerialNo}&channel=${videoObj.serialNo}`)
} catch (error) {
const closeSound = () => { console.log(error.response);
if (videoObj.type == 'yingshi') { }
yingshiPrepareRef.current = yingshiCloseSoundKey
setYingshiPrepare(yingshiCloseSoundKey)
yingshiOperation(yingshiCloseSoundKey) let $container = document.getElementById(containerId);
} const jessibuca = new window.Jessibuca({
} container: $container,
videoBuffer: 0.2, // 缓存时长
const openSound = () => { isResize: false,
if (videoObj.type == 'yingshi') { text: "",
yingshiPrepareRef.current = yingshiOpenSoundKey loadingText: "加载中",
setYingshiPrepare(yingshiOpenSoundKey) debug: true,
yingshiOperation(yingshiOpenSoundKey) showBandwidth: false, // 显示网速
} operateBtns: {
} fullscreen: false,
screenshot: false,
play: false,
return ( audio: false,
<> },
<div className="vcmp_videoplay" style={{ height: height || '100%', width: width || '100%', overflow: 'hidden' }}> forceNoOffscreen: false,
<div id="vcmp_videoplay" style={{ position: 'relative', display: 'flex', height: '100%', width: '100%' }}> isNotMute: false,
{/* 顶部信息 */} });
<VideoHeader setjessibuca(jessibuca)
operationState={operationState} changeSelectState={changeSelectState} play({ jessibuca })
histroyTime={histroyTime} }
setoperationState={setoperationState} name={name} }
roll={roll}
showTime={ const yingshiOperation = (operation) => {
videoObj.type == 'yingshi' && yingshiPrepare == 'play' ? document.getElementById(containerId).contentWindow.postMessage(operation, yingshiUrl)
null : (histroyBegain || moment()) // setIsPlaying(operation == 'play')
} }
setProcessDisX={setProcessDisX}
content={videoObj.content} const play = (params) => {
/> if (videoObj.type == 'yingshi') {
{/* 视频内容 */} yingshiOperation('play')
{ } else if ((params.jessibuca || jessibuca) && videoObj.playUrlSd) {
videoObj.type == 'yingshi' ? const jes = params.jessibuca || jessibuca
<iframe jes.play(videoObj.playUrlSd);
frameBorder="0" setIsPlaying(true)
id={containerId} }
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}`
const pause = () => {
if (videoObj.type == 'yingshi') {
// yingshiOperation('stop')
} else if (jessibuca) {
jessibuca.pause();
setIsPlaying(false)
}
}
const closeSound = () => {
if (videoObj.type == 'yingshi') {
yingshiPrepareRef.current = yingshiCloseSoundKey
setYingshiPrepare(yingshiCloseSoundKey)
yingshiOperation(yingshiCloseSoundKey)
}
}
const openSound = () => {
if (videoObj.type == 'yingshi') {
yingshiPrepareRef.current = yingshiOpenSoundKey
setYingshiPrepare(yingshiOpenSoundKey)
yingshiOperation(yingshiOpenSoundKey)
}
}
return (
<>
<div className="vcmp_videoplay" style={{ height: height ? height : '100%', width: width || '100%', overflow: 'hidden' }}>
<div id="vcmp_videoplay" style={{ position: 'relative', display: 'flex', height: '100%', width: '100%' }}>
{/* 顶部信息 */}
<VideoHeader
operationState={operationState} changeSelectState={changeSelectState}
histroyTime={histroyTime}
setoperationState={setoperationState} name={name}
roll={roll}
showTime={
videoObj.type == 'yingshi' && yingshiPrepare == 'play' ?
null : (histroyBegain || moment())
} }
// https://open.ys7.com/doc/zh/book/index/live_proto.html setProcessDisX={setProcessDisX}
// 单个播放器的长宽比例限制最小为{width: 400px;height: 300px;} content={videoObj.content}
width={'100%'} />
height={'100%'} {/* 视频内容 */}
allowFullScreen {
wmode="transparent" videoObj.type == 'yingshi' ?
style={{ pointerEvents: 'none' }} <iframe
/> : frameBorder="0"
<div id={containerId}
id={containerId} src={
style={{ `${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}`
height: '100%', width: '100%' }
}}> // https://open.ys7.com/doc/zh/book/index/live_proto.html
// 单个播放器的长宽比例限制最小为{width: 400px;height: 300px;}
</div> width={'100%'}
} height={'100%'}
allowFullScreen
{/* 下方操作栏 */} wmode="transparent"
<VideoOperation style={{ pointerEvents: 'none' }}
operationState={operationState} operation={operation} /> :
voiceDisY={voiceDisY} setVoiceDisY={setVoiceDisY} <div
processDisX={processDisX} setProcessDisX={setProcessDisX} id={containerId}
isAdjustProcess={isAdjustProcess} setIsAdjustProcess={setIsAdjustProcess} style={{
resolution={resolution} setResolution={setResolution} height: '100%', width: '100%'
histroyTime={histroyTime} setHistroyTime={setHistroyTime} }}>
histroyBegain={histroyBegain}
play={play} pause={pause} closeSound={closeSound} openSound={openSound} </div>
isPlaying={isPlaying} }
videoObj={videoObj}
setYingshiPrepare={setYingshiPrepare} {/* 下方操作栏 */}
yingshiPrepareRef={yingshiPrepareRef} <VideoOperation
/> operationState={operationState} operation={operation}
</div> voiceDisY={voiceDisY} setVoiceDisY={setVoiceDisY}
processDisX={processDisX} setProcessDisX={setProcessDisX}
isAdjustProcess={isAdjustProcess} setIsAdjustProcess={setIsAdjustProcess}
resolution={resolution} setResolution={setResolution}
histroyTime={histroyTime} setHistroyTime={setHistroyTime}
histroyBegain={histroyBegain}
play={play} pause={pause} closeSound={closeSound} openSound={openSound}
isPlaying={isPlaying}
videoObj={videoObj}
setYingshiPrepare={setYingshiPrepare}
yingshiPrepareRef={yingshiPrepareRef}
/>
</div>
</div> </div>
</> </>
) )
} }
function mapStateToProps (state) { function mapStateToProps (state) {
const { auth, global } = state; const { auth, global } = state;
console.log('global',global); return {
return { user: auth.user,
user: auth.user, iotVideoServer: global.iotVideoServer,
iotVideoServer: global.iotVideoServer, };
};
} }
export default connect(mapStateToProps)(VideoPlay); export default connect(mapStateToProps)(VideoPlay);

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

@ -8,17 +8,19 @@ const VideoPlayCross = (props) => {
const [videoParams, setVideoParams] = useState(null) const [videoParams, setVideoParams] = useState(null)
useEffect(() => { useEffect(() => {
console.log(props);
if (props.location.search) { if (props.location.search) {
const params = qs.parse(props.location.search.slice(1)) const params = qs.parse(props.location.search.slice(1))
if (params.videoObj) { if (params.videoObj) {
console.log(params.videoObj); console.log(params.videoObj);
// params.videoObj = (new Function("return " + params.videoObj))() // params.videoObj = (new Function("return " + params.videoObj))()
params.videoObj = JSON.parse(params.videoObj) params.videoObj = JSON.parse(params.videoObj)
params.height = JSON.parse(params.height)
setVideoParams(params) setVideoParams(params)
return return
} }
} }
console.log(videoParams);
function messageListen (e) { function messageListen (e) {
// 此处需做 域名 验证 // 此处需做 域名 验证
const { data } = e const { data } = e
@ -34,6 +36,7 @@ const VideoPlayCross = (props) => {
return () => { return () => {
window.removeEventListener('message', messageListen); window.removeEventListener('message', messageListen);
} }
}, []) }, [])
return ( return (
<> <>

Write Preview
Loading…
Cancel
Save