[mirotalksfu] - fix init video

public/css/VideoGrid.css

@@ -172,6 +172,15 @@
     border-radius: '10px';
 }
 
+.container {
+    position: relative;
+}
+.container video {
+    z-index: 0;
+    position: relative;
+    height: 240px;
+}
+
 video {
     width: 100%;
     height: 100%;

public/js/Room.js

@@ -1245,6 +1245,9 @@ async function changeCamera(deviceId) {
     if (initStream) {
         stopTracks(initStream);
         show(initVideo);
+        if (!initVideo.classList.contains('mirror')) {
+            initVideo.classList.toggle('mirror');
+        }
     }
     const videoConstraints = {
         audio: false,

public/views/Room.html

@@ -97,14 +97,16 @@ access to use this app.
         <section>
             <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="initVideoButton" class="fas fa-video" onclick="handleVideo(event)"></button>
                 <button id="initAudioButton" class="fas fa-microphone" onclick="handleAudio(event)"></button>
                 <button id="initAudioVideoButton" class="fas fa-eye" onclick="handleAudioVideo(event)"></button>