视频大小兼容

packages/base-components/VmsVideo/src/demos/dmeo1.tsx

@@ -46,8 +46,8 @@ const Demo1 = (props) => {
     dataRate: 'Sub', // Main 主码流  Sub 子码流
     pandavmsHost: `ws://192.168.8.27:9876/`, // pandavms后端主机地址 eg:  ws://172.16.19.19:8080/
     address: '236644034',
-    width: 952,
-    height: 500,
+ //   width: 952,
+ //   height: 500,
   };
 
   /* {
@@ -112,8 +112,8 @@ const Demo1 = (props) => {
       <button onClick={startVideo}>开始</button>
       <button onClick={testVideo}>测试</button>
       <button onClick={destroyVideo}>销毁</button>
-      <div style={{height:'500px'}}>
-      <Video {...{ JessibucaObj: JessibucaObj, VideoInfo: VideoParam }} ref={jessibuca} />
+      <div style={{ height: '700px' }}>
+        <Video {...{ JessibucaObj: JessibucaObj, VideoInfo: VideoParam }} ref={jessibuca} />
       </div>
     </div>
   );

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

@@ -2,7 +2,7 @@
  * @Author: 634665781 634665781@qq.com
  * @Date: 2023-04-11 13:40:18
  * @LastEditors: 634665781 634665781@qq.com
- * @LastEditTime: 2023-05-18 15:11:54
+ * @LastEditTime: 2023-05-18 15:48:59
  * @FilePath: \wisdom-components\packages\base-components\VmsVideo\src\index.jsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -18,7 +18,14 @@
 import EZUIKit, { log } from 'ezuikit-js';
 
 import axios from 'axios';
-import React, { useState, useRef, useEffect, useImperativeHandle, forwardRef,useLayoutEffect } from 'react';
+import React, {
+  useState,
+  useRef,
+  useEffect,
+  useImperativeHandle,
+  forwardRef,
+  useLayoutEffect,
+} from 'react';
 import App1 from './App';
 import style from './index.less';
 // import * as Jessibuca from './JessibucaVideo/jessibuca';
@@ -51,10 +58,10 @@ const Video = (props, ref) => {
     key: `摄像头`,
   };
   useLayoutEffect(() => {
-    console.log(refs.current.offsetWidth,refs.current.offsetHeight,'宽高');
-      setWidth(refs.current.offsetWidth);
-      setHeight(refs.current.offsetHeight);
-    }, []);
+    console.log(refs.current.offsetWidth, refs.current.offsetHeight, '宽高');
+    setWidth(refs.current.offsetWidth);
+    setHeight(refs.current.offsetHeight);
+  }, []);
   const getToken = async () => {
     axios
       .post(
@@ -75,8 +82,8 @@ const Video = (props, ref) => {
           url: `ezopen://open.ys7.com/${VideoInfo.address}/${VideoInfo.channel || 1}.hd.live`,
           templete: 'simple',
           footer: ['talk', 'broadcast', 'hd', 'fullScreen'],
-         width: VideoInfo.width || width||952,
-        height: VideoInfo.height ||height||500,
+          width: VideoInfo.width || refs?.current?.offsetWidth|| 952,
+          height: VideoInfo.height || refs?.current?.offsetHeight || 500,
         });
 
         PlayersA.pause = PlayersA.stop;