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 VideoOperation = ({
ToastInCustom,
operationState, operation,
voiceDisY, setVoiceDisY,
processDisX, setProcessDisX,
isAdjustProcess, setIsAdjustProcess,
resolution, setResolution,
histroyTime, setHistroyTime,
histroyBegain,
play, pause, closeSound, openSound,
isPlaying,
videoObj,
setYingshiPrepare, yingshiPrepareRef
ToastInCustom,
operationState, operation,
voiceDisY, setVoiceDisY,
processDisX, setProcessDisX,
isAdjustProcess, setIsAdjustProcess,
resolution, setResolution,
histroyTime, setHistroyTime,
histroyBegain,
play, pause, closeSound, openSound,
isPlaying,
videoObj,
setYingshiPrepare, yingshiPrepareRef,
slideDown,
}) => {
const [showTimeSelect, setShowTimeSelect] = useState(false)
const [showTimeSelect, setShowTimeSelect] = useState(false)
const butStyle = {
border: '1px solid #fff', color: '#fff', padding: '0 10px',
display: 'flex', alignItems: 'center', height: '64%', marginLeft: 12, cursor: 'pointer',
position: 'relative'
}
const butStyle = {
border: '1px solid #fff', color: '#fff', padding: '0 10px',
display: 'flex', alignItems: 'center', height: '64%', marginLeft: 12, cursor: 'pointer',
position: 'relative'
}
const changeResolution = () => {
if (yingshiPrepareRef.current) {
return
}
if (videoObj.type == 'yingshi') {
yingshiPrepareRef.current = 'yingshi'
setYingshiPrepare('play')
}
setResolution(resolution == 'sd' ? 'hd' : 'sd')
}
const changeResolution = () => {
if (yingshiPrepareRef.current) {
return
}
if (videoObj.type == 'yingshi') {
yingshiPrepareRef.current = 'yingshi'
setYingshiPrepare('play')
}
setResolution(resolution == 'sd' ? 'hd' : 'sd')
}
const histroySelected = operationState && operationState.histroy.select
return (
<>
{
operationState ?
operationState.control.select ?
<VideoOperationCloudControl videoObj={videoObj} /> :
operationState.talk.select ?
<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',
}}>
const histroySelected = operationState && operationState.histroy.select
return (
<>
{
operationState ?
operationState.control.select ?
<VideoOperationCloudControl videoObj={videoObj} /> :
operationState.talk.select ?
<VideoOperationTalk
videoObj={videoObj}
/> :
'' : ''
}
{
histroySelected && histroyTime.length ?
<VideoOperationHistroyProcess
processDisX={processDisX} setProcessDisX={setProcessDisX} histroyTime={histroyTime}
isAdjustProcess={isAdjustProcess} setIsAdjustProcess={setIsAdjustProcess}
/> : ''
showTimeSelect ?
<VideoOperationHistroyTime
close={() => { setShowTimeSelect(false) }} histroyTime={histroyTime} setHistroyTime={setHistroyTime} setProcessDisX={setProcessDisX}
/>
: ''
}
<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 ?
<>
<div style={{ display: 'flex', alignItems: 'center' }}>
{
videoObj.type != 'yingshi' ?
isPlaying ?
<IconPause style={{ cursor: 'pointer' }} onClick={pause} />
: <IconPlay style={{ cursor: 'pointer' }} onClick={play} />
: ''
}
<span style={{ marginLeft: 12 }}>
{histroyTime.length ? `${moment(histroyTime[0]).format(timeFormat)} / ${moment(histroyTime[1]).format(timeFormat)}` : ''}
</span>
</div>
<div style={{ display: 'flex', alignItems: 'center' }}>
<VideoOperationVoice voiceDisY={voiceDisY} setVoiceDisY={setVoiceDisY} videoObj={videoObj} closeSound={closeSound} openSound={openSound} />
{
videoObj.type != 'yingshi' ?
<VideoOperationSpeed butStyle={butStyle} />
: ''
}
<div style={butStyle} onClick={() => {
setShowTimeSelect(!showTimeSelect)
}}>时间设置</div>
</div>
</>
:
<>
<div style={{ display: 'flex', alignItems: 'center' }}>
{
operationState ?
operation.map(p => {
if (p.hide) return null;
return <img
src={`/assets/images/background/video-icon-${p.key}-${operationState[p.key].select ? 'select' : 'unselect'}.png`}
height={18}
style={{ marginRight: 24, cursor: 'pointer' }}
onClick={p.click}
/>
}) : ''
}
</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>
</> : ''
}
{
histroySelected && histroyTime.length ?
<VideoOperationHistroyProcess
processDisX={processDisX} setProcessDisX={setProcessDisX} histroyTime={histroyTime}
isAdjustProcess={isAdjustProcess} setIsAdjustProcess={setIsAdjustProcess}
/> : ''
}
<div style={{
display: 'flex', justifyContent: 'space-between', height: '100%'
}}>
{
operationState ?
histroySelected ?
<>
<div style={{ display: 'flex', alignItems: 'center' }}>
{
videoObj.type != 'yingshi' ?
isPlaying ?
<IconPause style={{ cursor: 'pointer' }} onClick={pause} />
: <IconPlay style={{ cursor: 'pointer' }} onClick={play} />
: ''
}
<span style={{ marginLeft: 12 }}>
{histroyTime.length ? `${moment(histroyTime[0]).format(timeFormat)} / ${moment(histroyTime[1]).format(timeFormat)}` : ''}
</span>
</div>
<div style={{ display: 'flex', alignItems: 'center' }}>
<VideoOperationVoice voiceDisY={voiceDisY} setVoiceDisY={setVoiceDisY} videoObj={videoObj} closeSound={closeSound} openSound={openSound} />
{
videoObj.type != 'yingshi' ?
<VideoOperationSpeed butStyle={butStyle} />
: ''
}
<div style={butStyle} onClick={() => {
setShowTimeSelect(!showTimeSelect)
}}>时间设置</div>
</div>
</>
:
<>
<div style={{ display: 'flex', alignItems: 'center' }}>
{
operationState ?
operation.map(p => {
if (p.hide) return null;
return <img
src={`/assets/images/background/video-icon-${p.key}-${operationState[p.key].select ? 'select' : 'unselect'}.png`}
height={18}
style={{ marginRight: 24, cursor: 'pointer' }}
onClick={(e) => { p.click(e) }}
/>
}) : ''
}
</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>
</>
)
</>
)
}
function mapStateToProps (state) {
const { auth } = state;
return {
user: auth.user,
};
const { auth } = state;
return {
user: auth.user,
};
}
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';
const VideoOperationCloudControl = ({
videoObj, iotVideoServer
videoObj, iotVideoServer
}) => {
const cloudControl = (ac) => {
if (videoObj.type == 'yingshi') {
ysptz(ac, videoObj)
} else {
gbptz(ac, videoObj, iotVideoServer)
}
}
return (
<div style={{
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}
/>
)
})
}
const cloudControl = (ac) => {
if (videoObj.type == 'yingshi') {
ysptz(ac, videoObj)
} else {
gbptz(ac, videoObj, iotVideoServer)
}
}
const vcmpVideo = document.getElementById('vcmp_videoplay')?.offsetHeight;
console.log(vcmpVideo);
return (
<div style={{
height: 32, width: 32, border: '2px solid #ffffff24', borderRadius: '100%',
position: 'absolute', top: (148 - 34) / 2, left: (148 - 34) / 2
}} />
</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>
)
position: 'absolute', top: 'calc(50% - 105px)', left: 'calc(50% - 125px)',
width: 210, height: 250, backgroundColor: '#00000014', borderRadius: 68, transform: `scale(${vcmpVideo / 400 > 2.5 ? 2.5 : vcmpVideo / 400})`,
}}>
<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>
)
})
}
</div >
)
}
<div style={{
height: 32, width: 32, border: '2px solid #ffffff24', borderRadius: '100%',
position: 'absolute', top: (148 - 34) / 2, left: (148 - 34) / 2
}} />
</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) {
const { auth, global } = state;
return {
user: auth.user,
iotVideoServer: global.iotVideoServer,
};
const { auth, global } = state;
return {
user: auth.user,
iotVideoServer: global.iotVideoServer,
};
}
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"
const VideoOperationTalk = ({
videoObj,
videoObj,
}) => {
const [recordState, setRecordState] = useState(RecordState.NONE)
const [recordState, setRecordState] = useState(RecordState.NONE)
const ToastInCustomContainer = ToastFactory.create({
getPopupContainer: () => document.getElementById('vcmp_videoplay'),
});
const ToastInCustomContainer = ToastFactory.create({
getPopupContainer: () => document.getElementById('vcmp_videoplay'),
});
useEffect(() => {
useEffect(() => {
}, [])
}, [])
const startTalk = () => {
setRecordState(RecordState.START)
}
const startTalk = () => {
setRecordState(RecordState.START)
}
const stopTalk = () => {
setRecordState(RecordState.STOP)
}
const stopTalk = () => {
setRecordState(RecordState.STOP)
}
const onStopTalk = async (data) => {
setRecordState(RecordState.STOP)
const { blob: audioData } = data;
if (!audioData) return;
let buffer = await audioData.arrayBuffer();
let file = new File([buffer], Date.now() + "", {
type: "audio/mpeg"
});
const onStopTalk = async (data) => {
setRecordState(RecordState.STOP)
const { blob: audioData } = data;
if (!audioData) return;
let buffer = await audioData.arrayBuffer();
let file = new File([buffer], Date.now() + "", {
type: "audio/mpeg"
});
try {
let uploadRes = await uploadVoice2Yingshi({ voiceFile: file, accessToken: videoObj.yingshiToken, })
const { url } = uploadRes
let sendRes = await sendVoice2YingshiCamera({
accessToken: videoObj.yingshiToken,
deviceSerial: videoObj.serialNo,
channelNo: videoObj.channelNo,
fileUrl: url
});
ToastInCustomContainer.success('已发送');
} catch (error) {
if (error.msg) {
ToastInCustomContainer.error(error.msg);
} else {
ToastInCustomContainer.error('发送失败');
}
}
}
try {
let uploadRes = await uploadVoice2Yingshi({ voiceFile: file, accessToken: videoObj.yingshiToken, })
const { url } = uploadRes
let sendRes = await sendVoice2YingshiCamera({
accessToken: videoObj.yingshiToken,
deviceSerial: videoObj.serialNo,
channelNo: videoObj.channelNo,
fileUrl: url
});
ToastInCustomContainer.success('已发送');
} catch (error) {
if (error.msg) {
ToastInCustomContainer.error(error.msg);
} else {
ToastInCustomContainer.error('发送失败');
}
}
}
const vcmpVideo = document.getElementById('vcmp_videoplay')?.offsetHeight;
console.log(vcmpVideo);
return (
<div style={{
position: 'absolute', top: 'calc(50% - 88px)', left: 'calc(50% - 156px)',
width: 312, height: 186, backgroundColor: '#000000A5',
}}>
<img src={`/assets/images/background/${recordState == RecordState.START ? 'talking' : 'talk'}.png`} style={{ display: 'block', margin: '12px auto' }} />
<div
style={{
height: 32, width: 88, textAlign: 'center', margin: 'auto', color: '#fff', backgroundColor: '#1859C1',
lineHeight: '32px', cursor: 'pointer'
}}
onClick={() => {
checkAudioVideo({ audio: true }).then(res => {
// console.log(',');
if (recordState === RecordState.START) {
stopTalk()
} else {
startTalk()
}
}).catch(err => {
ToastInCustomContainer.destroyAll()
if (err.code && err.code == 404) {
ToastInCustomContainer.error("浏览器不支持")
} else {
ToastInCustomContainer.error("请检查是否存在麦克风,或是否禁用麦克风")
}
})
}}
>{recordState == RecordState.START ? '结束' : '开始'}讲话</div>
<AudioRecoder state={recordState} onStop={onStopTalk} />
</div>
)
return (
<div style={{
position: 'absolute', top: 'calc(50% - 88px)', left: 'calc(50% - 156px)',
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' }} />
<div
style={{
height: 32, width: 88, textAlign: 'center', margin: 'auto', color: '#fff', backgroundColor: '#1859C1',
lineHeight: '32px', cursor: 'pointer'
}}
onClick={() => {
checkAudioVideo({ audio: true }).then(res => {
// console.log(',');
if (recordState === RecordState.START) {
stopTalk()
} else {
startTalk()
}
}).catch(err => {
ToastInCustomContainer.destroyAll()
if (err.code && err.code == 404) {
ToastInCustomContainer.error("浏览器不支持")
} else {
ToastInCustomContainer.error("请检查是否存在麦克风,或是否禁用麦克风")
}
})
}}
>{recordState == RecordState.START ? '结束' : '开始'}讲话</div>
<AudioRecoder state={recordState} onStop={onStopTalk} />
</div>
)
}
function mapStateToProps (state) {
const { auth } = state;
return {
user: auth.user,
};
const { auth } = state;
return {
user: auth.user,
};
}
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',
// playUrl,
name,
global,
videoStyle,
changeData,
videoObj,
sizeWh,
slideDown, //
IsSize, //16:9
// videoObj = {
// type: 'yingshi',
// audio: false,
@ -44,7 +48,8 @@ const VideoPlay = ({
// },
//
iotVideoServer
iotVideoServer,
local, //
}) => {
const [jessibuca, setjessibuca] = useState(null)
const [isPlaying, setIsPlaying] = useState(false)
@ -55,7 +60,10 @@ const VideoPlay = ({
const [histroyTime, setHistroyTime] = useState([])
const [histroyBegain, setHistroyBegain] = useState()
const [roll, setRoll] = useState()//
const [size, setSize] = useState(sizeWh) //
const [resolution, setResolution] = useState('sd') // sd hd
// const [frequency, setFrequency] = useState(true)
// ifream
const [yingshiPrepare, setYingshiPrepare] = useState('')
@ -69,6 +77,11 @@ const VideoPlay = ({
setRoll(false)
}, [resolution]);
useEffect(() => {
setResolution(changeData?.hdChecked ? 'hd' : 'sd')
}, [changeData?.hdChecked])
const changeSelectState = (key) => {
if (videoObj.type == 'yingshi' && yingshiPrepareRef.current) {
return
@ -104,7 +117,8 @@ const VideoPlay = ({
}, {
key: 'talk',
hide: !(videoObj.type == 'yingshi'),
click: () => {
click: (e) => {
console.log(e);
changeSelectState('talk')
}
}, {
@ -115,6 +129,7 @@ const VideoPlay = ({
}
changeSelectState('fullScreen')
let player = document.getElementById('vcmp_videoplay')
console.log(player);
if (screenfull.isEnabled) {
screenfull.toggle(player);
}
@ -158,7 +173,6 @@ const VideoPlay = ({
// 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)
@ -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 (
<>
<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%' }}>
<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', 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}
histroyTime={histroyTime}
setoperationState={setoperationState} name={name}
@ -323,48 +372,52 @@ const VideoPlay = ({
}
setProcessDisX={setProcessDisX}
content={videoObj.content}
/>
videoStyle={videoStyle}
/>}
{/* 视频内容 */}
{
videoObj.type == 'yingshi' ?
<iframe
frameBorder="0"
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}`
}
// https://open.ys7.com/doc/zh/book/index/live_proto.html
// {width: 400px;height: 300px;}
width={'100%'}
height={'100%'}
allowFullScreen
wmode="transparent"
style={{ pointerEvents: 'none' }}
/> :
<div
id={containerId}
style={{
height: '100%', width: '100%'
}}>
</div>
{videoObj.type == 'yingshi' ?
<iframe
frameBorder="0"
allowFullScreen='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}`
}
// https://open.ys7.com/doc/zh/book/index/live_proto.html
// {width: 400px;height: 300px;}
width={'100%'}
height={'100%'}
wmode="transparent"
style={{ pointerEvents: 'none' }}
/> :
<div
id={containerId}
style={{
height: '100%', width: '100%'
}}>
</div>
}
{/* 下方操作栏 */}
<VideoOperation
operationState={operationState} operation={operation}
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}
/>
{/* 显示操作功能条件(宽高) */}
{size?.parentWidth > 400 ?
<VideoOperation
operationState={operationState} operation={operation}
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}
slideDown={slideDown}
/> : ""
}
</div>
</div>
@ -374,6 +427,7 @@ const VideoPlay = ({
function mapStateToProps (state) {
const { auth, global } = state;
console.log(global);
return {
user: auth.user,
iotVideoServer: global.iotVideoServer,

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

@ -37,3 +37,10 @@
.video_process_time {
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 }) => {
return (
<Modal
visible={visible}
header={null}
footer={null}
size={'large'}
style={{}}
bodyStyle={{}}
onCancel={() => { close() }}
className="videoModal"
>
<VideoPlay height={460} videoObj={videoObj} name={name} />
</Modal>
)
return (
<Modal
visible={visible}
header={null}
footer={null}
size={'large'}
style={{}}
bodyStyle={{}}
onCancel={() => { close() }}
className="videoModal"
>
<div id="video_local" style={{ width: '100%' }}>
<VideoPlay sizeWh={{
width: '100%',
height: 460,
parentWidth: '100%',
parentHeight: '100%',
}}
videoObj={videoObj}
name={name}
height={460}
local={true} />
</div>
</Modal>
)
}
function mapStateToProps (state) {
const { auth } = state;
return {
user: auth.user,
};
const { auth } = state;
return {
user: auth.user,
};
}
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 VideoHeader = ({ operationState, changeSelectState, setProcessDisX, name, showTime, histroyTime,content,roll }) => {
const time = useRef(moment(showTime || undefined))
const upTimeInterval = useRef(null)
const [showTime_, setShowTime] = useState(' ')
const VideoHeader = ({ operationState, changeSelectState, setProcessDisX, name, showTime, histroyTime, content, roll, videoStyle }) => {
const time = useRef(moment(showTime || undefined))
const upTimeInterval = useRef(null)
const [showTime_, setShowTime] = useState(' ')
const updateTime = () => {
if (!showTime) {
setShowTime('')
clearInterval(upTimeInterval.current)
return
}
time.current = moment(showTime || undefined)
if (upTimeInterval.current) {
clearInterval(upTimeInterval.current)
}
const upTime = () => {
time.current.add(1, 's')
if (operationState && operationState.histroy.select) {
// setProcessDisX(Math.random() * 300 + 100)
if (time.current.isSameOrAfter(histroyTime[1])) {
clearInterval(upTimeInterval.current)
const updateTime = () => {
if (!showTime) {
setShowTime('')
clearInterval(upTimeInterval.current)
return
}
time.current = moment(showTime || undefined)
if (upTimeInterval.current) {
clearInterval(upTimeInterval.current)
}
const upTime = () => {
time.current.add(1, 's')
if (operationState && operationState.histroy.select) {
// setProcessDisX(Math.random() * 300 + 100)
if (time.current.isSameOrAfter(histroyTime[1])) {
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(
time.current.diff(moment(histroyTime[0]), 'seconds') / moment(histroyTime[1]).diff(moment(histroyTime[0]), 'seconds') * document.getElementById('process_point').parentElement.offsetWidth
)
}
setShowTime(time.current.format(timeFormat))
}
upTime()
upTimeInterval.current = setInterval(upTime, 1000)
}
setShowTime(time.current.format(timeFormat))
}
upTime()
upTimeInterval.current = setInterval(upTime, 1000)
}
useEffect(() => {
updateTime()
return () => {
if (upTimeInterval.current) {
clearInterval(upTimeInterval.current)
}
}
}, [])
useEffect(() => {
updateTime()
return () => {
if (upTimeInterval.current) {
clearInterval(upTimeInterval.current)
}
}
}, [])
useEffect(() => {
updateTime()
}, [showTime])
useEffect(() => {
updateTime()
}, [showTime])
return (
<div>
{roll?
<div style={{
height: 42, lineHeight: '42px', background: '#00000026',
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'
const vcmp_videoplay = document.getElementById('vcmp_videoplay')?.clientHeight
return (
<div>
{roll ?
<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,
position: 'absolute', width: '100%', zIndex: 99,
color: '#fff'
}}>
{
operationState && operationState.histroy.select ?
<>
<IconReply style={{ marginRight: 12, cursor: 'pointer' }} onClick={() => {
changeSelectState('histroy')
}} />
</> : ''
}
{showTime_} {name}
</Col>
<Col span={15} style={{}}>
<div style={{ paddingRight: 12 }}>
<TextScroll content={content||[]} duration={6} />
</div>
</Col>
</Row>
</div>:''}
</div>
)
<Row>
<Col span={videoStyle == 'true' ? 0 : 9} style={{
backgroundImage: 'url(/assets/images/background/videoPlayBg.png)',
backgroundSize: '100% 100%',
backgroundRepeat: 'no-repeat',
padding: '0 12px'
}}>
{
operationState && operationState.histroy.select ?
<>
<IconReply style={{ marginRight: 12, cursor: 'pointer' }} onClick={() => {
changeSelectState('histroy')
}} />
</> : ''
}
{showTime_} {name}
</Col>
<Col span={videoStyle == 'true' ? 24 : 15} style={{}}>
<div style={{ paddingRight: 12 }}>
<TextScroll content={content || []} duration={6} />
</div>
</Col>
</Row>
</div> : ''}
</div>
)
}
function mapStateToProps (state) {
const { auth } = state;
return {
user: auth.user,
};
const { auth } = state;
return {
user: auth.user,
};
}
export default connect(mapStateToProps)(VideoHeader);

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

@ -15,7 +15,10 @@ body {
margin: 0;
height: 100%;
width: 100%;
overflow: hidden;
#App{
height: 100%;
}
a:link {
text-decoration: none;
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 statusCamera = nvrDetails.gbCamera
const statusNvr = nvrDetails?.gbNvr
const statusCamera = nvrDetails?.gbCamera
console.log();
function colorStatus (data) {
switch (data) {

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

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