[mirotalksfu] - add possibility to set Video aspect ratio

public/js/Room.js

@@ -742,9 +742,15 @@ function handleSelects() {
         rc.closeThenProduce(RoomClient.mediaType.video, videoSelect.value);
     };
     // styling
+    BtnsAspectRatio.onchange = () => {
+        setAspectRatio(BtnsAspectRatio.value);
+    };
+    BtnsAspectRatio.selectedIndex = '1';
+
     BtnsBarPosition.onchange = () => {
         rc.changeBtnsBarPosition(BtnsBarPosition.value);
     };
+
     // whiteboard options
     wbDrawingColorEl.onchange = () => {
         wbCanvas.freeDrawingBrush.color = wbDrawingColorEl.value;

public/js/VideoGrid.js

@@ -1,13 +1,30 @@
 'use strict';
 
+// aspect       0       1      2      3
+let ratios = ['4:3', '16:9', '1:1', '1:2'];
+let aspect = 1;
+
+let ratio = getAspectRatio();
+
+function getAspectRatio() {
+    var ratio = ratios[aspect].split(':');
+    return ratio[1] / ratio[0];
+}
+
+function setAspectRatio(i) {
+    aspect = i;
+    ratio = getAspectRatio();
+    resizeVideoMedia();
+}
+
 function Area(Increment, Count, Width, Height, Margin = 10) {
     let i = 0;
     let w = 0;
-    let h = Increment * 0.75 + Margin * 2;
+    let h = Increment * ratio + Margin * 2;
     while (i < Count) {
         if (w + Increment > Width) {
             w = 0;
-            h = h + Increment * 0.75 + Margin * 2;
+            h = h + Increment * ratio + Margin * 2;
         }
         w = w + Increment + Margin * 2;
         i++;
@@ -44,7 +61,7 @@ function setWidth(width, margin) {
     for (let s = 0; s < Cameras.length; s++) {
         Cameras[s].style.width = width + 'px';
         Cameras[s].style.margin = margin + 'px';
-        Cameras[s].style.height = width * 0.7 + 'px';
+        Cameras[s].style.height = width * ratio + 'px';
     }
 }
 

public/view/Room.html

@@ -227,6 +227,15 @@ access to use this app.
                 </div>
 
                 <div id="tabStyling" class="tabcontent">
+                    <br />
+                    <p>Aspect ratio:</p>
+                    <br />
+                    <select id="BtnsAspectRatio" class="form-select text-light bg-dark">
+                        <option value="0">4:3</option>
+                        <option value="1">16:9</option>
+                        <option value="2">1:1</option>
+                        <option value="3">1:2</option>
+                    </select>
                     <br />
                     <p>Buttons bar:</p>
                     <br />