Browse Source

播放组件的修改

release_1.1.1
wenlele 2 years ago
parent
commit
3836ddde90
  1. 248
      code/VideoAccess-VCMP/web/client/src/components/videoPlayer/videoOperation.jsx
  2. 158
      code/VideoAccess-VCMP/web/client/src/components/videoPlayer/videoOperationCloudControl.jsx
  3. 152
      code/VideoAccess-VCMP/web/client/src/components/videoPlayer/videoOperationTalk.jsx
  4. 148
      code/VideoAccess-VCMP/web/client/src/components/videoPlayer/videoPlay.jsx
  5. 7
      code/VideoAccess-VCMP/web/client/src/components/videoPlayer/videoPlay.less
  6. 47
      code/VideoAccess-VCMP/web/client/src/components/videoPlayer/videoPlayModal.jsx
  7. 155
      code/VideoAccess-VCMP/web/client/src/components/videoPlayer/voiceHeader.jsx
  8. 5
      code/VideoAccess-VCMP/web/client/src/index.less
  9. 4
      code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/sideSheet.jsx
  10. 1
      code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/containers/nvr.jsx
  11. 102
      code/VideoAccess-VCMP/web/client/src/sections/monitor/containers/videoPlayCross.jsx

248
code/VideoAccess-VCMP/web/client/src/components/videoPlayer/videoOperation.jsx

@ -13,140 +13,142 @@ import './videoPlay.less';
const timeFormat = 'YYYY-MM-DD HH:mm:ss' const timeFormat = 'YYYY-MM-DD HH:mm:ss'
const VideoOperation = ({ const VideoOperation = ({
ToastInCustom, ToastInCustom,
operationState, operation, operationState, operation,
voiceDisY, setVoiceDisY, voiceDisY, setVoiceDisY,
processDisX, setProcessDisX, processDisX, setProcessDisX,
isAdjustProcess, setIsAdjustProcess, isAdjustProcess, setIsAdjustProcess,
resolution, setResolution, resolution, setResolution,
histroyTime, setHistroyTime, histroyTime, setHistroyTime,
histroyBegain, histroyBegain,
play, pause, closeSound, openSound, play, pause, closeSound, openSound,
isPlaying, isPlaying,
videoObj, videoObj,
setYingshiPrepare, yingshiPrepareRef setYingshiPrepare, yingshiPrepareRef,
slideDown,
}) => { }) => {
const [showTimeSelect, setShowTimeSelect] = useState(false) const [showTimeSelect, setShowTimeSelect] = useState(false)
const butStyle = { const butStyle = {
border: '1px solid #fff', color: '#fff', padding: '0 10px', border: '1px solid #fff', color: '#fff', padding: '0 10px',
display: 'flex', alignItems: 'center', height: '64%', marginLeft: 12, cursor: 'pointer', display: 'flex', alignItems: 'center', height: '64%', marginLeft: 12, cursor: 'pointer',
position: 'relative' position: 'relative'
} }
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')
} }
setResolution(resolution == 'sd' ? 'hd' : 'sd') setResolution(resolution == 'sd' ? 'hd' : 'sd')
} }
const histroySelected = operationState && operationState.histroy.select const histroySelected = operationState && operationState.histroy.select
return (
<> return (
{ <>
operationState ? {
operationState.control.select ? operationState ?
<VideoOperationCloudControl videoObj={videoObj} /> : operationState.control.select ?
operationState.talk.select ? <VideoOperationCloudControl videoObj={videoObj} /> :
<VideoOperationTalk operationState.talk.select ?
videoObj={videoObj} <VideoOperationTalk
/> : videoObj={videoObj}
'' : '' /> :
} '' : ''
{ }
showTimeSelect ?
<VideoOperationHistroyTime
close={() => { setShowTimeSelect(false) }} histroyTime={histroyTime} setHistroyTime={setHistroyTime} setProcessDisX={setProcessDisX}
/>
: ''
}
{/* 下方操作 */}
<div style={{
height: histroySelected ? 44 : 42, lineHeight: `${histroySelected ? 44 : 42}px`,
background: 'linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%)', padding: '0 12px',
position: 'absolute', bottom: 0, width: '100%', zIndex: 99, color: '#fff',
}}>
{ {
histroySelected && histroyTime.length ? showTimeSelect ?
<VideoOperationHistroyProcess <VideoOperationHistroyTime
processDisX={processDisX} setProcessDisX={setProcessDisX} histroyTime={histroyTime} close={() => { setShowTimeSelect(false) }} histroyTime={histroyTime} setHistroyTime={setHistroyTime} setProcessDisX={setProcessDisX}
isAdjustProcess={isAdjustProcess} setIsAdjustProcess={setIsAdjustProcess} />
/> : '' : ''
} }
<div style={{ {/* 下方操作 */}
display: 'flex', justifyContent: 'space-between', height: '100%' <div className={slideDown == 'true' ? 'animation' : ""} style={{
height: histroySelected ? 44 : 42, lineHeight: `${histroySelected ? 44 : 42}px`,
background: 'linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%)', padding: '0 12px',
position: 'absolute', bottom: slideDown == 'true' ? -42 : 0, width: '100%', zIndex: 99, color: '#fff',
}}> }}>
{ {
operationState ? histroySelected && histroyTime.length ?
histroySelected ? <VideoOperationHistroyProcess
<> processDisX={processDisX} setProcessDisX={setProcessDisX} histroyTime={histroyTime}
<div style={{ display: 'flex', alignItems: 'center' }}> isAdjustProcess={isAdjustProcess} setIsAdjustProcess={setIsAdjustProcess}
{ /> : ''
videoObj.type != 'yingshi' ? }
isPlaying ? <div style={{
<IconPause style={{ cursor: 'pointer' }} onClick={pause} /> display: 'flex', justifyContent: 'space-between', height: '100%'
: <IconPlay style={{ cursor: 'pointer' }} onClick={play} /> }}>
: '' {
} operationState ?
<span style={{ marginLeft: 12 }}> histroySelected ?
{histroyTime.length ? `${moment(histroyTime[0]).format(timeFormat)} / ${moment(histroyTime[1]).format(timeFormat)}` : ''} <>
</span> <div style={{ display: 'flex', alignItems: 'center' }}>
</div> {
<div style={{ display: 'flex', alignItems: 'center' }}> videoObj.type != 'yingshi' ?
<VideoOperationVoice voiceDisY={voiceDisY} setVoiceDisY={setVoiceDisY} videoObj={videoObj} closeSound={closeSound} openSound={openSound} /> isPlaying ?
{ <IconPause style={{ cursor: 'pointer' }} onClick={pause} />
videoObj.type != 'yingshi' ? : <IconPlay style={{ cursor: 'pointer' }} onClick={play} />
<VideoOperationSpeed butStyle={butStyle} /> : ''
: '' }
} <span style={{ marginLeft: 12 }}>
<div style={butStyle} onClick={() => { {histroyTime.length ? `${moment(histroyTime[0]).format(timeFormat)} / ${moment(histroyTime[1]).format(timeFormat)}` : ''}
setShowTimeSelect(!showTimeSelect) </span>
}}>时间设置</div> </div>
</div> <div style={{ display: 'flex', alignItems: 'center' }}>
</> <VideoOperationVoice voiceDisY={voiceDisY} setVoiceDisY={setVoiceDisY} videoObj={videoObj} closeSound={closeSound} openSound={openSound} />
: {
<> videoObj.type != 'yingshi' ?
<div style={{ display: 'flex', alignItems: 'center' }}> <VideoOperationSpeed butStyle={butStyle} />
{ : ''
operationState ? }
operation.map(p => { <div style={butStyle} onClick={() => {
if (p.hide) return null; setShowTimeSelect(!showTimeSelect)
return <img }}>时间设置</div>
src={`/assets/images/background/video-icon-${p.key}-${operationState[p.key].select ? 'select' : 'unselect'}.png`} </div>
height={18} </>
style={{ marginRight: 24, cursor: 'pointer' }} :
onClick={p.click} <>
/> <div style={{ display: 'flex', alignItems: 'center' }}>
}) : '' {
} operationState ?
</div> operation.map(p => {
<div style={{ display: 'flex', alignItems: 'center', userSelect: 'none' }}> if (p.hide) return null;
{ return <img
videoObj.playUrlSd && videoObj.playUrlHd ? src={`/assets/images/background/video-icon-${p.key}-${operationState[p.key].select ? 'select' : 'unselect'}.png`}
resolution == 'sd' ? height={18}
<div style={butStyle} onClick={changeResolution}>标清</div> : style={{ marginRight: 24, cursor: 'pointer' }}
<div style={butStyle} onClick={changeResolution}>高清</div> onClick={(e) => { p.click(e) }}
: '' />
} }) : ''
</div> }
</> : '' </div>
} <div style={{ display: 'flex', alignItems: 'center', userSelect: 'none' }}>
{
videoObj.playUrlSd && videoObj.playUrlHd ?
resolution == 'sd' ?
<div style={butStyle} onClick={changeResolution}>标清</div> :
<div style={butStyle} onClick={changeResolution}>高清</div>
: ''
}
</div>
</> : ''
}
</div>
</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)(VideoOperation); export default connect(mapStateToProps)(VideoOperation);

158
code/VideoAccess-VCMP/web/client/src/components/videoPlayer/videoOperationCloudControl.jsx

@ -4,91 +4,93 @@ import { ysptz, gbptz } from '$utils'
import './videoPlay.less'; import './videoPlay.less';
const VideoOperationCloudControl = ({ const VideoOperationCloudControl = ({
videoObj, iotVideoServer videoObj, iotVideoServer
}) => { }) => {
const cloudControl = (ac) => { const cloudControl = (ac) => {
if (videoObj.type == 'yingshi') { if (videoObj.type == 'yingshi') {
ysptz(ac, videoObj) ysptz(ac, videoObj)
} else { } else {
gbptz(ac, videoObj, iotVideoServer) gbptz(ac, videoObj, iotVideoServer)
} }
} }
const vcmpVideo = document.getElementById('vcmp_videoplay')?.offsetHeight;
return ( console.log(vcmpVideo);
<div style={{ return (
position: 'absolute', top: 'calc(50% - 105px)', left: 'calc(50% - 125px)',
width: 210, height: 250, backgroundColor: '#00000014', borderRadius: 68
}}>
<div style={{
height: 148, width: 148, borderRadius: '100%', backgroundColor: '#2F53EA72', margin: '12px auto 18px',
position: 'relative',
}}>
{
[{
style: { top: 12, left: (148 - 24) / 2, },
click: () => { cloudControl('up') }
}, {
style: { right: 12, top: (148 - 24) / 2, },
click: () => { cloudControl('right') },
}, {
style: { bottom: 12, left: (148 - 24) / 2, },
click: () => { cloudControl('down') },
}, {
style: { left: 12, top: (148 - 24) / 2 },
click: () => { cloudControl('left') },
}].map((s, i) => {
return (
<img
src="/assets/images/background/up.png"
style={Object.assign({
height: 24, width: 24, display: 'inline-block', transform: `rotate(${i * 90}deg)`,
position: 'absolute'
}, s.style)}
onClick={s.click}
/>
)
})
}
<div style={{ <div style={{
height: 32, width: 32, border: '2px solid #ffffff24', borderRadius: '100%', position: 'absolute', top: 'calc(50% - 105px)', left: 'calc(50% - 125px)',
position: 'absolute', top: (148 - 34) / 2, left: (148 - 34) / 2 width: 210, height: 250, backgroundColor: '#00000014', borderRadius: 68, transform: `scale(${vcmpVideo / 400 > 2.5 ? 2.5 : vcmpVideo / 400})`,
}} /> }}>
</div> <div style={{
{ height: 148, width: 148, borderRadius: '100%', backgroundColor: '#2F53EA72', margin: '12px auto 18px',
[ position: 'relative',
[{ n: '+', click: () => { cloudControl('focus_in') }, }, { n: '焦距' }, { n: '-', click: () => { cloudControl('focus_out') }, }], }}>
[{ n: '+', click: () => { cloudControl('zoom_in') }, }, { n: '缩放' }, { n: '-', click: () => { cloudControl('zoom_out') }, }], {
].map(s => { [{
return ( style: { top: 12, left: (148 - 24) / 2, },
<div style={{ click: () => { cloudControl('up') }
width: 110, height: 22, margin: '0 auto 6px', display: 'flex', alignContent: 'center', justifyContent: 'space-around', }, {
backgroundColor: '#2F53EA72', color: '#fff' style: { right: 12, top: (148 - 24) / 2, },
}}> click: () => { cloudControl('right') },
{ }, {
s.map((m, mi) => { style: { bottom: 12, left: (148 - 24) / 2, },
return ( click: () => { cloudControl('down') },
<div }, {
style={{ textAlign: 'center', display: 'inline-block', cursor: mi != 1 ? 'pointer' : 'auto' }} style: { left: 12, top: (148 - 24) / 2 },
onClick={() => { m.click ? m.click() : null }} click: () => { cloudControl('left') },
>{m.n}</div> }].map((s, i) => {
) return (
<img
src="/assets/images/background/up.png"
style={Object.assign({
height: 24, width: 24, display: 'inline-block', transform: `rotate(${i * 90}deg)`,
position: 'absolute'
}, s.style)}
onClick={s.click}
/>
)
}) })
} }
</div> <div style={{
) height: 32, width: 32, border: '2px solid #ffffff24', borderRadius: '100%',
}) position: 'absolute', top: (148 - 34) / 2, left: (148 - 34) / 2
} }} />
</div > </div>
) {
[
[{ n: '+', click: () => { cloudControl('focus_in') }, }, { n: '焦距' }, { n: '-', click: () => { cloudControl('focus_out') }, }],
[{ n: '+', click: () => { cloudControl('zoom_in') }, }, { n: '缩放' }, { n: '-', click: () => { cloudControl('zoom_out') }, }],
].map(s => {
return (
<div style={{
width: 110, height: 22, margin: '0 auto 6px', display: 'flex', alignContent: 'center', justifyContent: 'space-around',
backgroundColor: '#2F53EA72', color: '#fff'
}}>
{
s.map((m, mi) => {
return (
<div
style={{ textAlign: 'center', display: 'inline-block', cursor: mi != 1 ? 'pointer' : 'auto' }}
onClick={() => { m.click ? m.click() : null }}
>{m.n}</div>
)
})
}
</div>
)
})
}
</div>
)
} }
function mapStateToProps (state) { function mapStateToProps (state) {
const { auth, global } = state; const { auth, global } = state;
return { return {
user: auth.user, user: auth.user,
iotVideoServer: global.iotVideoServer, iotVideoServer: global.iotVideoServer,
}; };
} }
export default connect(mapStateToProps)(VideoOperationCloudControl); export default connect(mapStateToProps)(VideoOperationCloudControl);

152
code/VideoAccess-VCMP/web/client/src/components/videoPlayer/videoOperationTalk.jsx

@ -10,93 +10,95 @@ import { checkAudioVideo, uploadVoice2Yingshi, sendVoice2YingshiCamera } from '$
import AudioRecoder, { RecordState } from "./audioRecoder" import AudioRecoder, { RecordState } from "./audioRecoder"
const VideoOperationTalk = ({ const VideoOperationTalk = ({
videoObj, videoObj,
}) => { }) => {
const [recordState, setRecordState] = useState(RecordState.NONE) const [recordState, setRecordState] = useState(RecordState.NONE)
const ToastInCustomContainer = ToastFactory.create({ const ToastInCustomContainer = ToastFactory.create({
getPopupContainer: () => document.getElementById('vcmp_videoplay'), getPopupContainer: () => document.getElementById('vcmp_videoplay'),
}); });
useEffect(() => { useEffect(() => {
}, []) }, [])
const startTalk = () => { const startTalk = () => {
setRecordState(RecordState.START) setRecordState(RecordState.START)
} }
const stopTalk = () => { const stopTalk = () => {
setRecordState(RecordState.STOP) setRecordState(RecordState.STOP)
} }
const onStopTalk = async (data) => { const onStopTalk = async (data) => {
setRecordState(RecordState.STOP) setRecordState(RecordState.STOP)
const { blob: audioData } = data; const { blob: audioData } = data;
if (!audioData) return; if (!audioData) return;
let buffer = await audioData.arrayBuffer(); let buffer = await audioData.arrayBuffer();
let file = new File([buffer], Date.now() + "", { let file = new File([buffer], Date.now() + "", {
type: "audio/mpeg" type: "audio/mpeg"
}); });
try { try {
let uploadRes = await uploadVoice2Yingshi({ voiceFile: file, accessToken: videoObj.yingshiToken, }) let uploadRes = await uploadVoice2Yingshi({ voiceFile: file, accessToken: videoObj.yingshiToken, })
const { url } = uploadRes const { url } = uploadRes
let sendRes = await sendVoice2YingshiCamera({ let sendRes = await sendVoice2YingshiCamera({
accessToken: videoObj.yingshiToken, accessToken: videoObj.yingshiToken,
deviceSerial: videoObj.serialNo, deviceSerial: videoObj.serialNo,
channelNo: videoObj.channelNo, channelNo: videoObj.channelNo,
fileUrl: url fileUrl: url
}); });
ToastInCustomContainer.success('已发送'); ToastInCustomContainer.success('已发送');
} catch (error) { } catch (error) {
if (error.msg) { if (error.msg) {
ToastInCustomContainer.error(error.msg); ToastInCustomContainer.error(error.msg);
} else { } else {
ToastInCustomContainer.error('发送失败'); ToastInCustomContainer.error('发送失败');
} }
} }
} }
const vcmpVideo = document.getElementById('vcmp_videoplay')?.offsetHeight;
console.log(vcmpVideo);
return ( return (
<div style={{ <div style={{
position: 'absolute', top: 'calc(50% - 88px)', left: 'calc(50% - 156px)', position: 'absolute', top: 'calc(50% - 88px)', left: 'calc(50% - 156px)',
width: 312, height: 186, backgroundColor: '#000000A5', width: 312, height: 186, backgroundColor: '#000000A5', transform: `scale(${vcmpVideo / 400 > 1.5 ? 1.5 : vcmpVideo / 400})`,
}}> }}>
<img src={`/assets/images/background/${recordState == RecordState.START ? 'talking' : 'talk'}.png`} style={{ display: 'block', margin: '12px auto' }} /> <img src={`/assets/images/background/${recordState == RecordState.START ? 'talking' : 'talk'}.png`} style={{ display: 'block', margin: '12px auto' }} />
<div <div
style={{ style={{
height: 32, width: 88, textAlign: 'center', margin: 'auto', color: '#fff', backgroundColor: '#1859C1', height: 32, width: 88, textAlign: 'center', margin: 'auto', color: '#fff', backgroundColor: '#1859C1',
lineHeight: '32px', cursor: 'pointer' lineHeight: '32px', cursor: 'pointer'
}} }}
onClick={() => { onClick={() => {
checkAudioVideo({ audio: true }).then(res => { checkAudioVideo({ audio: true }).then(res => {
// console.log(','); // console.log(',');
if (recordState === RecordState.START) { if (recordState === RecordState.START) {
stopTalk() stopTalk()
} else { } else {
startTalk() startTalk()
} }
}).catch(err => { }).catch(err => {
ToastInCustomContainer.destroyAll() ToastInCustomContainer.destroyAll()
if (err.code && err.code == 404) { if (err.code && err.code == 404) {
ToastInCustomContainer.error("浏览器不支持") ToastInCustomContainer.error("浏览器不支持")
} else { } else {
ToastInCustomContainer.error("请检查是否存在麦克风,或是否禁用麦克风") ToastInCustomContainer.error("请检查是否存在麦克风,或是否禁用麦克风")
} }
}) })
}} }}
>{recordState == RecordState.START ? '结束' : '开始'}讲话</div> >{recordState == RecordState.START ? '结束' : '开始'}讲话</div>
<AudioRecoder state={recordState} onStop={onStopTalk} /> <AudioRecoder state={recordState} onStop={onStopTalk} />
</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)(VideoOperationTalk); export default connect(mapStateToProps)(VideoOperationTalk);

148
code/VideoAccess-VCMP/web/client/src/components/videoPlayer/videoPlay.jsx

@ -18,9 +18,13 @@ const VideoPlay = ({
height, width, containerId = 'myPlayer', height, width, containerId = 'myPlayer',
// playUrl, // playUrl,
name, name,
global,
videoStyle,
changeData,
videoObj, videoObj,
sizeWh,
slideDown, //
IsSize, //16:9
// videoObj = { // videoObj = {
// type: 'yingshi', // type: 'yingshi',
// audio: false, // audio: false,
@ -44,7 +48,8 @@ const VideoPlay = ({
// }, // },
// //
iotVideoServer iotVideoServer,
local, //
}) => { }) => {
const [jessibuca, setjessibuca] = useState(null) const [jessibuca, setjessibuca] = useState(null)
const [isPlaying, setIsPlaying] = useState(false) const [isPlaying, setIsPlaying] = useState(false)
@ -55,7 +60,10 @@ 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 [resolution, setResolution] = useState('sd') // sd hd const [resolution, setResolution] = useState('sd') // sd hd
// const [frequency, setFrequency] = useState(true)
// ifream // ifream
const [yingshiPrepare, setYingshiPrepare] = useState('') const [yingshiPrepare, setYingshiPrepare] = useState('')
@ -69,6 +77,11 @@ const VideoPlay = ({
setRoll(false) setRoll(false)
}, [resolution]); }, [resolution]);
useEffect(() => {
setResolution(changeData?.hdChecked ? 'hd' : 'sd')
}, [changeData?.hdChecked])
const changeSelectState = (key) => { const changeSelectState = (key) => {
if (videoObj.type == 'yingshi' && yingshiPrepareRef.current) { if (videoObj.type == 'yingshi' && yingshiPrepareRef.current) {
return return
@ -104,7 +117,8 @@ const VideoPlay = ({
}, { }, {
key: 'talk', key: 'talk',
hide: !(videoObj.type == 'yingshi'), hide: !(videoObj.type == 'yingshi'),
click: () => { click: (e) => {
console.log(e);
changeSelectState('talk') changeSelectState('talk')
} }
}, { }, {
@ -115,6 +129,7 @@ const VideoPlay = ({
} }
changeSelectState('fullScreen') changeSelectState('fullScreen')
let player = document.getElementById('vcmp_videoplay') let player = document.getElementById('vcmp_videoplay')
console.log(player);
if (screenfull.isEnabled) { if (screenfull.isEnabled) {
screenfull.toggle(player); screenfull.toggle(player);
} }
@ -158,7 +173,6 @@ const VideoPlay = ({
// ifream // ifream
const listenYingshiMessage = async (e) => { const listenYingshiMessage = async (e) => {
const { data, origin } = e const { data, origin } = e
console.log(e);
if (origin !== 'https://open.ys7.com') return if (origin !== 'https://open.ys7.com') return
if (data.type == "handleSuccess") { if (data.type == "handleSuccess") {
setRoll(true) setRoll(true)
@ -306,13 +320,48 @@ const VideoPlay = ({
} }
} }
useEffect(() => {
if (local) {
//
const VideoLocal = document.getElementById('video_local')
setSize({ parentWidth: VideoLocal?.clientWidth, parentHeight: '100%', width: width, height: height })
} else {
setSize(sizeWh)
}
}, [sizeWh])
useEffect(() => {
if (size?.width || size?.height) {
// if (size?.parentWidth >= size?.width && size?.parentHeight >= size?.height) {
if (size?.width && size?.height) {
if (size?.height / size?.width < 0.55 || size?.height / size?.width > 0.57) {
if (size?.width / 16 > size?.height / 9) {
setSize({ ...size, width: (size?.height / 9) * 16, })
} else {
setSize({ ...size, height: (size?.width / 16) * 9 })
}
}
} else if (size?.width) {
setSize({ ...size, height: (size?.width / 16) * 9, })
} else if (size?.height) {
setSize({ ...size, width: (size?.height / 9) * 16, })
}
// } else {
// setSize({ ...size, width: size?.parentWidth, height: size?.parentHeight })
// }
} else {
if (size && size?.width / 16 > size?.height / 9) {
setSize({ ...size, height: size?.parentHeight })
} else {
setSize({ ...size, width: size?.parentWidth, })
}
}
}, [size])
return ( return (
<> <>
<div className="vcmp_videoplay" style={{ height: height ? height : '100%', width: width || '100%', overflow: 'hidden' }}> <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 id="vcmp_videoplay" style={{ position: 'relative', display: 'flex', height: '100%', width: '100%' }}> <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' }}>
{/* 顶部信息 */} {/* 顶部信息 */}
<VideoHeader {<VideoHeader
operationState={operationState} changeSelectState={changeSelectState} operationState={operationState} changeSelectState={changeSelectState}
histroyTime={histroyTime} histroyTime={histroyTime}
setoperationState={setoperationState} name={name} setoperationState={setoperationState} name={name}
@ -323,48 +372,52 @@ const VideoPlay = ({
} }
setProcessDisX={setProcessDisX} setProcessDisX={setProcessDisX}
content={videoObj.content} content={videoObj.content}
/> videoStyle={videoStyle}
/>}
{/* 视频内容 */} {/* 视频内容 */}
{
videoObj.type == 'yingshi' ? {videoObj.type == 'yingshi' ?
<iframe <iframe
frameBorder="0" frameBorder="0"
id={containerId} allowFullScreen='true'
src={ id={containerId}
`${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}` 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}`
// https://open.ys7.com/doc/zh/book/index/live_proto.html }
// {width: 400px;height: 300px;} // https://open.ys7.com/doc/zh/book/index/live_proto.html
width={'100%'} // {width: 400px;height: 300px;}
height={'100%'} width={'100%'}
allowFullScreen height={'100%'}
wmode="transparent" wmode="transparent"
style={{ pointerEvents: 'none' }} style={{ pointerEvents: 'none' }}
/> : /> :
<div <div
id={containerId} id={containerId}
style={{ style={{
height: '100%', width: '100%' height: '100%', width: '100%'
}}> }}>
</div>
</div>
} }
{/* 下方操作栏 */} {/* 下方操作栏 */}
<VideoOperation {/* 显示操作功能条件(宽高) */}
operationState={operationState} operation={operation} {size?.parentWidth > 400 ?
voiceDisY={voiceDisY} setVoiceDisY={setVoiceDisY} <VideoOperation
processDisX={processDisX} setProcessDisX={setProcessDisX} operationState={operationState} operation={operation}
isAdjustProcess={isAdjustProcess} setIsAdjustProcess={setIsAdjustProcess} voiceDisY={voiceDisY} setVoiceDisY={setVoiceDisY}
resolution={resolution} setResolution={setResolution} processDisX={processDisX} setProcessDisX={setProcessDisX}
histroyTime={histroyTime} setHistroyTime={setHistroyTime} isAdjustProcess={isAdjustProcess} setIsAdjustProcess={setIsAdjustProcess}
histroyBegain={histroyBegain} resolution={resolution} setResolution={setResolution}
play={play} pause={pause} closeSound={closeSound} openSound={openSound} histroyTime={histroyTime} setHistroyTime={setHistroyTime}
isPlaying={isPlaying} histroyBegain={histroyBegain}
videoObj={videoObj} play={play} pause={pause} closeSound={closeSound} openSound={openSound}
setYingshiPrepare={setYingshiPrepare} isPlaying={isPlaying}
yingshiPrepareRef={yingshiPrepareRef} videoObj={videoObj}
/> setYingshiPrepare={setYingshiPrepare}
yingshiPrepareRef={yingshiPrepareRef}
slideDown={slideDown}
/> : ""
}
</div> </div>
</div> </div>
@ -374,6 +427,7 @@ const VideoPlay = ({
function mapStateToProps (state) { function mapStateToProps (state) {
const { auth, global } = state; const { auth, global } = state;
console.log(global);
return { return {
user: auth.user, user: auth.user,
iotVideoServer: global.iotVideoServer, iotVideoServer: global.iotVideoServer,

7
code/VideoAccess-VCMP/web/client/src/components/videoPlayer/videoPlay.less

@ -37,3 +37,10 @@
.video_process_time { .video_process_time {
display: none; display: none;
} }
#vcmp_videoplay:hover{
.animation{
transform: translateY(-40px);
}
}

47
code/VideoAccess-VCMP/web/client/src/components/videoPlayer/videoPlayModal.jsx

@ -7,27 +7,38 @@ import './videoPlayModal.less';
const VideoPlayModal = ({ visible, close, videoObj, name }) => { const VideoPlayModal = ({ visible, close, videoObj, name }) => {
return ( return (
<Modal <Modal
visible={visible} visible={visible}
header={null} header={null}
footer={null} footer={null}
size={'large'} size={'large'}
style={{}} style={{}}
bodyStyle={{}} bodyStyle={{}}
onCancel={() => { close() }} onCancel={() => { close() }}
className="videoModal" className="videoModal"
> >
<VideoPlay height={460} videoObj={videoObj} name={name} /> <div id="video_local" style={{ width: '100%' }}>
</Modal> <VideoPlay sizeWh={{
) width: '100%',
height: 460,
parentWidth: '100%',
parentHeight: '100%',
}}
videoObj={videoObj}
name={name}
height={460}
local={true} />
</div>
</Modal>
)
} }
function mapStateToProps (state) { function mapStateToProps (state) {
const { auth } = state; const { auth } = state;
return { return {
user: auth.user, user: auth.user,
}; };
} }
export default connect(mapStateToProps)(VideoPlayModal); export default connect(mapStateToProps)(VideoPlayModal);

155
code/VideoAccess-VCMP/web/client/src/components/videoPlayer/voiceHeader.jsx

@ -8,92 +8,93 @@ import './videoPlay.less';
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 }) => { const VideoHeader = ({ operationState, changeSelectState, setProcessDisX, name, showTime, histroyTime, content, roll, videoStyle }) => {
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('')
clearInterval(upTimeInterval.current) clearInterval(upTimeInterval.current)
return return
} }
time.current = moment(showTime || undefined) time.current = moment(showTime || undefined)
if (upTimeInterval.current) { if (upTimeInterval.current) {
clearInterval(upTimeInterval.current) clearInterval(upTimeInterval.current)
} }
const upTime = () => { const upTime = () => {
time.current.add(1, 's') time.current.add(1, 's')
if (operationState && operationState.histroy.select) { if (operationState && operationState.histroy.select) {
// setProcessDisX(Math.random() * 300 + 100) // setProcessDisX(Math.random() * 300 + 100)
if (time.current.isSameOrAfter(histroyTime[1])) { if (time.current.isSameOrAfter(histroyTime[1])) {
clearInterval(upTimeInterval.current) clearInterval(upTimeInterval.current)
}
setProcessDisX(
time.current.diff(moment(histroyTime[0]), 'seconds') / moment(histroyTime[1]).diff(moment(histroyTime[0]), 'seconds') * document.getElementById('process_point').parentElement.offsetWidth
)
} }
setProcessDisX( setShowTime(time.current.format(timeFormat))
time.current.diff(moment(histroyTime[0]), 'seconds') / moment(histroyTime[1]).diff(moment(histroyTime[0]), 'seconds') * document.getElementById('process_point').parentElement.offsetWidth }
) upTime()
} upTimeInterval.current = setInterval(upTime, 1000)
setShowTime(time.current.format(timeFormat)) }
}
upTime()
upTimeInterval.current = setInterval(upTime, 1000)
}
useEffect(() => { useEffect(() => {
updateTime() updateTime()
return () => { return () => {
if (upTimeInterval.current) { if (upTimeInterval.current) {
clearInterval(upTimeInterval.current) clearInterval(upTimeInterval.current)
} }
} }
}, []) }, [])
useEffect(() => { useEffect(() => {
updateTime() updateTime()
}, [showTime]) }, [showTime])
return ( const vcmp_videoplay = document.getElementById('vcmp_videoplay')?.clientHeight
<div> return (
{roll? <div>
<div style={{ {roll ?
height: 42, lineHeight: '42px', background: '#00000026', <div style={{
position: 'absolute', width: '100%', zIndex: 99, 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,
color: '#fff' position: 'absolute', width: '100%', zIndex: 99,
}}> color: '#fff'
<Row>
<Col span={9} style={{
backgroundImage: 'url(/assets/images/background/videoPlayBg.png)',
backgroundSize: '100% 100%',
backgroundRepeat: 'no-repeat',
padding: '0 12px'
}}> }}>
{ <Row>
operationState && operationState.histroy.select ? <Col span={videoStyle == 'true' ? 0 : 9} style={{
<> backgroundImage: 'url(/assets/images/background/videoPlayBg.png)',
<IconReply style={{ marginRight: 12, cursor: 'pointer' }} onClick={() => { backgroundSize: '100% 100%',
changeSelectState('histroy') backgroundRepeat: 'no-repeat',
}} /> padding: '0 12px'
</> : '' }}>
} {
{showTime_} {name} operationState && operationState.histroy.select ?
</Col> <>
<Col span={15} style={{}}> <IconReply style={{ marginRight: 12, cursor: 'pointer' }} onClick={() => {
<div style={{ paddingRight: 12 }}> changeSelectState('histroy')
<TextScroll content={content||[]} duration={6} /> }} />
</div> </> : ''
</Col> }
</Row> {showTime_} {name}
</div>:''} </Col>
</div> <Col span={videoStyle == 'true' ? 24 : 15} style={{}}>
) <div style={{ paddingRight: 12 }}>
<TextScroll content={content || []} duration={6} />
</div>
</Col>
</Row>
</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)(VideoHeader); export default connect(mapStateToProps)(VideoHeader);

5
code/VideoAccess-VCMP/web/client/src/index.less

@ -15,7 +15,10 @@ body {
margin: 0; margin: 0;
height: 100%; height: 100%;
width: 100%; width: 100%;
overflow: hidden;
#App{
height: 100%;
}
a:link { a:link {
text-decoration: none; text-decoration: none;
color: unset color: unset

4
code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/sideSheet.jsx

@ -162,8 +162,8 @@ function SideSheets (props) {
} }
}); });
const statusNvr = nvrDetails.gbNvr const statusNvr = nvrDetails?.gbNvr
const statusCamera = nvrDetails.gbCamera const statusCamera = nvrDetails?.gbCamera
console.log(); console.log();
function colorStatus (data) { function colorStatus (data) {
switch (data) { switch (data) {

1
code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/containers/nvr.jsx

@ -98,7 +98,6 @@ const NvrHeader = (props) => {
title: "设备名称", title: "设备名称",
dataIndex: "name", dataIndex: "name",
render: (_, r, index) => { render: (_, r, index) => {
console.log(r);
return r.name return r.name
}, },
}, },

102
code/VideoAccess-VCMP/web/client/src/sections/monitor/containers/videoPlayCross.jsx

@ -3,55 +3,75 @@ import { connect } from 'react-redux';
import qs from "qs"; import qs from "qs";
import { VideoPlay } from '$components' import { VideoPlay } from '$components'
import '../style.less' import '../style.less'
import { useRef } from 'react';
const VideoPlayCross = (props) => { const VideoPlayCross = (props) => {
const [videoParams, setVideoParams] = useState(null) const [videoParams, setVideoParams] = useState(null)
const [sizeWh, setSizeWh] = useState()
const viideoData = useRef(videoParams)
useEffect(() => { useEffect(() => {
console.log(props); console.log(props);
if (props.location.search) { if (props.location.search) {
const params = qs.parse(props.location.search.slice(1)) decodeURIComponent(props.location.search)
if (params.videoObj) { const params = qs.parse(props.location.search.slice(1))
console.log(params.videoObj); if (params.videoObj) {
// params.videoObj = (new Function("return " + params.videoObj))() // params.videoObj = (new Function("return " + params.videoObj))()
params.videoObj = JSON.parse(params.videoObj) decodeURIComponent(params.videoObj)
params.height = JSON.parse(params.height) params.videoObj = JSON.parse(params.videoObj)
setVideoParams(params) // params.height = JSON.parse(params.height)
return setVideoParams(params)
} viideoData.current = params
}
console.log(videoParams);
function messageListen (e) {
//
const { data } = e
if (data && data.action) {
if (data.action == 'init_video') {
setVideoParams(data.params)
} }
} }
} function messageListen (e) {
if (window.parent) { //
window.addEventListener('message', messageListen); const { data } = e
} if (data && data.action) {
return () => { if (data.action == 'init_video' || data.action == 'epidemic_video') {
window.removeEventListener('message', messageListen); setVideoParams({ ...(viideoData.current || {}), ...data.params })
} }
}
}
const resize_ = () => {
const params = qs.parse(props.location.search.slice(1))
// if (params.local) {
// //
// 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 })
}
// }
}, []) }
return ( resize_()
<> if (window.parent) {
{ window.addEventListener('message', messageListen);
videoParams && <VideoPlay {...videoParams} /> }
} window.addEventListener('resize', resize_); //
</> return () => {
) window.removeEventListener('message', messageListen);
window.removeEventListener('resize', resize_);
}
}, [])
return (
<>
{
videoParams && <VideoPlay {...videoParams} sizeWh={sizeWh} />
}
</>
)
} }
function mapStateToProps (state) { function mapStateToProps (state) {
const { auth } = state; const { auth } = state;
return { return {
user: auth.user, user: auth.user,
}; };
} }
export default connect(mapStateToProps)(VideoPlayCross); export default connect(mapStateToProps)(VideoPlayCross);
Loading…
Cancel
Save