Browse Source

fix 视频播放累计延迟+参数修改不生效

simplify_dependencies
巴林闲侠 1 year ago
parent
commit
a91a7b2a26
  1. 109
      console/client/src/sections/console/containers/index.js
  2. 22
      console/client/src/sections/console/containers/setUp.js

109
console/client/src/sections/console/containers/index.js

@ -47,6 +47,7 @@ let lidarLiveWs;
let dataLiveWsInterval; let dataLiveWsInterval;
let lidarLiveWsInterval; let lidarLiveWsInterval;
let flvPlayerInterval; let flvPlayerInterval;
let jessibucasInterval;
function Index (props) { function Index (props) {
const { dispatch, craneData } = props const { dispatch, craneData } = props
const xyCvs = useRef() const xyCvs = useRef()
@ -66,7 +67,18 @@ function Index (props) {
const flvPlayer = useRef(null) const flvPlayer = useRef(null)
const jessibucas = useRef(null) const jessibucas = useRef(null)
const draw = (type, params = {}) => { const draw = (
type,
params = {
},
) => {
// params = {
// from: 'lidarLive',
// rotation: 78,
// }
if (type == 'xz') { if (type == 'xz') {
return return
} }
@ -110,11 +122,15 @@ function Index (props) {
xyCtx.fill(); xyCtx.fill();
xyCtx.stroke(); xyCtx.stroke();
// 吊臂 - 长~ // 吊臂 - 长~
let armLength = ((params.boom || radius) / radiusRate) * 2;
if (armLength <= (radius / 5)) {
armLength = radius / 5
}
xyCtx.moveTo(...center); xyCtx.moveTo(...center);
xyCtx.lineTo( xyCtx.lineTo(
...calculateIntersection( ...calculateIntersection(
...center, ...center,
((params.boom || radius) / radiusRate) * 2, // 臂长 armLength, // 臂长
curRotation curRotation
) )
); );
@ -563,7 +579,10 @@ function Index (props) {
if (msg) { if (msg) {
// console.log(msg); // console.log(msg);
draw('xy', { ...msg, from: 'lidarLive' }) draw('xy', {
...msg,
from: 'lidarLive',
})
} }
} }
@ -576,39 +595,54 @@ function Index (props) {
try { try {
setVideo(res.payload.data) setVideo(res.payload.data)
const container = document.getElementById('video-play'); const container = document.getElementById('video-play');
console.log(`准备播放`); console.log(`准备播放`, res.payload.data.ws_flv);
// 播放方式 1 // 播放方式 1
const jessibuca = new window.Jessibuca({ const playJessibuca = () => {
container: container, const jessibuca = new window.Jessibuca({
videoBuffer: 0.2, // 缓存时长 container: container,
isResize: false, videoBuffer: 0.2, // 缓存时长
text: "", isResize: false,
loadingText: "加载中", text: "",
debug: true, loadingText: "加载中",
showBandwidth: false, // 显示网速 debug: true,
showBandwidth: false, showBandwidth: false, // 显示网速
operateBtns: { showBandwidth: false,
fullscreen: false, operateBtns: {
screenshot: false, fullscreen: false,
play: false, screenshot: false,
audio: false, play: false,
audio: false,
fullscreen: true,
screenshot: true, fullscreen: true,
play: true, screenshot: true,
audio: true, play: true,
}, audio: true,
forceNoOffscreen: false, },
controlAutoHide: true, forceNoOffscreen: false,
isNotMute: false, controlAutoHide: true,
isNotMute: false,
// useMSE:true,
// autoWasm:true // useMSE:true,
}); // autoWasm:true
jessibucas.current = jessibuca });
jessibuca.play( jessibucas.current = jessibuca
`${res.payload.data.ws_flv}` jessibuca.play(
); // `http://flv.bdplay.nodemedia.cn/live/bbb.flv`
// `ws://localhost:8081/jessica/34020000001320000001/34020000001320000001.flv`
`${res.payload.data.ws_flv}`
);
}
playJessibuca()
jessibucasInterval = setInterval(() => {
jessibucas.current.destroy()
playJessibuca()
},
1000 * 60 * 30
// 1000 * 10
)
// 播放方式 2 // 播放方式 2
// const flv = flvjs.createPlayer({ // const flv = flvjs.createPlayer({
@ -679,9 +713,12 @@ function Index (props) {
window.clearInterval(lidarLiveWsInterval); window.clearInterval(lidarLiveWsInterval);
lidarLiveWs.close();//关闭连接 lidarLiveWs.close();//关闭连接
} }
if(jessibucas.current){ if (jessibucas.current) {
jessibucas.current.destroy() jessibucas.current.destroy()
} }
if (jessibucasInterval.current) {
clearInterval(jessibucasInterval.current)
}
} }
}, []) }, [])

22
console/client/src/sections/console/containers/setUp.js

@ -16,6 +16,8 @@ function SetUp ({ dispatch, craneData }) {
const [formItems, setFormItems] = useState([]) const [formItems, setFormItems] = useState([])
const [formIndex, setFormIndex] = useState(0) const [formIndex, setFormIndex] = useState(0)
const craneDataRef = useRef(craneData)
const [levelOneMenu] = useState([{ const [levelOneMenu] = useState([{
n: '参数标定', n: '参数标定',
ic: <BlockOutlined className='setup-icon' />, ic: <BlockOutlined className='setup-icon' />,
@ -202,17 +204,17 @@ function SetUp ({ dispatch, craneData }) {
) )
} }
const initData = () => { const initData = (craneData_) => {
console.log(craneData);
setTimeout(() => { setTimeout(() => {
form.setFieldsValue({ form.setFieldsValue({
...craneData ...(craneData_ || craneDataRef.current || craneData)
}) })
}, 0) }, 300)
} }
useEffect(() => { useEffect(() => {
initData() craneDataRef.current = craneData
initData(craneData)
}, [craneData]) }, [craneData])
return ( return (
@ -250,10 +252,12 @@ function SetUp ({ dispatch, craneData }) {
key={index} key={index}
name={item.name} name={item.name}
label={item.label} label={item.label}
// rules={[{ // rules={[{
// // required: true, // // required: true,
// // message: '请输入' + item.label // // message: '请输入' + item.label
// }]} // }]}
valuePropName={item.type == 'boolean' ? "checked" : undefined}
> >
{ {
item.type === 'number' ? item.type === 'number' ?

Loading…
Cancel
Save