index.jsx

// 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: '摄像头',
    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;