feat: 视频增加清晰度切换

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

 import React from 'react';
+import ReactDOM from 'react-dom';
 import CloudPlate from './components/CloudPlate';
 import style from './App.less';
 
@@ -17,6 +18,7 @@ class App extends React.Component {
     this.state = {
       isPlaying: false,
       isShowControl: false,
+      dataRate: props?.VideoInfo?.dataRate === 'Sub' ? '标清' : '高清',
     };
   }
   createAll() {
@@ -35,7 +37,6 @@ class App extends React.Component {
     this.createAll();
 
     this.jessibuca.on('pause', function (data) {
-      // console.log('timeUpdate', ts);
       console.log('pause:', data);
     });
   }
@@ -84,7 +85,6 @@ class App extends React.Component {
           this.outTime = setTimeout(() => {
             this.jessibuca.pause().then(()=>{
               this.jessibuca.play().then().catch((e)=>{
-                // console.log(e)
               })
             })
           }, 5000);
@@ -100,7 +100,8 @@ class App extends React.Component {
         isPlaying: true,
       });
       this.jessibuca.on("start", () => {
-        this.appendControl()
+        this.appendControl();
+        this.appendDataRate();
       })
     }
   }
@@ -150,6 +151,53 @@ class App extends React.Component {
     } catch (err) {}
   }
 
+  appendDataRate() {
+    const { VideoInfo } = this.props;
+    const type = VideoInfo?.type || '';
+    if(type === 'rec') return false;
+    try {
+      if(!this.domRef.current || this.domRef.current.getElementsByClassName('jessibuca-datarate').length) return false;
+      const parentElement = this.domRef.current.getElementsByClassName("jessibuca-controls-right")[0];
+      const childElement = document.createElement("div");
+      childElement.className = `jessibuca-datarate ${this.state.dataRate === '高清' ? 'jessibuca-datarate-hd' : ''}`; 
+      parentElement.insertBefore(childElement, parentElement.firstChild);
+      ReactDOM.render(<><span>高清</span><span>标清</span></>, childElement);
+      childElement.addEventListener("click", (e) => {
+        const text = e.target.innerText;
+        switch (text) {
+          case '高清':
+            if(this.state.dataRate !== '高清') {
+              this.setState({dataRate: '高清'});
+              e.currentTarget.className = 'jessibuca-datarate jessibuca-datarate-hd';
+              this.changeRate(text);
+            }
+            break;
+          case '标清':
+            if(this.state.dataRate !== '标清') {
+              this.setState({dataRate: '标清'});
+              e.currentTarget.className = 'jessibuca-datarate';
+              this.changeRate(text);
+            }
+            break;
+          default:
+            break;
+        }
+      });
+    } catch (err) {}
+  }
+
+  changeRate(text) {
+    const { VideoInfo } = this.props;
+    if (VideoInfo.url && this.jessibuca) {
+      let code = window.independence ? window.siteCode : window.globalConfig?.userInfo?.site;
+      let siteInfo = !code ? '' : `?_site=${code}`;
+      this.jessibuca.play(VideoInfo.url + `/${text == '标清' ? 2 : 1}${siteInfo}`);
+      this.setState({
+        isPlaying: true,
+      });
+    }
+  }
+
   closeCloudPlate() {
     this.setState({
       isShowControl: false,

packages/base-components/VmsVideo/src/App.less

@@ -40,5 +40,43 @@
         }
       }
     }
+
+    .jessibuca-datarate {
+      display: flex;
+      align-items: center;
+      border: 1px solid #eeeeee;
+      border-radius: 4px;
+      font-size: 12px;
+
+      span {
+        width: 36px;
+        height: 24px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        border-radius: 3px;
+
+        &:nth-child(1) {
+          color: #ffffff;
+        }
+
+        &:nth-child(2) {
+          color: #5468ff;
+        }
+      }
+
+      &.jessibuca-datarate-hd {
+        span {
+          &:nth-child(1) {
+            color: #5468ff;
+          }
+
+          &:nth-child(2) {
+            color: #ffffff;
+          }
+        }
+      }
+    }
   }
 }
\ No newline at end of file

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

@@ -46,6 +46,27 @@ const Demo1 = (props) => {
     pandavmsHost: 'ws://192.168.8.30:7000/',
     address: 'C83178215',
   };
+  let VideoParam1 = {
+    id: '38FB4BA7-C61F-466C-9B57-5B401441DABC',
+    name: 'K21319413_通道_1',
+    protocol: '萤石云HTTP-FLV',
+    username: '6c44c8e92d1c4d75a9818756025df550',
+    password: '78b7dc88f9f4bf19c2b1aabfdd995244',
+    dataRate: 'Sub', // Main 主码流  Sub 子码流
+    pandavmsHost: 'ws://192.168.10.182:7000/',
+    address: 'K21319413',
+  };
+
+  VideoParam1 = {
+    id: 'CDCD0D7D-D18B-4FEE-AD4B-DF9CA50D2986',
+    name: '设备12_通道_9',
+    protocol: 'RTSP',
+    username: 'admin',
+    password: 'zls_1234@abcd',
+    dataRate: 'Sub', // Main 主码流  Sub 子码流
+    pandavmsHost: 'ws://192.168.8.30:7000/',
+    address: '172.16.19.2',
+  };
 
   /*{
     id: '11F102BC-CE03-4E32-AE60-F297934DFE3F', // 398993BB-A795-4237-BE75-B6A7EC9D675
@@ -153,6 +174,9 @@ const Demo1 = (props) => {
       <div style={{ height: '700px' }}>
         <Video {...{ JessibucaObj: JessibucaObj, VideoInfo: VideoParam }} ref={jessibuca} />
       </div>
+      <div style={{ height: '700px' }}>
+        <Video {...{ JessibucaObj: JessibucaObj, VideoInfo: VideoParam1 }} ref={jessibuca} />
+      </div>
     </div>
   );
 };