diff --git a/code/VideoAccess-VCMP/api/app/lib/controllers/camera/index.js b/code/VideoAccess-VCMP/api/app/lib/controllers/camera/index.js index 0d274d8..43973b9 100644 --- a/code/VideoAccess-VCMP/api/app/lib/controllers/camera/index.js +++ b/code/VideoAccess-VCMP/api/app/lib/controllers/camera/index.js @@ -28,7 +28,10 @@ async function getCameraProject (ctx, next) { } : {}, required: Boolean(nvrId), attributes: ['id', 'name', 'serialNo'] - },], + }, { + model: models.SecretYingshi, + attributes: ['token'] + }], distinct: true } let abilityFind = { @@ -197,7 +200,7 @@ async function detail (ctx) { }, include: { model: models.GbCamera, - attributes: ['id', 'online'], + attributes: ['id', 'online', 'playUrl'], required: false } }) diff --git a/code/VideoAccess-VCMP/api/app/lib/models/secret_yingshi.js b/code/VideoAccess-VCMP/api/app/lib/models/secret_yingshi.js index dd2e419..cbc39b4 100644 --- a/code/VideoAccess-VCMP/api/app/lib/models/secret_yingshi.js +++ b/code/VideoAccess-VCMP/api/app/lib/models/secret_yingshi.js @@ -56,6 +56,12 @@ module.exports = dc => { comment: "", indexes: [] }); + + const Camera = dc.models.Camera; + Camera.belongsTo(SecretYingshi, { foreignKey: 'yingshiSecretId', targetKey: 'id' }); + SecretYingshi.hasMany(Camera, { foreignKey: 'yingshiSecretId', sourceKey: 'id' }); + dc.models.SecretYingshi = SecretYingshi; + return SecretYingshi; }; \ No newline at end of file diff --git a/code/VideoAccess-VCMP/api/app/lib/schedule/freshYingshiMsg.js b/code/VideoAccess-VCMP/api/app/lib/schedule/freshYingshiMsg.js index 6e9e4fd..e6cf144 100644 --- a/code/VideoAccess-VCMP/api/app/lib/schedule/freshYingshiMsg.js +++ b/code/VideoAccess-VCMP/api/app/lib/schedule/freshYingshiMsg.js @@ -54,7 +54,7 @@ module.exports = function (app, opts) { } }) // 状态更新 END - + // 状态推送 const { connected } = app.socket.sockets const roomId = 'ROOM_' + Math.random() + '_' + d.deviceSerial @@ -118,11 +118,8 @@ module.exports = function (app, opts) { const freshYingshiPlayUrl = schedule.scheduleJob( // '0 0 4 */1 *', - '*/45 * * * *', + '*/30 * * * *', async () => { - const protocolMap = { - - } try { const { models } = app.fs.dc const { token4yingshi, getYingshiPlayUrl } = app.fs.utils diff --git a/code/VideoAccess-VCMP/api/app/lib/schedule/index.js b/code/VideoAccess-VCMP/api/app/lib/schedule/index.js index c06d4c1..beb2d3d 100644 --- a/code/VideoAccess-VCMP/api/app/lib/schedule/index.js +++ b/code/VideoAccess-VCMP/api/app/lib/schedule/index.js @@ -1,6 +1,17 @@ 'use strict'; const fs = require('fs'); +const nodeSchedule = require('node-schedule'); + +const schedule = ({ + interval, immediate +}, callback) => { + const j = nodeSchedule.scheduleJob(interval, callback); + if (immediate) { + j.run(); + } + return j; +} // 将定时任务汇集未来可根据需要选取操作 module.exports = async function (app, opts) { diff --git a/code/VideoAccess-VCMP/api/app/lib/service/socket.js b/code/VideoAccess-VCMP/api/app/lib/service/socket.js index a78a16b..52587c2 100644 --- a/code/VideoAccess-VCMP/api/app/lib/service/socket.js +++ b/code/VideoAccess-VCMP/api/app/lib/service/socket.js @@ -14,13 +14,20 @@ module.exports = async function factory (app, opts) { const { connected } = app.socket.sockets const roomId = 'ROOM_' + Math.random() - if (connected) { - for (let c in connected) { - connected[c].join(roomId) - } - app.socket.to(roomId).emit('TEST', { someProperty: `【星域 ROOM:${roomId}】呼叫自然选择号！！！`, }) - } + // if (connected) { + // for (let c in connected) { + // connected[c].join(roomId) + // } + // app.socket.to(roomId).emit('TEST', { someProperty: `【星域 ROOM:${roomId}】呼叫自然选择号！！！`, }) + // } // app.socket.emit('TEST', { someProperty: '【广播】呼叫青铜时代号！！！', }) + + app.socket.emit('CAMERA_ONLINE', { + ipctype: 'yingshi', + online: Math.random() > 0.5 ? 'ON' : 'OFF', + gbId: Math.floor(Math.random() * 100), + name: 'cameraName' + }) }, 3000) } diff --git a/code/VideoAccess-VCMP/api/app/lib/utils/token4yingshi.js b/code/VideoAccess-VCMP/api/app/lib/utils/token4yingshi.js index 839214f..0bacd53 100644 --- a/code/VideoAccess-VCMP/api/app/lib/utils/token4yingshi.js +++ b/code/VideoAccess-VCMP/api/app/lib/utils/token4yingshi.js @@ -119,15 +119,14 @@ module.exports = function (app, opts) { if (playUrlRes.code == 200) { playUrl.liveUrl[quality][protocol] = playUrlRes.data.url } else { - return null + // return null } } } for (let type in typeMap) { try { - // TODO 这里404 - const playUrlRes = await app.fs.yingshiRequest.post('lapp/v2/replay/address/get', { + const playUrlRes = await app.fs.yingshiRequest.post('lapp/v2/live/address/get', { query: { accessToken: token, deviceSerial: deviceSerial, diff --git a/code/VideoAccess-VCMP/web/client/src/components/textScroll.jsx b/code/VideoAccess-VCMP/web/client/src/components/textScroll.jsx index bdbafdf..6f3c216 100644 --- a/code/VideoAccess-VCMP/web/client/src/components/textScroll.jsx +++ b/code/VideoAccess-VCMP/web/client/src/components/textScroll.jsx @@ -5,34 +5,41 @@ import './textScroll.less' function TextScroll (props) { const { content, duration } = props const [showContent, setShowContent] = useState('1231231') + const [timer, setTimer] = useState(null) + const showIndex = useRef(0) useEffect(() => { - let repeatTime = moment() - let refreshTime = moment() - const scroll = () => { - let contentParent = document.getElementById('marquee_box') - document.getElementById('contentPMakeUp').style.width = contentParent.clientWidth + 'px' - // 控制频率 - if (moment().diff(refreshTime) > 1000 / 60) { - const contentP = document.getElementById('contentP') - // 静态等待时间 - if (moment().diff(repeatTime) > 1000 * 1.5) { - contentP.style.visibility = 'visible' + if (content.length) { + let repeatTime = moment() + let refreshTime = moment() + const scroll = () => { + let contentParent = document.getElementById('marquee_box') + document.getElementById('contentPMakeUp').style.width = contentParent.clientWidth + 'px' + // 控制频率 + 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() } - if (moment().diff(repeatTime) > 1000 * 3) { - contentParent.scrollLeft = contentParent.scrollLeft + 1 - } - if (contentParent.scrollLeft >= contentP.clientWidth + 24) { - contentParent.scrollLeft = 0 - repeatTime = moment() - setShowContent('asdasd' + Math.random()) - contentP.style.visibility = 'hidden' - } - refreshTime = moment() + window.requestAnimationFrame(scroll) } window.requestAnimationFrame(scroll) } - window.requestAnimationFrame(scroll) }, []) return ( diff --git a/code/VideoAccess-VCMP/web/client/src/components/videoPlayer/videoOperation.jsx b/code/VideoAccess-VCMP/web/client/src/components/videoPlayer/videoOperation.jsx index fda585a..8b34ad3 100644 --- a/code/VideoAccess-VCMP/web/client/src/components/videoPlayer/videoOperation.jsx +++ b/code/VideoAccess-VCMP/web/client/src/components/videoPlayer/videoOperation.jsx @@ -6,12 +6,22 @@ import VideoOperationTalk from './videoOperationTalk' import VideoOperationSpeed from './videoOperationSpeed' import VideoOperationVoice from './videoOperationVoice' import VideoOperationHistroyTime from './videoOperationHistroyTime' +import VideoOperationHistroyProcess from "./videoOperationHistroyProcess"; import { IconPause, IconPlay } from '@douyinfe/semi-icons'; import './videoPlay.less'; +const timeFormat = 'YYYY-MM-DD HH:mm:ss' + const VideoOperation = ({ - operationState, operation, voiceDisY, setVoiceDisY, - resolution, setResolution + operationState, operation, + voiceDisY, setVoiceDisY, + processDisX, setProcessDisX, + isAdjustProcess, setIsAdjustProcess, + resolution, setResolution, + histroyTime, setHistroyTime, + histroyBegain, + play, pause, isPlaying, + videoObj }) => { const [showTimeSelect, setShowTimeSelect] = useState(false) @@ -25,68 +35,87 @@ const VideoOperation = ({ setResolution(resolution == 'sd' ? 'hd' : 'sd') } + const histroySelected = operationState && operationState.histroy.select return ( <> { operationState ? operationState.control.select ? - : + : operationState.talk.select ? : '' : '' } { showTimeSelect ? - { setShowTimeSelect(false) }} /> + { setShowTimeSelect(false) }} histroyTime={histroyTime} setHistroyTime={setHistroyTime} setProcessDisX={setProcessDisX} /> : '' } {/* 下方操作 */}
{ - operationState ? - operationState.histroy.select ? - <> -
- - {/* */} - {moment().format('YYYY-MM-DD HH:mm:ss')}/{moment().format('YYYY-MM-DD HH:mm:ss')} -
-
- - -
{ - setShowTimeSelect(!showTimeSelect) - }}>时间设置
-
- - : - <> -
- { - operationState ? - operation.map(p => { - return - }) : '' - } -
-
- { - resolution == 'sd' ? -
标清
: -
高清
- } -
- : '' + histroySelected && histroyTime.length ? + : '' } +
+ { + operationState ? + histroySelected ? + <> +
+ { + isPlaying ? + + : + } + + {histroyTime.length ? `${moment(histroyTime[0]).format(timeFormat)} / ${moment(histroyTime[1]).format(timeFormat)}` : ''} + +
+
+ + +
{ + setShowTimeSelect(!showTimeSelect) + }}>时间设置
+
+ + : + <> +
+ { + operationState ? + operation.map(p => { + return + }) : '' + } +
+
+ { + videoObj.playUrlSd && videoObj.playUrlHd ? + resolution == 'sd' ? +
标清
: +
高清
+ : '' + } +
+ : '' + } +
) diff --git a/code/VideoAccess-VCMP/web/client/src/components/videoPlayer/videoOperationCloudControl.jsx b/code/VideoAccess-VCMP/web/client/src/components/videoPlayer/videoOperationCloudControl.jsx index 899453b..68cd07d 100644 --- a/code/VideoAccess-VCMP/web/client/src/components/videoPlayer/videoOperationCloudControl.jsx +++ b/code/VideoAccess-VCMP/web/client/src/components/videoPlayer/videoOperationCloudControl.jsx @@ -1,8 +1,19 @@ import React, { useState, useEffect, useRef } from "react"; import { connect } from "react-redux"; +import { ysptz } from '$utils' import './videoPlay.less'; -const VideoOperationCloudControl = ({ }) => { +const VideoOperationCloudControl = ({ + videoObj, +}) => { + + const cloudControl = (ac) => { + if (videoObj.type == 'yingshi') { + ysptz(ac, videoObj) + } else { + + } + } return (
{ }}> { [{ - style: { top: 12, left: (148 - 24) / 2, } + style: { top: 12, left: (148 - 24) / 2, }, + click: () => { cloudControl('up') } }, { - style: { right: 12, top: (148 - 24) / 2, } + style: { right: 12, top: (148 - 24) / 2, }, + click: () => { cloudControl('right') }, }, { - style: { bottom: 12, left: (148 - 24) / 2, } + style: { bottom: 12, left: (148 - 24) / 2, }, + click: () => { cloudControl('down') }, }, { - style: { left: 12, top: (148 - 24) / 2, } + style: { left: 12, top: (148 - 24) / 2 }, + click: () => { cloudControl('left') }, }].map((s, i) => { return ( { height: 24, width: 24, display: 'inline-block', transform: `rotate(${i * 90}deg)`, position: 'absolute' }, s.style)} + onClick={s.click} /> ) }) @@ -41,8 +57,8 @@ const VideoOperationCloudControl = ({ }) => {
{ [ - [{ n: '+' }, { n: '焦距' }, { n: '-' }], - [{ n: '+' }, { n: '缩放' }, { n: '-' }] + [{ 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 (
{ { s.map((m, mi) => { return ( -
{m.n}
+
{ m.click ? m.click() : null }} + >{m.n}
) }) } @@ -60,7 +79,7 @@ const VideoOperationCloudControl = ({ }) => { ) }) } -
+ ) } diff --git a/code/VideoAccess-VCMP/web/client/src/components/videoPlayer/videoOperationHistroyProcess.jsx b/code/VideoAccess-VCMP/web/client/src/components/videoPlayer/videoOperationHistroyProcess.jsx new file mode 100644 index 0000000..f35db42 --- /dev/null +++ b/code/VideoAccess-VCMP/web/client/src/components/videoPlayer/videoOperationHistroyProcess.jsx @@ -0,0 +1,90 @@ +import React, { useState, useEffect, useRef } from "react"; +import { connect } from "react-redux"; +import moment from 'moment' +import './videoPlay.less'; + +const timeFormat = 'MM-DD HH:mm:ss' + +const videoOperationHistroyProcess = ({ processDisX, setProcessDisX, histroyTime, isAdjustProcess, setIsAdjustProcess, }) => { + + const [timeRangeS, setTimeRangeS] = useState(0) + const [processDisXRatio, setProcessDisXRatio] = useState(0) + + useEffect(() => { + if (histroyTime.length) { + setTimeRangeS(Math.abs(moment(histroyTime[0]).diff(moment(histroyTime[1]), 'seconds'))) + } + }, [histroyTime]) + + return ( +
+
+
+
{ + setIsAdjustProcess(true) + ev.stopPropagation(); + ev.preventDefault(); + document.onmouseup = function () { + setIsAdjustProcess(false) + document.onmousemove = null; + document.onmouseup = null; + }; + + let oevent = ev; + let distanceX = oevent.clientX + let prev = Date.now(); + const point = document.getElementById('process_point') + const parentWidth = point.parentElement.offsetWidth + document.onmousemove = function (ev) { + ev.stopPropagation(); + ev.preventDefault(); + + // 节流 + let now = Date.now(); + if (now - prev >= 6) { + let oevent = ev; + let x = processDisX + oevent.clientX - distanceX + if (x < 0) { + x = 0 + } else if (x > parentWidth) { + x = parentWidth + } + console.log(parentWidth, x); + + setProcessDisX(x) + setProcessDisXRatio(x / parentWidth) + point.style.left = x + 'px'; + prev = Date.now(); + } + }; + }} + > + {/*
+ {moment(histroyTime[0]).add(timeRangeS * processDisXRatio, 'seconds').format(timeFormat)} +
*/} +
+
+
+ ) +} + +function mapStateToProps (state) { + const { auth } = state; + return { + user: auth.user, + }; +} + +export default connect(mapStateToProps)(videoOperationHistroyProcess); \ No newline at end of file diff --git a/code/VideoAccess-VCMP/web/client/src/components/videoPlayer/videoOperationHistroyTime.jsx b/code/VideoAccess-VCMP/web/client/src/components/videoPlayer/videoOperationHistroyTime.jsx index faf3359..6317df0 100644 --- a/code/VideoAccess-VCMP/web/client/src/components/videoPlayer/videoOperationHistroyTime.jsx +++ b/code/VideoAccess-VCMP/web/client/src/components/videoPlayer/videoOperationHistroyTime.jsx @@ -1,9 +1,23 @@ import React, { useState, useEffect, useRef } from "react"; import { connect } from "react-redux"; -import { DatePicker, Button, Space } from '@douyinfe/semi-ui'; +import { DatePicker, Toast, ToastFactory, Space } from '@douyinfe/semi-ui'; import './videoPlay.less'; +import moment from "moment"; -const VideoOperationHistroyTime = ({ close }) => { +const timeFormat = 'YYYY-MM-DD HH:mm:ss' + +const VideoOperationHistroyTime = ({ close, histroyTime, setHistroyTime, setProcessDisX }) => { + const [selectedTimeRange, setSelectedTimeRange] = useState(histroyTime) + + useEffect(() => { + if (!selectedTimeRange.length) { + setSelectedTimeRange([moment().subtract(72, 'hours').format(timeFormat), moment().format(timeFormat)]) + } + }, []) + + const ToastInCustomContainer = ToastFactory.create({ + getPopupContainer: () => document.getElementById('vcmp_videoplay'), + }); return (
{ { + setSelectedTimeRange(timeRange) + }} style={{ width: '100%' }} + // disabledDate={(date, options) => { + // const { rangeStart, rangeEnd } = options; + // // console.log(date, options); + // if (!rangeStart && !rangeEnd) { + // return false + // } + // if (rangeStart) { + // return Math.abs(moment(date).diff(moment(rangeStart), 'days')) > 3 + // } + // if (rangeEnd) { + // return Math.abs(moment(date).diff(moment(rangeEnd), 'days')) > 3 + // } + // }} + // disabledTime={(date, type) => { + // console.log(date, type); + // }} />
-
+
- + 最长时间跨度不超过72小时 - - +
{ + close() + }} + style={{ + cursor: 'pointer', height: 32, width: 56, lineHeight: '32px', borderRadius: 2, + textAlign: 'center', background: '#fff', color: 'rgba(0, 0, 0, 0.65)' + }} + >取消
+
{ + if (selectedTimeRange.length == 2 && selectedTimeRange.every(t => t)) { + if (Math.abs(moment(selectedTimeRange[0]).diff(moment(selectedTimeRange[1]), 'hours')) > 72) { + ToastInCustomContainer.destroyAll() + return ToastInCustomContainer.error('所选时间超过 72 小时') + } + setHistroyTime(selectedTimeRange) + setProcessDisX(0) + close() + } + }} + style={{ + cursor: 'pointer', height: 32, width: 56, lineHeight: '32px', borderRadius: 2, + textAlign: 'center', background: '#1859C1', color: '#fff' + }} + >播放
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 6035bf6..802e169 100644 --- a/code/VideoAccess-VCMP/web/client/src/components/videoPlayer/videoPlay.jsx +++ b/code/VideoAccess-VCMP/web/client/src/components/videoPlayer/videoPlay.jsx @@ -1,28 +1,48 @@ import React, { useState, useEffect, useRef } from "react"; import { connect } from "react-redux"; import screenfull from 'screenfull'; +import moment from "moment"; import VideoHeader from './voiceHeader' import VideoOperation from './videoOperation' import './videoPlay.less'; +const timeFormat = 'YYYY-MM-DD HH:mm:ss' +const yingshiUrl = 'https://open.ys7.com/ezopen/h5/iframe' const VideoPlay = ({ - height, width, type, containerId = 'myPlayer', yingshiToken, + height, width, containerId = 'myPlayer', // playUrl, - + name, + videoObj = { + type: 'yingshi', + audio: true, + yingshiToken: 'at.3j6eyqbn0g5xvcut73v0rzdu1nh0gnxx-4ua03m82o9-12u1t9g-rtzndpyds', + playUrlSd: 'ezopen://open.ys7.com/G75922040/1.live', + // playUrl: 'ws://221.230.55.27:8081/jessica/34020000001110000077/34020000001310000003', + playUrlHd: 'ezopen://open.ys7.com/G75922040/1.hd.live', + replayUrl: 'ezopen://open.ys7.com/G75922040/1.rec', + }, }) => { const [jessibuca, setjessibuca] = useState(null) - const [playUrl, setPlayUrl] = useState( - // 'http://flv.bdplay.nodemedia.cn/live/bbb.flv' // TEST - 'ws://221.230.55.27:8081/jessica/34020000001110000077/34020000001310000001', - // 'ws://221.230.55.27:8081/jessica/34020000001110000077/34020000001310000003' - ) const [isPlaying, setIsPlaying] = useState(false) const [operationState, setoperationState] = useState() const [voiceDisY, setVoiceDisY] = useState(0) + const [processDisX, setProcessDisX] = useState(0) + const [isAdjustProcess, setIsAdjustProcess] = useState(false) + const [histroyTime, setHistroyTime] = useState([]) + const [histroyBegain, setHistroyBegain] = useState() const [resolution, setResolution] = useState('sd') // 标清 sd 高清 hd + const operationRef = useRef(null) + const processChangeTimeoutRef = useRef(null) + const changeSelectState = (key) => { - const nextOperationState = JSON.parse(JSON.stringify(operationState)) + const nextOperationState = JSON.parse(JSON.stringify(operationRef.current)) + if (key == 'histroy' && nextOperationState.histroy.select) { + // 取消历史播放 + setProcessDisX(0) + setHistroyTime([]) + } + for (let k in nextOperationState) { if (k == key) { nextOperationState[k].select = !nextOperationState[k].select @@ -30,26 +50,29 @@ const VideoPlay = ({ nextOperationState[k].select = false } } - return nextOperationState + operationRef.current = nextOperationState + + if (operationRef.current.histroy.select && histroyTime.length == 0) { + setHistroyTime([moment().subtract(72, 'hours').format(timeFormat), moment().format(timeFormat)]) + } + setoperationState(nextOperationState) } const operation = [{ key: 'control', click: () => { - let nextOperationState = changeSelectState('control') - setoperationState(nextOperationState) + changeSelectState('control') } }, { key: 'talk', click: () => { - let nextOperationState = changeSelectState('talk') - setoperationState(nextOperationState) + changeSelectState('talk') } }, { key: 'fullScreen', click: () => { - let nextOperationState = changeSelectState('fullScreen') - setoperationState(nextOperationState) + + changeSelectState('fullScreen') let player = document.getElementById('vcmp_videoplay') if (screenfull.isEnabled) { screenfull.toggle(player); @@ -58,10 +81,11 @@ const VideoPlay = ({ }, { key: 'histroy', click: () => { - let nextOperationState = changeSelectState('histroy') - setoperationState(nextOperationState) + + changeSelectState('histroy') } },] + useEffect(() => { create() let nextOperationState = {} @@ -71,44 +95,110 @@ const VideoPlay = ({ } } setoperationState(nextOperationState) + operationRef.current = nextOperationState + + // 全屏状态监听 + screenfull.on('change', () => { + if (screenfull.isFullscreen && operationRef.current && !operationRef.current['fullScreen'].select) { + changeSelectState('fullScreen') + } + if (!screenfull.isFullscreen && operationRef.current && operationRef.current['fullScreen'].select) { + changeSelectState('fullScreen') + } + }); + + // 萤石 ifream 信息监听 + // const listenYingshiMessage = async (e) => { + // const { data, origin } = e + // console.log(e); + // if (origin !== 'https://open.ys7.com') return + // if (data.type == 'stop' && data.code == 1) { + // setIsPlaying(false) + // } + // if (data.type == 'stop' && data.code == 1) { + // setIsPlaying(false) + // } + // } + // if (videoObj.type == 'yingshi') { + // window.addEventListener('message', listenYingshiMessage); + // } + // return () => { + // window.removeEventListener('message', listenYingshiMessage); + // } }, []) + useEffect(() => { + if (histroyTime.length) { + setHistroyBegain(histroyTime[0]) + document.getElementById('process_point').style.left = 0 + 'px'; // 重置进度条的位置 + } else { + setHistroyBegain(null) + } + }, [histroyTime]) + useEffect(() => { + if (operationState && operationState.histroy.select) { + if (isAdjustProcess) { + if (processChangeTimeoutRef.current) { + clearTimeout(processChangeTimeoutRef.current) + } + processChangeTimeoutRef.current = setTimeout(() => { + setHistroyBegain( + moment(histroyTime[0]) + .add( + Math.abs(moment(histroyTime[0]).diff(moment(histroyTime[1]), 'seconds')) * (processDisX / document.getElementById('process_point').parentElement.offsetWidth), + 'second' + ) + .format(timeFormat) + ) + }, 300) + } + } + }, [processDisX]) + const create = () => { - let $container = document.getElementById('container'); - const jessibuca = new window.Jessibuca({ - container: $container, - videoBuffer: 0.2, // 缓存时长 - isResize: false, - text: "", - loadingText: "加载中", - debug: true, - showBandwidth: true, // 显示网速 - operateBtns: { - fullscreen: true, - screenshot: true, - play: true, - audio: true, - }, - forceNoOffscreen: false, - isNotMute: false, - }); - setjessibuca(jessibuca) - play() + if (videoObj.type != 'yingshi') { + let $container = document.getElementById('container'); + const jessibuca = new window.Jessibuca({ + container: $container, + videoBuffer: 0.2, // 缓存时长 + isResize: false, + text: "", + loadingText: "加载中", + debug: true, + showBandwidth: true, // 显示网速 + operateBtns: { + fullscreen: true, + screenshot: true, + play: true, + audio: true, + }, + forceNoOffscreen: false, + isNotMute: false, + }); + setjessibuca(jessibuca) + play() + } } - useEffect(() => { - play() - }, [jessibuca]) + const yingshiOperation = (operation) => { + let a = document.getElementById(containerId).contentWindow.postMessage(operation, yingshiUrl) + console.log(a); + setIsPlaying(operation == 'play') + } const play = () => { - if (jessibuca && playUrl) { - jessibuca.play(playUrl); + if (videoObj.type == 'yingshi') { + yingshiOperation('play') + } else if (jessibuca && videoObj.playUrlSd) { + jessibuca.play(videoObj.playUrlSd); setIsPlaying(true) } } const pause = () => { - if (jessibuca) { + if (videoObj.type == 'yingshi') { + yingshiOperation('stop') + } else if (jessibuca) { jessibuca.pause(); setIsPlaying(false) } @@ -119,20 +209,27 @@ const VideoPlay = ({
{/* 顶部信息 */} - + {/* 视频内容 */} { - type == 'yingshi' ? + videoObj.type == 'yingshi' ?