[mirotalk] - fix init video

public/css/videoGrid.css

@@ -115,6 +115,15 @@
 # Video 
 --------------------------------------------------------------*/
 
+.container {
+    position: relative;
+}
+.container video {
+    z-index: 0;
+    position: relative;
+    height: 240px;
+}
+
 .videoCircle {
     position: absolute;
     width: var(--vmi-wh);

public/js/client.js

@@ -1368,6 +1368,9 @@ async function changeInitCamera(deviceId) {
     if (initStream) {
         stopTracks(initStream);
         initVideo.style.display = 'block';
+        if (!initVideo.classList.contains('mirror')) {
+            initVideo.classList.toggle('mirror');
+        }
     }
     // Get video constraints
     let videoConstraints = await getVideoConstraints('default');

public/views/client.html

@@ -76,14 +76,16 @@ access to use this app.
 
         <div id="initUser" class="init-user hidden">
             <!-- <p>Please allow the camera & microphone access to use this app.</p> -->
-            <video
-                id="initVideo"
-                playsinline="true"
-                autoplay=""
-                class="mirror"
-                poster="../images/loader.gif"
-                style="object-fit: var(--videoObjFit)"
-            ></video>
+            <div class="container">
+                <video
+                    id="initVideo"
+                    playsinline="true"
+                    autoplay=""
+                    class="mirror"
+                    poster="../images/loader.gif"
+                    style="object-fit: var(--videoObjFit)"
+                ></video>
+            </div>
             <button id="initVideoBtn" class="fas fa-video" onclick="handleVideo(event, true)"></button>
             <button id="initAudioBtn" class="fas fa-microphone" onclick="handleAudio(event, true)"></button>
             <button id="initScreenShareBtn" class="fas fa-desktop"></button>