|
|
|
@ -9,7 +9,7 @@ import VideoHeader from './voiceHeader' |
|
|
|
import VideoOperation from './videoOperation' |
|
|
|
import './videoPlay.less'; |
|
|
|
import EZUIKit, { log } from 'ezuikit-js' |
|
|
|
import { done } from "nprogress"; |
|
|
|
import flvjs from 'flv.js' |
|
|
|
|
|
|
|
const timeFormat = 'YYYY-MM-DD HH:mm:ss' |
|
|
|
const yingshiUrl = 'https://open.ys7.com/ezopen/h5/iframe' |
|
|
|
@ -26,7 +26,7 @@ const VideoPlay = ({ dispatch, actions, |
|
|
|
global, |
|
|
|
videoStyle, |
|
|
|
changeData, |
|
|
|
videoObj, |
|
|
|
// videoObj, |
|
|
|
sizeWh, |
|
|
|
slideDown, //视频下方操作是否滑动 |
|
|
|
IsSize, //是否按照16:9的比例播放 |
|
|
|
@ -53,23 +53,22 @@ const VideoPlay = ({ dispatch, actions, |
|
|
|
// replayUrl: 'ezopen://open.ys7.com/G56384814/1.hd.local.rec', |
|
|
|
// }, |
|
|
|
|
|
|
|
// videoObj = { |
|
|
|
// type: 'cascade', |
|
|
|
// audio: false, |
|
|
|
// cloudControl: true, |
|
|
|
// serialNo: '34020000001310000001', // 设备序列号 必须 |
|
|
|
// topSerialNo: '34020000001320000001', // 设备顶级序列号 必须 |
|
|
|
// playUrlSd: 'wss://221.230.55.27:8082/jessica/34020000001320000001/34020000001310000001', // 必须 |
|
|
|
// // playUrlHd: 'ezopen://open.ys7.com/G75922040/1.hd.live', |
|
|
|
// // replayUrl: 'ezopen://open.ys7.com/G75922040/1.rec', |
|
|
|
// }, |
|
|
|
videoObj = { |
|
|
|
type: 'cascade', |
|
|
|
audio: false, |
|
|
|
cloudControl: true, |
|
|
|
serialNo: '34020000001310000001', // 设备序列号 必须 |
|
|
|
topSerialNo: '34020000001320000001', // 设备顶级序列号 必须 |
|
|
|
playUrlSd: 'wss://221.230.55.27:8082/jessica/34020000001320000001/34020000001310000001', // 必须 |
|
|
|
// playUrlHd: 'ezopen://open.ys7.com/G75922040/1.hd.live', |
|
|
|
// replayUrl: 'ezopen://open.ys7.com/G75922040/1.rec', |
|
|
|
}, |
|
|
|
|
|
|
|
// |
|
|
|
iotVideoServer, |
|
|
|
iotVideoPlayServer, |
|
|
|
local, //是否本地调用视频 |
|
|
|
}) => { |
|
|
|
// console.log('1754', videoObj); |
|
|
|
if (videoObj.type == 'yingshi') { |
|
|
|
videoObj = { |
|
|
|
...videoObj, |
|
|
|
@ -119,7 +118,7 @@ const VideoPlay = ({ dispatch, actions, |
|
|
|
const playState = useRef(false) //播放状态 |
|
|
|
const yingshiPlayer = useRef(null) |
|
|
|
const jessibucas = useRef(null) |
|
|
|
|
|
|
|
const flvPlayer = useRef() |
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
setRoll(false) |
|
|
|
@ -132,7 +131,6 @@ const VideoPlay = ({ dispatch, actions, |
|
|
|
if (disappear || !videoMask) { |
|
|
|
let duration = moment.duration(videoAfter?.diff(videoFront))._data.milliseconds; |
|
|
|
setTimeout(() => { |
|
|
|
// console.log(yingshiPlayer.current); |
|
|
|
if (disappear || duration > 2000) { |
|
|
|
setVideoMask(true) |
|
|
|
dispatch(openness.getErrorCode(videoObj.videoToken ? { status: numbers, platform: videoObj.type, token: videoObj.videoToken } : { status: numbers, platform: videoObj.type })).then((res) => { |
|
|
|
@ -303,17 +301,26 @@ const VideoPlay = ({ dispatch, actions, |
|
|
|
// window.addEventListener('resize', resize_); //只要窗口殴大小发生像素变化就会触发 |
|
|
|
// } |
|
|
|
|
|
|
|
document.addEventListener("visibilitychange", function () { |
|
|
|
const buffered = flvPlayer.current.buffered.end(0) - 0.1 |
|
|
|
if (buffered - flvPlayer.current.currentTime > 1) { |
|
|
|
flvPlayer.current.currentTime = buffered |
|
|
|
} |
|
|
|
}) |
|
|
|
|
|
|
|
return () => { |
|
|
|
if (jessibucas.current) { |
|
|
|
jessibucas.current.destroy() |
|
|
|
// console.log(1111111111111111111111); |
|
|
|
const bye = request.get(`${iotVideoServer}/api/gb28181/bye?id=${videoObj.topSerialNo}&channel=${videoObj.serialNo}`).then(v=>{ |
|
|
|
// console.log(1231313123); |
|
|
|
const bye = request.get(`${iotVideoServer}/api/gb28181/bye?id=${videoObj.topSerialNo}&channel=${videoObj.serialNo}`).then(v => { |
|
|
|
|
|
|
|
}) |
|
|
|
} |
|
|
|
if (yingshiPlayer.current && videoObj.type == 'yingshi') { |
|
|
|
yingshiPlayer.current.stop() |
|
|
|
} |
|
|
|
if (flvPlayer && flvPlayer.current) { |
|
|
|
flvPlayer.current.destroy(); |
|
|
|
} |
|
|
|
} |
|
|
|
}, []) |
|
|
|
|
|
|
|
@ -372,7 +379,6 @@ const VideoPlay = ({ dispatch, actions, |
|
|
|
|
|
|
|
const createPlay = async () => { |
|
|
|
if (videoObj.type != 'yingshi') { |
|
|
|
// console.log(videoObj,iotVideoServer); |
|
|
|
try { |
|
|
|
// const inviteRes = await IotVideoServerRequest.get(VideoServeApi.invite, { |
|
|
|
// id: '36011200002002021114', |
|
|
|
@ -385,36 +391,55 @@ const VideoPlay = ({ dispatch, actions, |
|
|
|
videoFront = new moment(); //验证前时间 |
|
|
|
const inviteRes_ = await request.get(`${iotVideoServer}/api/gb28181/invite?id=${videoObj.topSerialNo}&channel=${videoObj.serialNo}`).then((res) => { |
|
|
|
videoAfter = new moment(); //验证后时间 |
|
|
|
console.log(11111, res) |
|
|
|
}) |
|
|
|
} catch (error) { |
|
|
|
console.log(123151); |
|
|
|
console.log(error.response); |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
let $container = document.getElementById(containerId); |
|
|
|
const jessibuca = new window.Jessibuca({ |
|
|
|
container: $container, |
|
|
|
videoBuffer: 0.2, // 缓存时长 |
|
|
|
isResize: false, |
|
|
|
text: "", |
|
|
|
loadingText: "加载中", |
|
|
|
debug: true, |
|
|
|
showBandwidth: false, // 显示网速 |
|
|
|
operateBtns: { |
|
|
|
fullscreen: false, |
|
|
|
screenshot: false, |
|
|
|
play: false, |
|
|
|
audio: false, |
|
|
|
}, |
|
|
|
forceNoOffscreen: false, |
|
|
|
controlAutoHide: true, |
|
|
|
isNotMute: false, |
|
|
|
let container = document.getElementById(containerId); |
|
|
|
// 播放方式 1 |
|
|
|
// const jessibuca = new window.Jessibuca({ |
|
|
|
// container: container, |
|
|
|
// videoBuffer: 0.2, // 缓存时长 |
|
|
|
// isResize: false, |
|
|
|
// text: "", |
|
|
|
// loadingText: "加载中", |
|
|
|
// debug: true, |
|
|
|
// showBandwidth: false, // 显示网速 |
|
|
|
// operateBtns: { |
|
|
|
// fullscreen: false, |
|
|
|
// screenshot: false, |
|
|
|
// play: false, |
|
|
|
// audio: false, |
|
|
|
// }, |
|
|
|
// forceNoOffscreen: false, |
|
|
|
// controlAutoHide: true, |
|
|
|
// isNotMute: false, |
|
|
|
// }); |
|
|
|
// setjessibuca(jessibuca) |
|
|
|
// jessibucas.current = jessibuca |
|
|
|
// play({ jessibuca }) |
|
|
|
|
|
|
|
// 播放方式 2 |
|
|
|
const flv = flvjs.createPlayer({ |
|
|
|
type: 'flv', |
|
|
|
// url: 'ws://10.8.30.42:8081/jessica/34020000001110000001/34020000001310000001.flv', |
|
|
|
url: `${iotVideoServer}/jessica/${videoObj.topSerialNo}/${videoObj.serialNo}.flv`, |
|
|
|
isLive: true, |
|
|
|
hasAudio: false, |
|
|
|
hasVideo: true, |
|
|
|
enableWorker: false, |
|
|
|
enalleStashBuffer: true, |
|
|
|
stashInitialSize: 128, |
|
|
|
lazyLoadMaxDuration: 3 * 60, |
|
|
|
seekType: 'range', |
|
|
|
autoCleanupSourceBuffer: true, |
|
|
|
}); |
|
|
|
setjessibuca(jessibuca) |
|
|
|
jessibucas.current = jessibuca |
|
|
|
play({ jessibuca }) |
|
|
|
flv.attachMediaElement(container); |
|
|
|
flv.load(); |
|
|
|
flv.play(); |
|
|
|
flvPlayer.current = flv |
|
|
|
} else { |
|
|
|
videoFront = new moment(); //验证前时间 |
|
|
|
const player = new EZUIKit.EZUIKitPlayer({ |
|
|
|
@ -524,7 +549,7 @@ const VideoPlay = ({ dispatch, actions, |
|
|
|
<> |
|
|
|
<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" + videoObj.id} className="vcmp_video" style={{ position: 'relative', height: size?.height || '100%', width: size?.width || '100%', minWidth: 240, minHeight: 135, overflow: 'hidden' }}> |
|
|
|
<VideoHeader |
|
|
|
{/* <VideoHeader |
|
|
|
operationState={operationState} changeSelectState={changeSelectState} |
|
|
|
histroyTime={histroyTime} |
|
|
|
setoperationState={setoperationState} name={name} |
|
|
|
@ -539,7 +564,7 @@ const VideoPlay = ({ dispatch, actions, |
|
|
|
playState={playState.current} |
|
|
|
videoFront={videoFront} |
|
|
|
videoAfter={videoFront} |
|
|
|
/> |
|
|
|
/> */} |
|
|
|
{/* 视频内容 */} |
|
|
|
{ |
|
|
|
// <iframe |
|
|
|
@ -557,7 +582,12 @@ const VideoPlay = ({ dispatch, actions, |
|
|
|
// style={{ pointerEvents: 'none' }} |
|
|
|
// /> |
|
|
|
} |
|
|
|
<div id={containerId} style={{ height: '100%', width: '100%', }}></div> |
|
|
|
{ |
|
|
|
videoObj.type == 'yingshi' ? |
|
|
|
<div id={containerId} style={{ height: '100%', width: '100%', }}></div> : |
|
|
|
<video id={containerId} style={{ height: '100%', width: '100%', }}></video> |
|
|
|
} |
|
|
|
|
|
|
|
{/* {videoMask ? <div style={{ height: '100%', width: '100%', position: 'absolute', top: '0', left: '0', backgroundColor: 'black', color: "red", }}><div style={{ position: 'absolute', top: 'calc(60%)', left: 0, zIndex: 99, textAlign: 'center', width: '100%' }}>{written}</div></div> : ''} */} |
|
|
|
|
|
|
|
{/* 下方操作栏 */} |
|
|
|
|
