兼容仅开启摄像头的场景

.prettierrc.js

@@ -0,0 +1,20 @@
+module.exports = {
+  printWidth: 80, //单行长度
+  tabWidth: 2, //缩进长度
+  useTabs: false, //使用空格代替tab缩进
+  semi: true, //句末使用分号
+  singleQuote: true, //使用单引号
+  quoteProps: 'as-needed', //仅在必需时为对象的key添加引号
+  jsxSingleQuote: true, // jsx中使用单引号
+  trailingComma: 'all', //多行时尽可能打印尾随逗号
+  bracketSpacing: true, //在对象前后添加空格-eg: { foo: bar }
+  jsxBracketSameLine: true, //多属性html标签的‘>’折行放置
+  arrowParens: 'always', //单参数箭头函数参数周围使用圆括号-eg: (x) => x
+  requirePragma: false, //无需顶部注释即可格式化
+  insertPragma: false, //在已被preitter格式化的文件顶部加上标注
+  proseWrap: 'preserve', //不知道怎么翻译
+  htmlWhitespaceSensitivity: 'ignore', //对HTML全局空白不敏感
+  vueIndentScriptAndStyle: false, //不对vue中的script及style标签缩进
+  endOfLine: 'lf', //结束行形式
+  embeddedLanguageFormatting: 'auto', //对引用代码进行格式化
+};

src/css/device_live.css

@@ -79,6 +79,24 @@
     right: 0;
 }
 
+.sub_channel-list.fit-center {
+    top:0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+}
+
+.full-screen-camera-container {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
 
 .sub_channel-list.align-left .swap-icon {
     left: unset;

src/js/device_live/index.js

@@ -26,11 +26,18 @@ function runApp(runtime) {
         // 是否启用合图
         let useMerge = rst.MergedChannel;
 
+        // 是否只存在摄像头，遍历 rst.VideoDeviceInfos，如果只有摄像头（VideoDeviceSourceType === 1），那么只存在摄像头
+        let isOnlyCamera = rst.VideoDeviceInfos.every(x => x.VideoDeviceSourceType === 1);
+
         const subSources = rst.VideoDeviceInfos.filter(x => x.VideoDeviceSourceType === 1);
         if (subSources.length > 0) {
             $(".sub_channel-list").show();
             for (let i = 0; i < subSources.length; i++) {
-                buildCamera(i, subSources[i].LiveData, useMerge);
+                if (isOnlyCamera) {
+                    buildFullScreenCamera(i, subSources[i].LiveData, useMerge);
+                } else {
+                    buildCamera(i, subSources[i].LiveData, useMerge);
+                }
             }
             $(".sub_channel-list .swap-icon").on("click", function (e) {
                 // 切换摄像头左右位置
@@ -76,6 +83,13 @@ function runApp(runtime) {
                     this.title = i18n.translate("Collapse");
                 }
             });
+            if (isOnlyCamera) {
+                // 只存在摄像头，隐藏切换按钮，移除 align-right 样式，切换为 fit-center 样式
+                $(".sub_channel-list .swap-icon").css("visibility", "hidden");
+                $(".sub_channel-list .hide-icon").css("visibility", "hidden");
+                $(".sub_channel-list").removeClass("align-right");
+                $(".sub_channel-list").addClass("fit-center");
+            }
         }
 
         buildMain(rst, useMerge, subSources.length);
@@ -100,13 +114,18 @@ function runApp(runtime) {
      * @param {*} data 直播数据
      * @param {bool} useMerge 是否合图
      * @param {number} cameraCount 摄像头数量
-     * @returns 
+     * @returns
      */
     function buildMain(data, useMerge, cameraCount) {
-        const sourceIndex = data.VideoDeviceInfos.findIndex(x => x.VideoDeviceSourceType === 0);
+        let sourceIndex = data.VideoDeviceInfos.findIndex(x => x.VideoDeviceSourceType === 0);
         if (sourceIndex < 0) {
-            // TODO: 提示数据不全
-            return;
+            // 如果只存在摄像头且为合流模式，那么主路画面使用摄像头画面
+            let isOnlyCamera = data.VideoDeviceInfos.every(x => x.VideoDeviceSourceType === 1);
+            if (isOnlyCamera && useMerge) {
+                sourceIndex = data.VideoDeviceInfos.findIndex(x => x.VideoDeviceSourceType === 1);
+            } else {
+                return;
+            }
         }
         const liveData = data.VideoDeviceInfos[sourceIndex].LiveData;
 
@@ -283,6 +302,47 @@ function runApp(runtime) {
         onResize(w, h);
     }
 
+    /**
+     * 构建仅存在摄像头时的全屏摄像头
+     */
+    function buildFullScreenCamera(index, source, useMerge) {
+        const $el = addFullScreenCameraBox(index, useMerge);
+        var player = null;
+        if (!useMerge) {
+            player = buildCameraPlayer($el, source.HttpPullUrl);
+            player.setViewSize(window.innerWidth, window.innerHeight);
+        } else {
+            setCanvasContain($el, source);
+        }
+        function onResize() {
+            if (!useMerge) {
+                player.setViewSize(window.innerWidth, window.innerHeight);
+            } else {
+                setCanvasContain($el, source);
+            }
+        }
+        addResizeCallback(onResize);
+    }
+
+    /// 设置canvas元素的width和height，使其对于窗口居中且contain
+    function setCanvasContain(el, source) {
+        const cameraWidth = source.Width;
+        const cameraHeight = source.Height;
+        const viewWHR = cameraWidth / cameraHeight;
+        const windowWHR = window.innerWidth / window.innerHeight;
+        let w = 0,
+            h = 0;
+        if (viewWHR > windowWHR) {
+            w = window.innerWidth;
+            h = w / viewWHR;
+        } else {
+            h = window.innerHeight;
+            w = h * viewWHR;
+        }
+        el.find("canvas").css("width", w);
+        el.find("canvas").css("height", h);
+    }
+
     function buildCameraPlayer(el, url) {
         const loading = new Loading(el);
         const canvas = el.find('canvas')[0];
@@ -304,10 +364,20 @@ function runApp(runtime) {
 
     function addCameraBox(index, useMerge) {
         var el = $(`<div class="sub_channel-box"><div class="channel_view"><canvas id="sub_${index}"></canvas></div></div>`);
-        $('.sub_channel-list').append(el);
+        $(".sub_channel-list").append(el);
+        if (useMerge) {
+            // webgl拷贝是翻转的，需要再翻转一下
+            el.find("canvas").css("transform", "scaleY(-1)");
+        }
+        return el;
+    }
+
+    function addFullScreenCameraBox(index, useMerge) {
+        var el = $(`<div class="sub_channel-box full-screen-camera-container"><canvas id="sub_${index}"></canvas></div>`);
+        $(".sub_channel-list").append(el);
         if (useMerge) {
             // webgl拷贝是翻转的，需要再翻转一下
-            el.find('canvas').css("transform", "scaleY(-1)");
+            el.find("canvas").css("transform", "scaleY(-1)");
         }
         return el;
     }