diff --git a/code/VideoAccess-VCMP/web/client/assets/images/background/icon_camera.png b/code/VideoAccess-VCMP/web/client/assets/images/background/icon_camera.png index 4464f9f..bcdf530 100644 Binary files a/code/VideoAccess-VCMP/web/client/assets/images/background/icon_camera.png and b/code/VideoAccess-VCMP/web/client/assets/images/background/icon_camera.png differ diff --git a/code/VideoAccess-VCMP/web/client/assets/images/background/icon_email.png b/code/VideoAccess-VCMP/web/client/assets/images/background/icon_email.png index 184799f..7cc0dbe 100644 Binary files a/code/VideoAccess-VCMP/web/client/assets/images/background/icon_email.png and b/code/VideoAccess-VCMP/web/client/assets/images/background/icon_email.png differ diff --git a/code/VideoAccess-VCMP/web/client/assets/images/background/icon_phone.png b/code/VideoAccess-VCMP/web/client/assets/images/background/icon_phone.png index 770340a..672c334 100644 Binary files a/code/VideoAccess-VCMP/web/client/assets/images/background/icon_phone.png and b/code/VideoAccess-VCMP/web/client/assets/images/background/icon_phone.png differ diff --git a/code/VideoAccess-VCMP/web/client/src/components/textScroll.jsx b/code/VideoAccess-VCMP/web/client/src/components/textScroll.jsx index 2a4d2af..2055c63 100644 --- a/code/VideoAccess-VCMP/web/client/src/components/textScroll.jsx +++ b/code/VideoAccess-VCMP/web/client/src/components/textScroll.jsx @@ -3,77 +3,80 @@ import moment from 'moment' import './textScroll.less' function TextScroll (props) { - const { content, duration,roll } = props - const [showContent, setShowContent] = useState('') - const showIndex = useRef(0) - const initialization = useRef(false) - const cancel = useRef(false) - useEffect(() => { - if (content.length) { - if(roll){ - let contentParent = document.getElementById('marquee_box') - document.getElementById('contentPMakeUp').style.width = contentParent.clientWidth + 'px' - const contentP = document.getElementById('contentP') - contentP.style.visibility = 'visible' - setShowContent(content[0]) - window.cancelAnimationFrame(cancel.current) - contentParent.scrollLeft = 0 - initialization.current=false - showIndex.current = 0 - } - else{ - let repeatTime = moment() - let refreshTime = moment() - const scroll = () => { - let contentParent = document.getElementById('marquee_box') - document.getElementById('contentPMakeUp').style.width = contentParent.clientWidth + 'px' - //初始化 - // if(!showContent&&!initialization.current){ - if(!initialization.current){ + const { content, duration, roll } = props + console.log(content, roll); + const [showContent, setShowContent] = useState('') + const showIndex = useRef(0) + const initialization = useRef(false) + const cancel = useRef(false) + useEffect(() => { + if (content.length) { + if (roll) { + let contentParent = document.getElementById('marquee_box') + console.log(document.getElementById('contentPMakeUp')); + document.getElementById('contentPMakeUp').style.width = contentParent.clientWidth + 'px' const contentP = document.getElementById('contentP') - contentParent.scrollLeft = 0 - setShowContent(content[showIndex.current]) - showIndex.current = (showIndex.current + 1) % content.length contentP.style.visibility = 'visible' - initialization.current=true + setShowContent(content[0]) + window.cancelAnimationFrame(cancel.current) + contentParent.scrollLeft = 0 + initialization.current = false + showIndex.current = 0 + } + else { + let repeatTime = moment() + let refreshTime = moment() + const scroll = () => { + let contentParent = document.getElementById('marquee_box') + console.log(document.getElementById('contentPMakeUp')); + document.getElementById('contentPMakeUp').style.width = contentParent.clientWidth + 'px' + //初始化 + // if(!showContent&&!initialization.current){ + if (!initialization.current) { + const contentP = document.getElementById('contentP') + contentParent.scrollLeft = 0 + setShowContent(content[showIndex.current]) + showIndex.current = (showIndex.current + 1) % content.length + contentP.style.visibility = 'visible' + initialization.current = true + } + // 控制频率 + if (moment().diff(refreshTime) > 1000 / 60) { + const contentP = document.getElementById('contentP') + // 静态等待时间 + if (moment().diff(repeatTime) > 1000 * 1.5) { + contentP.style.visibility = 'visible' + } + // 滚动 + if (moment().diff(repeatTime) > 1000 * 3) { + contentParent.scrollLeft = contentParent.scrollLeft + 1 + } + // 滚完 重置 + if (contentParent.scrollLeft >= contentP.clientWidth + 24) { + contentParent.scrollLeft = 0 + repeatTime = moment() + setShowContent(content[showIndex.current]) + showIndex.current = (showIndex.current + 1) % content.length + contentP.style.visibility = 'hidden' + } + refreshTime = moment() + } + let text = null + text = window.requestAnimationFrame(scroll) + cancel.current = text } - // 控制频率 - if (moment().diff(refreshTime) > 1000 / 60) { - const contentP = document.getElementById('contentP') - // 静态等待时间 - if (moment().diff(repeatTime) > 1000 * 1.5) { - contentP.style.visibility = 'visible' - } - // 滚动 - if (moment().diff(repeatTime) > 1000 * 3) { - contentParent.scrollLeft = contentParent.scrollLeft + 1 - } - // 滚完 重置 - if (contentParent.scrollLeft >= contentP.clientWidth + 24) { - contentParent.scrollLeft = 0 - repeatTime = moment() - setShowContent(content[showIndex.current]) - showIndex.current = (showIndex.current + 1) % content.length - contentP.style.visibility = 'hidden' - } - refreshTime = moment() + window.requestAnimationFrame(scroll) } - let text = null - text=window.requestAnimationFrame(scroll) - cancel.current=text - } - window.requestAnimationFrame(scroll) } - } - }, [content,roll]) - return ( -
-

-

{showContent}

-

-

-
- ) + }, [content, roll]) + return ( +
+
+
{showContent}
+
+
+
+ ) } export default React.memo(TextScroll) diff --git a/code/VideoAccess-VCMP/web/client/src/components/videoPlayer/videoPlay.jsx b/code/VideoAccess-VCMP/web/client/src/components/videoPlayer/videoPlay.jsx index 1725163..9c910e6 100644 --- a/code/VideoAccess-VCMP/web/client/src/components/videoPlayer/videoPlay.jsx +++ b/code/VideoAccess-VCMP/web/client/src/components/videoPlayer/videoPlay.jsx @@ -92,14 +92,20 @@ const VideoPlay = ({ // 标记萤石操作中,等待ifream返回信息后清空 const yingshiPrepareRef = useRef(null) const playState = useRef(false) //播放状态 + const player_ = useRef(null) useEffect(() => { setRoll(false) - }, [resolution,]); + }, [resolution]); useEffect(() => { setResolution(changeData?.hdChecked ? 'hd' : 'sd') + if (player) { + player.stop().then(() => { + player.play({ url: changeData?.hdChecked ? videoObj.playUrlHd : videoObj.playUrlSd }) + }) + } }, [changeData?.hdChecked]) const changeSelectState = (key) => { @@ -275,7 +281,6 @@ const VideoPlay = ({ }, [processDisX]) const createPlay = async () => { - console.log(size); if (videoObj.type != 'yingshi') { try { // const inviteRes = await IotVideoServerRequest.get(VideoServeApi.invite, { @@ -318,8 +323,8 @@ const VideoPlay = ({ id: containerId, // 视频容器ID accessToken: videoObj?.yingshiToken, url: videoObj.playUrlSd, - width: size?.width, - height: size?.height, + width: setupSize('width'), + height: setupSize('height'), handleSuccess: () => { //播放成功 setRoll(true) setVideoMask(false) @@ -330,6 +335,7 @@ const VideoPlay = ({ }, }) setPlayer(player) + player_.current = player } } @@ -368,52 +374,58 @@ const VideoPlay = ({ } } - useEffect(async () => { - if (!operationRef.current?.fullScreen.select && player) { - if (videoObj.type == 'yingshi' && IsSize == 'true') { - - } else { - console.log(11111111111); - console.log(sizeWh); - - await setSize({ parentWidth: sizeWh?.parentWidth, parentHeight: sizeWh?.parentHeight, width: width || sizeWh?.parentWidth, height: height || sizeWh?.parentHeight }) - player.reSize(width || sizeWh?.parentWidth, height || sizeWh?.parentHeight) + const setupSize = (data) => { + if (!operationRef.current?.fullScreen.select) { + console.log(sizeWh); + let containerWidth = sizeWh?.parentWidth //容器的宽高和视频的宽高 + let containerHeight = sizeWh?.parentHeight + let videoWidth = width || sizeWh?.width + let videoHeight = height || sizeWh?.height + if (IsSize == 'true') { + if (containerWidth >= videoWidth && containerHeight >= videoHeight) { + if (videoHeight / videoWidth >= 0.55 && videoHeight / videoWidth <= 0.57) { + } else { + console.warn('宽高不符合尺寸要求,故返回合适的尺寸') + if (videoWidth / 16 > videoHeight / 9) { + videoWidth = (videoHeight / 9) * 16 + } else { + videoHeight = (videoWidth / 16) * 9 + } + } + } else { + console.warn('传递宽高参数有误,请确认容器大小范围内') + if (containerWidth / 16 > containerHeight / 9) { + videoWidth = (containerHeight / 9) * 16 + } else { + videoHeight = (containerWidth / 16) * 9 + } + } + + if (videoObj.type == 'yingshi' && player) { + player.reSize(videoWidth, videoHeight) + } + } else { + if (videoObj.type == 'yingshi' && player) { + player.reSize(width || sizeWh?.parentWidth, height || sizeWh?.parentHeight) + } } + setSize({ parentWidth: containerWidth, parentHeight: containerHeight, width: videoWidth, height: videoHeight }) + return data == 'width' ? videoWidth : data == 'height' ? videoHeight : '' } + } + + useEffect(() => { + setupSize() }, [sizeWh]) - // useEffect(() => { - // if (IsSize == 'true') { - // console.log(size?.parentWidth >= size?.width && size?.parentHeight >= size?.height); - // if (size?.parentWidth >= size?.width && size?.parentHeight >= size?.height) { - // if (size?.height / size?.width >= 0.55 && size?.height / size?.width <= 0.57) { - - // } else { - // console.warn('宽高不符合尺寸要求,故返回合适的尺寸') - // if (size?.width / 16 > size?.height / 9) { - // setSize({ ...size, width: (size?.height / 9) * 16, }) - // } else { - // setSize({ ...size, height: (size?.width / 16) * 9 }) - // } - // } - // } else { - // console.warn('传递宽高参数有误,请确认容器大小范围内') - // if (size?.parentWidth / 16 > size?.parentHeight / 9) { - // setSize({ ...size, width: (size?.parentHeight / 9) * 16, height: size?.parentHeight }) - // } else { - // setSize({ ...size, width: size?.parentWidth, height: (size?.parentWidth / 16) * 9 }) - // } - // } - // } - // }, [sizeWh]) return ( <>
{/* 顶部信息 */} - {size?.parentWidth > 320 ? : ""} + /> {/* 视频内容 */} - { //