[mirotalksfu] - add scan to join

public/css/Room.css

@@ -463,6 +463,34 @@ body {
     align-items: center;
 }
 
+#qrRoomPopupContainer {
+    z-index: 9999;
+    position: fixed;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    padding: 10px;
+    background: var(--body-bg);
+    border: var(--border);
+    border-radius: var(--border-radius);
+    box-shadow: var(--box-shadow);
+}
+
+#qrText {
+    margin-top: 10px;
+    color: #fff;
+    font-size: 16px;
+    font-weight: bold;
+    text-align: center;
+    width: 100%;
+}
+
+#qrRoomPopup {
+    width: 256px;
+    height: 256px;
+}
+
 /*--------------------------------------------------------------
 # My settings
 --------------------------------------------------------------*/
@@ -1339,6 +1367,13 @@ select {
     display: block !important;
 }
 
+.top-center {
+    position: fixed;
+    top: 10px;
+    left: 50%;
+    transform: translateX(-50%);
+}
+
 .center {
     position: fixed;
     top: 50%;

public/js/Brand.js

@@ -64,7 +64,7 @@ let BRAND = {
     },
     about: {
         imageUrl: '../images/mirotalk-logo.gif',
-        title: '<strong>WebRTC SFU v1.8.09</strong>',
+        title: '<strong>WebRTC SFU v1.8.10</strong>',
         html: `
             <button 
                 id="support-button" 

public/js/Room.js

@@ -11,7 +11,7 @@ if (location.href.substr(0, 5) !== 'https') location.href = 'https' + location.h
  * @license For commercial or closed source, contact us at license.mirotalk@gmail.com or purchase directly via CodeCanyon
  * @license CodeCanyon: https://codecanyon.net/item/mirotalk-sfu-webrtc-realtime-video-conferences/40769970
  * @author  Miroslav Pejic - miroslav.pejic.85@gmail.com
- * @version 1.8.09
+ * @version 1.8.10
  *
  */
 
@@ -1357,7 +1357,7 @@ async function shareRoom(useNavigator = false) {
 // ####################################################
 
 function makeRoomQR() {
-    let qr = new QRious({
+    const qr = new QRious({
         element: document.getElementById('qrRoom'),
         value: RoomURL,
     });
@@ -1366,6 +1366,16 @@ function makeRoomQR() {
     });
 }
 
+function makeRoomPopupQR() {
+    const qr = new QRious({
+        element: document.getElementById('qrRoomPopup'),
+        value: RoomURL,
+    });
+    qr.set({
+        size: 256,
+    });
+}
+
 function copyRoomURL() {
     let tmpInput = document.createElement('input');
     document.body.appendChild(tmpInput);
@@ -1461,6 +1471,8 @@ function joinRoom(peer_name, room_id) {
 }
 
 function roomIsReady() {
+    makeRoomPopupQR();
+
     if (rc.isValidEmail(peer_name)) {
         myProfileAvatar.style.borderRadius = `50px`;
         myProfileAvatar.setAttribute('src', rc.genGravatar(peer_name));
@@ -1710,6 +1722,14 @@ function handleButtons() {
     shareButton.onclick = () => {
         shareRoom(true);
     };
+    shareButton.onmouseenter = () => {
+        if (isMobileDevice) return;
+        show(qrRoomPopupContainer);
+    };
+    shareButton.onmouseleave = () => {
+        if (isMobileDevice) return;
+        hide(qrRoomPopupContainer);
+    };
     hideMeButton.onclick = (e) => {
         if (isHideALLVideosActive) {
             return userLog('warning', 'To use this feature, please toggle video focus mode', 'top-end', 6000);
@@ -5304,7 +5324,7 @@ function showAbout() {
         position: 'center',
         imageUrl: BRAND.about?.imageUrl && BRAND.about.imageUrl.trim() !== '' ? BRAND.about.imageUrl : image.about,
         customClass: { image: 'img-about' },
-        title: BRAND.about?.title && BRAND.about.title.trim() !== '' ? BRAND.about.title : 'WebRTC SFU v1.8.09',
+        title: BRAND.about?.title && BRAND.about.title.trim() !== '' ? BRAND.about.title : 'WebRTC SFU v1.8.10',
         html: `
             <br />
             <div id="about">

public/js/RoomClient.js

@@ -9,7 +9,7 @@
  * @license For commercial or closed source, contact us at license.mirotalk@gmail.com or purchase directly via CodeCanyon
  * @license CodeCanyon: https://codecanyon.net/item/mirotalk-sfu-webrtc-realtime-video-conferences/40769970
  * @author  Miroslav Pejic - miroslav.pejic.85@gmail.com
- * @version 1.8.09
+ * @version 1.8.10
  *
  */
 

public/views/Room.html

@@ -119,6 +119,7 @@
         <script defer src="../js/Transcription.js"></script>
         <script defer src="../js/VideoGrid.js"></script>
         <script defer src="../js/VirtualBackground.js"></script>
+        <script defer src="../js/E2E.js"></script>
         <script defer src="../js/RoomClient.js"></script>
         <script defer src="../js/Room.js"></script>
         <script defer src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
@@ -196,6 +197,11 @@ access to use this app.
             </div>
         </div>
 
+        <div id="qrRoomPopupContainer" class="hidden top-center fadein">
+            <canvas id="qrRoomPopup"></canvas>
+            <div id="qrText">Scan to join the room</div>
+        </div>
+
         <div id="control" class="fadein">
             <button id="shareButton" class="hidden"><i class="fas fa-share-alt"></i></button>
             <button id="hideMeButton" class="hidden"><i id="hideMeIcon" class="fas fa-user"></i></button>