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

播放组件的修改

release_1.1.1
wenlele 2 years ago
parent
1453d187c4
commit
3836ddde90
11 changed files with 565 additions and 464 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  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
View File

@ -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
View File

@ -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
View File

@ -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
View File

@ -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
View File

@ -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
View File

@ -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
View File

@ -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
View File

@ -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
View File

@ -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
View File

@ -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
View File

@ -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);
Write Preview
Loading…
Cancel
Save