非webrtc拉流页,添加显/隐虚拟键功能

static/webRtcYJ/WXdraw.js

@@ -465,6 +465,24 @@ $('.PictureQuality').on('click', function () {
     right: '-4rem',
   });
 });
+
+// virtual-key-btn 显/隐藏虚拟键
+$('#virtual-key-btn').on('click', function () {
+  // 获取当前点击的按钮的innerText
+  let innerText = $(this).text();
+  if (innerText.indexOf('显示') !== -1) {
+    innerText = '隐藏虚拟键';
+    $('#wine').css('height', window.innerHeight - 50);
+    $('.bottommains').css('display', 'block');
+  } else {
+    innerText = '显示虚拟键';
+    $('#wine').css('height', window.innerHeight);
+    $('.bottommains').css('display', 'none');
+  }
+  
+  // 更新按钮的innerText
+  $(this).text(innerText);
+})
 var canDraw = false;
 //画图形
 function draw_graph(graphType) {

static/webRtcYJ/WXtrialInterface.html

@@ -111,6 +111,10 @@
           <span>分辨率</span>
         </div>
       </div>
+      <!-- 显/隐虚拟键 -->
+      <div class="virtual-key">
+        <div class="menu-btn virtual-key-btn" id="virtual-key-btn">隐藏虚拟键</div>
+      </div>
       <div class="operation">
         <div class="upload" id="showsuss" data-text="uploads">
           <img src="../static/img/wx/shangchuan_icon.png" />

static/webRtcYJ/css/WXtrialInterface.css

@@ -213,6 +213,10 @@ html {
   border-radius: 3px;
 }
 
+.menu-btn.virtual-key-btn{
+  width: 3.5rem;
+}
+
 .upload {
   margin: 0 auto;
   width: 3rem;