feat: 云台控制

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

@@ -12,6 +12,7 @@ class App extends React.Component {
     this.showOperateBtns = true;
     this.$container = null;
     this.forceNoOffscreen = false;
+    this.domRef = React.createRef();
 
     this.state = {
       isPlaying: false,
@@ -130,17 +131,20 @@ class App extends React.Component {
   }
 
   appendControl() {
-    const parentElement = document.getElementsByClassName("jessibuca-controls-right")[0];
-    const childElement = document.createElement("div");
-    childElement.className = 'jessibuca-control';
-    const childChildElement = document.createElement("i");
-    childElement.addEventListener("click", () => {
-      // 点击 childElement 时触发的代码  
-      this.setState({ isShowControl: !this.state.isShowControl });
-    });
-    // 将子元素添加到子元素的子元素中  
-    parentElement.insertBefore(childElement, parentElement.firstChild);
-    childElement.appendChild(childChildElement);
+    try {
+      if(!this.domRef.current || this.domRef.current.getElementsByClassName('jessibuca-control').length) return false;
+      const parentElement = this.domRef.current.getElementsByClassName("jessibuca-controls-right")[0];
+      const childElement = document.createElement("div");
+      childElement.className = 'jessibuca-control';
+      const childChildElement = document.createElement("i");
+      childElement.addEventListener("click", () => {
+        // 点击 childElement 时触发的代码  
+        this.setState({ isShowControl: !this.state.isShowControl });
+      });
+      // 将子元素添加到子元素的子元素中  
+      parentElement.insertBefore(childElement, parentElement.firstChild);
+      childElement.appendChild(childChildElement);
+    } catch (err) {}
   }
 
   closeCloudPlate() {
@@ -162,7 +166,7 @@ class App extends React.Component {
     );
   }
   render() {
-    return <div className={style.root}>{this.renderCheckedArr()}</div>;
+    return <div className={style.root} ref={this.domRef}>{this.renderCheckedArr()}</div>;
   }
 }
 

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

 .cloud-plate {
     position: absolute;
-    bottom: 38px;
-    right: 0;
+    bottom: 43px;
+    right: 5px;
     width: 278px;
     height: 165px;
     border-radius: 5px 0px 0px;
-    background: rgba(0, 0, 0, 0.75);
+    background: #000000bf;
     display: flex;
 
     .cloud-right {
@@ -194,10 +194,10 @@
 
             .close-wrapper {
                 position: absolute;
-                right: 10px;
-                top: 8px;
-                width: 21px;
-                height: 21px;
+                right: 5px;
+                top: 5px;
+                width: 18px;
+                height: 18px;
                 border-radius: 50%;
                 background: #474a4c;
                 display: flex;
@@ -208,7 +208,7 @@
 
                 :global {
                     .anticon-close {
-                        font-size: 14px;
+                        font-size: 12px;
                         color: #000000;
                         opacity: 0.6;