临时提交

web/public/static/js/jessibuca/jessibuca.d.ts

@@ -171,7 +171,32 @@ declare namespace Jessibuca {
          * https://github.com/langhuihui/jessibuca/issues/152 解决方案
          * 例如：WebGL图像预处理默认每次取4字节的数据，但是540x960分辨率下的U、V分量宽度是540/2=270不能被4整除，导致绿屏。
          */
-        openWebglAlignment?: boolean
+        openWebglAlignment?: boolean,
+
+        /**
+         * webcodecs硬解码是否通过video标签渲染
+         */
+        wcsUseVideoRender?: boolean,
+
+        /**
+         * 底部控制台是否自动隐藏
+         */
+        controlAutoHide?: boolean,
+
+        /**
+         * 录制的视频格式
+         */
+        recordType?: 'webm' | 'mp4',
+
+        /**
+         * 是否使用web全屏(旋转90度)（只会在移动端生效）。
+         */
+        useWebFullScreen?: boolean,
+
+        /**
+         * 是否自动使用系统全屏
+         */
+        autoUseSystemFullScreen?: boolean,
     }
 }
 
@@ -293,10 +318,16 @@ declare class Jessibuca {
      }).catch((e)=>{
      console.log('play error',e)
      })
-     //
+     // 添加请求头
-     jessibuca.play()
+     jessibuca.play('url',{headers:{'Authorization':'test111'}}).then(()=>{
+     console.log('play success')
+     }).catch((e)=>{
+     console.log('play error',e)
+     })
      */
-    play(url?: string): Promise<void>;
+    play(url?: string, options?: {
+        headers: Object
+    }): Promise<void>;
 
     /**
      * 重新调整视图大小
@@ -427,6 +458,21 @@ declare class Jessibuca {
      */
     isRecording(): boolean;
 
+    /**
+     * 切换底部控制条 隐藏/显示
+     * @param isShow
+     *
+     * @example
+     * jessibuca.toggleControlBar(true) // 显示
+     * jessibuca.toggleControlBar(false)  // 隐藏
+     * jessibuca.toggleControlBar() // 切换 隐藏/显示
+     */
+    toggleControlBar(isShow:boolean): void;
+
+    /**
+     * 获取底部控制条是否显示
+     */
+    getControlBarShow(): boolean;
 
     /**
      * 监听 jessibuca 初始化事件

web/src/views/cloudRecord/detail.vue

@@ -45,7 +45,7 @@
           </div>
         </div>
       </div>
-      <div id="playerBox">
+      <div id="playerBox" :style="playBoxStyle">
         <div class="playBox" style="height: calc(100% - 90px); width: 100%; background-color: #000000">
           <div v-if="playLoading" style="position: relative; left: calc(50% - 32px); top: 43%; z-index: 100;color: #fff;float: left; text-align: center;">
             <div class="el-icon-loading" />
@@ -167,6 +167,11 @@ export default {
     }
   },
   computed: {
+    playBoxStyle() {
+      return {
+        height: this.isFullScreen ? 'calc(100vh - 61px)' : 'calc(100vh - 164px)'
+      }
+    },
     boxStyle() {
       if (this.showSidebar) {
         return {

web/src/views/dialog/devicePlayer.vue

@@ -7,11 +7,12 @@
       title="视频播放"
       top="0"
       append-to-body
+      width="40vw"
       :close-on-click-modal="false"
       :visible.sync="showVideoDialog"
       @close="close()"
     >
-      <div style="width: 100%; height: 100%">
+      <div style="width: 100%; ">
         <el-tabs
           v-if="Object.keys(this.player).length > 1"
           v-model="activePlayer"
@@ -20,6 +21,7 @@
           @tab-click="changePlayer"
         >
           <el-tab-pane label="Jessibuca" name="jessibuca">
+            <div style="height: 22.5vw">
               <jessibucaPlayer
                 v-if="activePlayer === 'jessibuca'"
                 ref="jessibuca"
@@ -32,6 +34,8 @@
                 autoplay
                 live
               />
+            </div>
+
           </el-tab-pane>
           <el-tab-pane label="WebRTC" name="webRTC">
             <rtc-player
@@ -64,44 +68,6 @@
 
           </el-tab-pane>
         </el-tabs>
-        <jessibucaPlayer
-          v-if="Object.keys(this.player).length == 1 && this.player.jessibuca"
-          ref="jessibuca"
-          :visible.sync="showVideoDialog"
-          :video-url="videoUrl"
-          :error="videoError"
-          :message="videoError"
-          :has-audio="hasAudio"
-          fluent
-          autoplay
-          live
-        />
-        <rtc-player
-          v-if="Object.keys(this.player).length == 1 && this.player.webRTC"
-          ref="jessibuca"
-          :visible.sync="showVideoDialog"
-          :video-url="videoUrl"
-          :error="videoError"
-          :message="videoError"
-          height="100px"
-          :has-audio="hasAudio"
-          fluent
-          autoplay
-          live
-        />
-        <h265web
-          v-if="Object.keys(this.player).length == 1 && this.player.h265web"
-          ref="jessibuca"
-          :visible.sync="showVideoDialog"
-          :video-url="videoUrl"
-          :error="videoError"
-          :message="videoError"
-          height="100px"
-          :has-audio="hasAudio"
-          fluent
-          autoplay
-          live
-        />
       </div>
       <div id="shared" style="text-align: right; margin-top: 1rem;">