[mirotalkwebrtc] - add QR room sharing

frontend/html/client.html

@@ -29,6 +29,8 @@
         <script type="text/javascript" src="https://cdn.datatables.net/1.13.1/js/dataTables.bootstrap5.min.js"></script>
         <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
         <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
+        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/qrious.min.js"></script>
+
         <!-- <script type="text/javascript" src="https://unpkg.com/@popperjs/core@2"></script>
         <script type="text/javascript" src="https://unpkg.com/tippy.js@6"></script> -->
         <script

frontend/js/client.js

@@ -9,7 +9,7 @@
  * @license For private project or commercial purposes contact us at: [email protected] or purchase it directly via Code Canyon:
  * @license https://codecanyon.net/item/a-selfhosted-mirotalks-webrtc-rooms-scheduler-server/42643313
  * @author  Miroslav Pejic - [email protected]
- * @version 1.0.79
+ * @version 1.0.80
  */
 
 const isMobile = !!/Android|webOS|iPhone|iPad|iPod|BB10|BlackBerry|IEMobile|Opera Mini|Mobile|mobile/i.test(
@@ -590,17 +590,41 @@ function setRandomRoom(id) {
 }
 
 function copyRoom(id) {
-    const room = document.getElementById(id + '_room').value;
-    navigator.clipboard.writeText(room).then(
+    const data = getRowValues(id);
+    const roomURL = getRoomURL(data);
+
+    navigator.clipboard.writeText(roomURL).then(
         () => {
-            popupMessage('toast', `The room: ${room} \n has been successfully copied to the clipboard 👍`);
+            console.log(`The roomURL: ${roomURL} \n has been successfully copied to the clipboard 👍`);
+            popupMessage(
+                'copyRoom',
+                `<br/>
+                <div id="qrRoomContainer">
+                    <canvas id="qrRoom"></canvas>
+                </div>
+                <br/>
+                <p style="color:rgb(8, 189, 89);">Join from your mobile device</p>
+                <p style="background:transparent; color:white; font-family: Arial, Helvetica, sans-serif;">No need for apps, simply capture the QR code with your mobile camera Or Invite someone else to join by sending them the following URL</p>
+                <p style="color:rgb(8, 189, 89);">${roomURL}</p>`,
+            );
+            makeRoomQR(roomURL);
         },
         (err) => {
             console.error('Could not copy text: ', err);
         },
     );
 }
 
+function makeRoomQR(room) {
+    const qr = new QRious({
+        element: document.getElementById('qrRoom'),
+        value: room,
+    });
+    qr.set({
+        size: 256,
+    });
+}
+
 async function shareRoom(id) {
     const data = getRowValues(id);
     const roomURL = getRoomURL(data, false);

frontend/js/swal.js

@@ -17,6 +17,18 @@ function popupMessage(type, message, timer = 3000) {
                 hideClass: { popup: 'animate__animated animate__fadeOutUp' },
             });
             break;
+        case 'copyRoom':
+            Swal.fire({
+                allowOutsideClick: false,
+                allowEscapeKey: false,
+                position: 'center',
+                title: 'Copy Room',
+                html: message,
+                confirmButtonText: `Copy Room URL`,
+                showClass: { popup: 'animate__animated animate__fadeInDown' },
+                hideClass: { popup: 'animate__animated animate__fadeOutUp' },
+            });
+            break;
         case 'toast':
             const Toast = Swal.mixin({
                 toast: true,

package.json

@@ -1,6 +1,6 @@
 {
     "name": "mirotalkwebrtc",
-    "version": "1.0.79",
+    "version": "1.0.80",
     "description": "MiroTalk WebRTC admin",
     "main": "server.js",
     "scripts": {