1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
// eslint-disable-next-line no-unused-vars
import React, { useRef, useEffect, useImperativeHandle, forwardRef } from 'react';
import App1 from './App';
import style from './index.less';
// import * as Jessibuca from './JessibucaVideo/jessibuca';
// proxy.js配置
// '/jessica/': {
// target: wsServerPath,
// changeOrigin: true,
// ws: true,
// pathRewrite: {
// '/jessica': '/jessica',
// },
// },
const Video = (props, ref) => {
const _video = useRef(null);
const { VideoInfo, JessibucaObj } = props;
let baseUrl = `ws://${window.location.host}/jessica`;
let _VideoInfo = {
title: '摄像头',
dataRate: 1,
url: `${baseUrl}/live/s8`,
fullUrl: '',
key: `摄像头`,
};
useEffect(() => {
// console.log(_video);
}, []);
useImperativeHandle(
ref,
() =>
// changeVal 就是暴露给父组件的方法, newVal是父组件传递的参数
_video.current.jessibuca,
);
VideoInfo.url = VideoInfo.useFullUrl ? VideoInfo.fullUrl : baseUrl + VideoInfo.key;
let operateBtns = {
fullscreen: true,
screenshot: true,
play: true,
record: true,
audio: true,
};
_VideoInfo = { ..._VideoInfo, ...VideoInfo };
if (JessibucaObj && JessibucaObj.operateBtns) {
JessibucaObj.operateBtns = {
...operateBtns,
...JessibucaObj.operateBtns,
};
}
// console.log(_video)
return (
<div className={style.app}>
<App1 {...{ VideoInfo: _VideoInfo, JessibucaObj: JessibucaObj }} ref={_video} />
</div>
);
};
const $Video = forwardRef(Video);
export default $Video;