fix: 修改

packages/base-components/VmsVideo/src/index.jsx

@@ -44,8 +44,6 @@ const Video = (props, ref) => {
   const _video = useRef(null);
   const Players = useRef(null);
   const refs = useRef(null);
-  const [width, setWidth] = useState(0);
-  const [height, setHeight] = useState(0);
   let PlayersA = '';
   const { VideoInfo, JessibucaObj, gateway } = props;
   let baseUrl = `ws://${window.location.host}/jessica`;
@@ -57,11 +55,7 @@ const Video = (props, ref) => {
     fullUrl: '',
     key: `摄像头`,
   };
-  useLayoutEffect(() => {
-    console.log(refs.current.offsetWidth, refs.current.offsetHeight, '宽高');
-    setWidth(refs.current.offsetWidth);
-    setHeight(refs.current.offsetHeight);
-  }, []);
+
   const getToken = async () => {
     axios
       .post(
@@ -75,7 +69,6 @@ const Video = (props, ref) => {
       )
       .then(function (response) {
         let accessToken = response.data.data.accessToken;
-
         PlayersA = new EZUIKit.EZUIKitPlayer({
           id: keyID, // 视频容器ID
           accessToken: accessToken,
@@ -98,33 +91,37 @@ const Video = (props, ref) => {
       });
   };
 
-  const resizeUpdate = (e) => {
-    // 通过事件对象获取浏览器窗口的高度
-
-    //  PlayersA?.stop?.()
-    console.log(PlayersA, '视频对象11111111111111111111111111111111111111111111111');
-    PlayersA.stop();
-    getToken();
-  };
   if (VideoInfo.protocol != '萤石EZOPEN') {
     useImperativeHandle(ref, () => {
       // changeVal 就是暴露给父组件的方法, newVal是父组件传递的参数
       return _video.current.jessibuca; // _video&& _video.current&&_video.current.jessibuca
     });
   }
+
   useEffect(() => {
     if (VideoInfo.protocol != '萤石EZOPEN') {
     } else {
       getToken();
     }
-    // 页面刚加载完成后获取浏览器窗口的大小
 
-    // 页面变化时获取浏览器窗口的大小
-    window.addEventListener('resize', resizeUpdate);
+    const resizeObserver = new ResizeObserver((entries) => {
+      PlayersA &&
+        PlayersA.reSize(refs?.current?.offsetWidth || 952, refs?.current?.offsetHeight || 500);
+    });
+    refs.current && resizeObserver.observe(refs.current);
 
     return () => {
-      // 组件销毁时移除监听事件
-      window.removeEventListener('resize', resizeUpdate);
+      try {
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        resizeObserver.unobserve(refs?.current);
+        try {
+          PlayersA && PlayersA.stop();
+          PlayersA && PlayersA.destroy();
+        } catch (e) {}
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        PlayersA = null;
+        if (document.getElementById(`${keyID}`)) document.getElementById(`${keyID}`).innerHTML = '';
+      } catch (e) {}
     };
   }, []);
 
@@ -155,18 +152,10 @@ const Video = (props, ref) => {
     };
   }
 
-  useEffect(() => {
-    return () => {
-      try {
-        PlayersA && PlayersA.stop();
-      } catch (e) {}
-    };
-  }, []);
-
   return (
     <div ref={refs} className={style.app}>
       {VideoInfo.protocol == '萤石EZOPEN' ? (
-        <div id={keyID}></div>
+        <div id={keyID} />
       ) : (
         <App1 {...{ VideoInfo: _VideoInfo, JessibucaObj: JessibucaObj }} ref={_video} />
       )}