临时提交

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,
     }
 }
 
@@ -222,8 +247,8 @@ declare class Jessibuca {
      jessibuca.setTimeout(10)
 
      jessibuca.on('timeout',function(){
-        //
+     //
-    });
+     });
      */
     setTimeout(): void;
 
@@ -249,17 +274,17 @@ declare class Jessibuca {
      * 可以在pause 之后，再调用 `play()`方法就继续播放之前的流。
      @example
      jessibuca.pause().then(()=>{
-        console.log('pause success')
+     console.log('pause success')
 
-        jessibuca.play().then(()=>{
+     jessibuca.play().then(()=>{
 
-        }).catch((e)=>{
+     }).catch((e)=>{
 
-        })
+     })
 
-    }).catch((e)=>{
+     }).catch((e)=>{
-        console.log('pause error',e);
+     console.log('pause error',e);
-    })
+     })
      */
     pause(): Promise<void>;
 
@@ -289,14 +314,20 @@ declare class Jessibuca {
      @example
 
      jessibuca.play('url').then(()=>{
-        console.log('play success')
+     console.log('play success')
-    }).catch((e)=>{
+     }).catch((e)=>{
-        console.log('play error',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 初始化事件
@@ -477,14 +523,14 @@ declare class Jessibuca {
      * 错误信息
      * @example
      * jessibuca.on("error",function(error){
-        if(error === Jessibuca.ERROR.fetchError){
+     if(error === Jessibuca.ERROR.fetchError){
-            //
+     //
-        }
+     }
-        else if(error === Jessibuca.ERROR.webcodecsH265NotSupport){
+     else if(error === Jessibuca.ERROR.webcodecsH265NotSupport){
-            //
+     //
-        }
+     }
-        console.log('error:',error)
+     console.log('error:',error)
-    })
+     })
      */
     on(event: 'error', callback: (err: Jessibuca.ERROR) => void): void;
 

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,18 +21,21 @@
           @tab-click="changePlayer"
         >
           <el-tab-pane label="Jessibuca" name="jessibuca">
-            <jessibucaPlayer
+            <div style="height: 22.5vw">
-              v-if="activePlayer === 'jessibuca'"
+              <jessibucaPlayer
-              ref="jessibuca"
+                v-if="activePlayer === 'jessibuca'"
-              :visible.sync="showVideoDialog"
+                ref="jessibuca"
-              :video-url="videoUrl"
+                :visible.sync="showVideoDialog"
-              :error="videoError"
+                :video-url="videoUrl"
-              :message="videoError"
+                :error="videoError"
-              :has-audio="hasAudio"
+                :message="videoError"
-              fluent
+                :has-audio="hasAudio"
-              autoplay
+                fluent
-              live
+                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;">