[mirotalksfu] - add possibility to share .mp4 videos from url

README.md

@@ -33,7 +33,8 @@
 -   Advance collaborative whiteboard for the teachers
 -   Select Microphone - Speaker and Video source
 -   Recording your Screen, Audio, or Video
--   Share any YouTube video in real-time to your participants
+-   Share any video YouTube in real-time to your participants
+-   Share any video MP4 in real-time to your participants with possibility to download it
 -   Full-Screen Mode on mouse click on the Video element
 -   Possibility to Change UI Themes
 -   Possibility to protect your Host with username and password (default disabled)

app/src/Server.js

@@ -443,12 +443,12 @@ io.on('connection', (socket) => {
         roomList.get(socket.room_id).broadCast(socket.id, 'fileAbort', data);
     });
 
-    socket.on('youTubeAction', (data) => {
+    socket.on('shareVideoAction', (data) => {
-        log.debug('YouTube: ', data);
+        log.debug('Share video: ', data);
         if (data.peer_id == 'all') {
-            roomList.get(socket.room_id).broadCast(socket.id, 'youTubeAction', data);
+            roomList.get(socket.room_id).broadCast(socket.id, 'shareVideoAction', data);
         } else {
-            roomList.get(socket.room_id).sendTo(data.peer_id, 'youTubeAction', data);
+            roomList.get(socket.room_id).sendTo(data.peer_id, 'shareVideoAction', data);
         }
     });
 

public/css/Room.css

@@ -749,10 +749,10 @@ progress {
 }
 
 /*--------------------------------------------------------------
-# YouTube exit btn
+# Video exit btn
 --------------------------------------------------------------*/
 
-#__youTubeExit {
+#__videoExit {
     font-size: 1.5rem;
 }
 

public/js/Room.js

@@ -22,7 +22,7 @@ const _PEER = {
     ejectPeer: '<i class="fas fa-times"></i>',
     sendFile: '<i class="fas fa-upload"></i>',
     sendMsg: '<i class="fas fa-paper-plane"></i>',
-    sendYouTube: '<i class="fab fa-youtube"></i>',
+    sendVideo: '<i class="fab fa-youtube"></i>',
 };
 
 const surveyActive = true;
@@ -84,7 +84,7 @@ function initClient() {
         setTippy('tabDevicesBtn', 'Devices', 'top');
         setTippy('tabRecordingBtn', 'Recording', 'top');
         setTippy('tabRoomBtn', 'Room', 'top');
-        setTippy('tabYoutubeBtn', 'YouTube', 'top');
+        setTippy('tabVideoShareBtn', 'Video share', 'top');
         setTippy('tabAspectBtn', 'Aspect', 'top');
         setTippy('tabStylingBtn', 'Styling', 'top');
         setTippy('wbBackgroundColorEl', 'Background color', 'top');
@@ -692,8 +692,8 @@ function handleButtons() {
     tabRoomBtn.onclick = (e) => {
         rc.openTab(e, 'tabRoom');
     };
-    tabYoutubeBtn.onclick = (e) => {
+    tabVideoShareBtn.onclick = (e) => {
-        rc.openTab(e, 'tabYoutube');
+        rc.openTab(e, 'tabVideoShare');
     };
     tabAspectBtn.onclick = (e) => {
         rc.openTab(e, 'tabAspect');
@@ -782,11 +782,11 @@ function handleButtons() {
     fileShareButton.onclick = () => {
         rc.selectFileToShare(rc.peer_id, true);
     };
-    youTubeShareButton.onclick = () => {
+    videoShareButton.onclick = () => {
-        rc.youTubeShareVideo('all');
+        rc.shareVideo('all');
     };
-    youTubeCloseBtn.onclick = () => {
+    videoCloseBtn.onclick = () => {
-        rc.closeYouTube(true);
+        rc.closeVideo(true);
     };
     sendAbortBtn.onclick = () => {
         rc.abortFileTransfer();
@@ -1558,7 +1558,7 @@ async function getParticipantsTable(peers) {
         <td></td>
         <td><button id="sendAllButton" onclick="rc.selectFileToShare('${rc.peer_id}', true)">${_PEER.sendFile}</button></td>
         <td><button id="sendMessageToAll" onclick="rc.sendMessageTo('all')">${_PEER.sendMsg}</button></td>
-        <td><button id="sendYouTubeAll" onclick="rc.youTubeShareVideo('all');">${_PEER.sendYouTube}</button></td>
+        <td><button id="sendVideoToAll" onclick="rc.shareVideo('all');">${_PEER.sendVideo}</button></td>
         <td><button id="ejectAllButton" onclick="rc.peerAction('me','${rc.peer_id}','eject',true,true)">${_PEER.ejectPeer}</button></td>
     </tr>
     `;
@@ -1596,7 +1596,7 @@ async function getParticipantsTable(peers) {
                 <td><button>${peer_hand}</button></td>
                 <td><button id='${peer_id}___shareFile' onclick="rc.selectFileToShare(this.id)">${peer_sendFile}</button></td>
                 <td><button id="${peer_id}___sendMessageTo" onclick="rc.sendMessageTo('${peer_id}')">${peer_sendMsg}</button></td>
-                <td><button id="${peer_id}___sendYouTubeTo" onclick="rc.youTubeShareVideo('${peer_id}');">${_PEER.sendYouTube}</button></td>
+                <td><button id="${peer_id}___sendVideoTo" onclick="rc.shareVideo('${peer_id}');">${_PEER.sendVideo}</button></td>
                 <td><button id='${peer_id}___pEject' onclick="rc.peerAction('me',this.id,'eject')">${peer_eject}</button></td>
             </tr>
             `;
@@ -1613,7 +1613,7 @@ function setParticipantsTippy(peers) {
         setTippy('hideAllButton', 'Hide all participants', 'top');
         setTippy('sendAllButton', 'Share file to all', 'top');
         setTippy('sendMessageToAll', 'Send message to all', 'top');
-        setTippy('sendYouTubeAll', 'Share YouTube to all', 'top');
+        setTippy('sendVideoAll', 'Share video mp4 or YouTube to all', 'top');
         setTippy('ejectAllButton', 'Eject all participants', 'top');
         //
         for (let peer of Array.from(peers.keys())) {
@@ -1623,7 +1623,7 @@ function setParticipantsTippy(peers) {
             setTippy(peer_id + '___pVideo', 'Hide', 'top');
             setTippy(peer_id + '___shareFile', 'Share file', 'top');
             setTippy(peer_id + '___sendMessageTo', 'Send private message', 'top');
-            setTippy(peer_id + '___sendYouTubeTo', 'Share YouTube', 'top');
+            setTippy(peer_id + '___sendVideoTo', 'Share video', 'top');
             setTippy(peer_id + '___pEject', 'Eject', 'top');
         }
     }

public/js/RoomClient.js

@@ -16,7 +16,7 @@ const html = {
     snapshot: 'fas fa-camera-retro',
     sendFile: 'fas fa-upload',
     sendMsg: 'fas fa-paper-plane',
-    sendYouTube: 'fab fa-youtube',
+    sendVideo: 'fab fa-youtube',
     kickOut: 'fas fa-times',
 };
 
@@ -29,7 +29,7 @@ const image = {
     users: '../images/participants.png',
     user: '../images/participant.png',
     username: '../images/user.png',
-    youtube: '../images/youtube.png',
+    videoShare: '../images/video-share.png',
     message: '../images/message.png',
     share: '../images/share.png',
     exit: '../images/exit.png',
@@ -508,9 +508,9 @@ class RoomClient {
         );
 
         this.socket.on(
-            'youTubeAction',
+            'shareVideoAction',
             function (data) {
-                this.youTubeAction(data);
+                this.shareVideoAction(data);
             }.bind(this),
         );
 
@@ -1018,7 +1018,7 @@ class RoomClient {
     }
 
     handleConsumer(id, type, stream, peer_name, peer_info) {
-        let elem, vb, d, p, i, cm, au, fs, ts, sf, sm, sy, ko, pb, pm;
+        let elem, vb, d, p, i, cm, au, fs, ts, sf, sm, sv, ko, pb, pm;
         switch (type) {
             case mediaType.video:
                 let remotePeerId = peer_info.peer_id;
@@ -1048,9 +1048,9 @@ class RoomClient {
                 sm = document.createElement('button');
                 sm.id = id + '___' + remotePeerId + '___sendMsg';
                 sm.className = html.sendMsg;
-                sy = document.createElement('button');
+                sv = document.createElement('button');
-                sy.id = id + '___' + remotePeerId + '___sendYouTube';
+                sv.id = id + '___' + remotePeerId + '___sendVideo';
-                sy.className = html.sendYouTube;
+                sv.className = html.sendVideo;
                 cm = document.createElement('button');
                 cm.id = id + '___' + remotePeerId + '___video';
                 cm.className = html.videoOn;
@@ -1078,7 +1078,7 @@ class RoomClient {
                 vb.appendChild(ko);
                 vb.appendChild(au);
                 vb.appendChild(cm);
-                vb.appendChild(sy);
+                vb.appendChild(sv);
                 vb.appendChild(sf);
                 vb.appendChild(sm);
                 vb.appendChild(ts);
@@ -1094,7 +1094,7 @@ class RoomClient {
                 this.handleTS(elem.id, ts.id);
                 this.handleSF(sf.id);
                 this.handleSM(sm.id);
-                this.handleSY(sy.id);
+                this.handleSV(sv.id);
                 this.handleCM(cm.id);
                 this.handleAU(au.id);
                 this.handleKO(ko.id);
@@ -1108,7 +1108,7 @@ class RoomClient {
                     this.setTippy(ts.id, 'Snapshot', 'top-end');
                     this.setTippy(sf.id, 'Send file', 'top-end');
                     this.setTippy(sm.id, 'Send message', 'top-end');
-                    this.setTippy(sy.id, 'Send youTube', 'top-end');
+                    this.setTippy(sv.id, 'Send video', 'top-end');
                     this.setTippy(cm.id, 'Hide', 'top-end');
                     this.setTippy(au.id, 'Mute', 'top-end');
                     this.setTippy(ko.id, 'Eject', 'top-end');
@@ -1155,7 +1155,7 @@ class RoomClient {
     // ####################################################
 
     async setVideoOff(peer_info, remotePeer = false) {
-        let d, vb, i, h, au, sf, sm, sy, ko, p, pm, pb;
+        let d, vb, i, h, au, sf, sm, sv, ko, p, pm, pb;
         let peer_id = peer_info.peer_id;
         let peer_name = peer_info.peer_name;
         let peer_audio = peer_info.peer_audio;
@@ -1176,9 +1176,9 @@ class RoomClient {
             sm = document.createElement('button');
             sm.id = 'remotePeer___' + peer_id + '___sendMsg';
             sm.className = html.sendMsg;
-            sy = document.createElement('button');
+            sv = document.createElement('button');
-            sy.id = 'remotePeer___' + peer_id + '___sendYouTube';
+            sv.id = 'remotePeer___' + peer_id + '___sendVideo';
-            sy.className = html.sendYouTube;
+            sv.className = html.sendVideo;
             ko = document.createElement('button');
             ko.id = 'remotePeer___' + peer_id + '___kickOut';
             ko.className = html.kickOut;
@@ -1203,7 +1203,7 @@ class RoomClient {
         pm.appendChild(pb);
         if (remotePeer) {
             vb.appendChild(ko);
-            vb.appendChild(sy);
+            vb.appendChild(sv);
             vb.appendChild(sf);
             vb.appendChild(sm);
         }
@@ -1218,7 +1218,7 @@ class RoomClient {
         if (remotePeer) {
             this.handleSM(sm.id);
             this.handleSF(sf.id);
-            this.handleSY(sy.id);
+            this.handleSV(sv.id);
             this.handleKO(ko.id);
         }
         this.setVideoAvatarImgName(i.id, peer_name);
@@ -1228,7 +1228,7 @@ class RoomClient {
         if (!this.isMobileDevice && remotePeer) {
             this.setTippy(sm.id, 'Send message', 'top-end');
             this.setTippy(sf.id, 'Send file', 'top-end');
-            this.setTippy(sy.id, 'Send youTube', 'top-end');
+            this.setTippy(sv.id, 'Send video', 'top-end');
             this.setTippy(au.id, 'Mute', 'top-end');
             this.setTippy(ko.id, 'Eject', 'top-end');
         }
@@ -2291,27 +2291,27 @@ class RoomClient {
     }
 
     // ####################################################
-    // YOUTUBE SHARE VIDEO
+    // SHARE VIDEO YOUTUBE or MP4
     // ####################################################
 
-    handleSY(uid) {
+    handleSV(uid) {
         const words = uid.split('___');
         let peer_id = words[1];
-        let btnSy = this.getId(uid);
+        let btnSv = this.getId(uid);
-        btnSy.addEventListener('click', () => {
+        btnSv.addEventListener('click', () => {
-            this.youTubeShareVideo(peer_id);
+            this.shareVideo(peer_id);
         });
     }
 
-    youTubeShareVideo(peer_id = 'all') {
+    shareVideo(peer_id = 'all') {
         this.sound('open');
 
         Swal.fire({
             background: swalBackground,
             position: 'center',
-            imageUrl: image.youtube,
+            imageUrl: image.videoShare,
-            title: 'Share YouTube Video',
+            title: 'Share YouTube or Mp4 Video',
-            text: 'Past YouTube video URL',
+            text: 'Past YouTube or Mp4 video URL',
             input: 'text',
             showCancelButton: true,
             confirmButtonText: `Share`,
@@ -2328,20 +2328,23 @@ class RoomClient {
                     return;
                 }
                 // https://www.youtube.com/watch?v=RT6_Id5-7-s
+                // http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4
 
-                let you_tube_url = this.getYoutubeEmbed(result.value);
+                let is_youtube = result.value.endsWith('.mp4') ? false : true;
-                if (you_tube_url) {
+                let video_url = is_youtube ? this.getYoutubeEmbed(result.value) : result.value;
+                if (video_url) {
                     let data = {
                         peer_id: peer_id,
                         peer_name: this.peer_name,
-                        you_tube_url: you_tube_url,
+                        video_url: video_url,
+                        is_youtube: is_youtube,
                         action: 'open',
                     };
-                    console.log('YouTube video URL: ', you_tube_url);
+                    console.log('Video URL: ', video_url);
-                    this.socket.emit('youTubeAction', data);
+                    this.socket.emit('shareVideoAction', data);
-                    this.openYouTube(data);
+                    this.openVideo(data);
                 } else {
-                    this.userLog('error', 'Not valid YouTube URL', 'top-end');
+                    this.userLog('error', 'Not valid mp4 or YouTube URL', 'top-end');
                 }
             }
         });
@@ -2353,79 +2356,86 @@ class RoomClient {
         return match && match[7].length == 11 ? 'https://www.youtube.com/embed/' + match[7] + '?autoplay=1' : false;
     }
 
-    youTubeAction(data) {
+    shareVideoAction(data) {
         let peer_name = data.peer_name;
         let action = data.action;
         switch (action) {
             case 'open':
-                this.userLog('info', `${peer_name} <i class="fab fa-youtube"></i> opened the YouTube video`, 'top-end');
+                this.userLog('info', `${peer_name} <i class="fab fa-youtube"></i> opened the video`, 'top-end');
-                this.openYouTube(data);
+                this.openVideo(data);
                 break;
             case 'close':
-                this.userLog('info', `${peer_name} <i class="fab fa-youtube"></i> closed the YouTube video`, 'top-end');
+                this.userLog('info', `${peer_name} <i class="fab fa-youtube"></i> closed the video`, 'top-end');
-                this.closeYouTube();
+                this.closeVideo();
                 break;
         }
     }
 
-    openYouTube(data) {
+    openVideo(data) {
-        let d, vb, e, iframe;
+        let d, vb, e, video;
         let peer_name = data.peer_name;
-        let you_tube_url = data.you_tube_url;
+        let video_url = data.video_url;
-        this.closeYouTube();
+        let is_youtube = data.is_youtube;
-        show(youTubeCloseBtn);
+        this.closeVideo();
+        show(videoCloseBtn);
         d = document.createElement('div');
         d.className = 'Camera';
-        d.id = '__youTube';
+        d.id = '__shareVideo';
         vb = document.createElement('div');
-        vb.setAttribute('id', '__youTubeBar');
+        vb.setAttribute('id', '__videoBar');
         vb.className = 'videoMenuBar fadein';
         e = document.createElement('button');
         e.className = 'fas fa-times';
-        e.id = '__youTubeExit';
+        e.id = '__videoExit';
-        iframe = document.createElement('iframe');
+        if (is_youtube) {
-        iframe.setAttribute('id', '__youTubeIframe');
+            video = document.createElement('iframe');
-        iframe.setAttribute('title', peer_name);
+            video.setAttribute('title', peer_name);
-        iframe.setAttribute('width', '100%');
+            video.setAttribute(
-        iframe.setAttribute('height', '100%');
+                'allow',
-        iframe.setAttribute('src', you_tube_url);
+                'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture',
-        iframe.setAttribute(
+            );
-            'allow',
+            video.setAttribute('frameborder', '0');
-            'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture',
+            video.setAttribute('allowfullscreen', true);
-        );
+        } else {
-        iframe.setAttribute('frameborder', '0');
+            video = document.createElement('video');
-        iframe.setAttribute('allowfullscreen', true);
+            video.autoplay = true;
+            video.controls = true;
+        }
+        video.setAttribute('id', '__videoShare');
+        video.setAttribute('src', video_url);
+        video.setAttribute('width', '100%');
+        video.setAttribute('height', '100%');
         vb.appendChild(e);
-        d.appendChild(iframe);
+        d.appendChild(video);
         d.appendChild(vb);
         this.videoMediaContainer.appendChild(d);
         handleAspectRatio();
-        let exitYouTubeBtn = this.getId(e.id);
+        let exitVideoBtn = this.getId(e.id);
-        exitYouTubeBtn.addEventListener('click', () => {
+        exitVideoBtn.addEventListener('click', () => {
-            this.closeYouTube(true);
+            this.closeVideo(true);
         });
         if (!this.isMobileDevice) {
             this.setTippy(e.id, 'Close video', 'top-end');
         }
-        console.log('[openYouTube] Video-element-count', this.videoMediaContainer.childElementCount);
+        console.log('[openVideo] Video-element-count', this.videoMediaContainer.childElementCount);
         this.sound('joined');
     }
 
-    closeYouTube(emit = false, peer_id = 'all') {
+    closeVideo(emit = false, peer_id = 'all') {
         if (emit) {
             let data = {
                 peer_id: peer_id,
                 peer_name: this.peer_name,
                 action: 'close',
             };
-            this.socket.emit('youTubeAction', data);
+            this.socket.emit('shareVideoAction', data);
         }
-        let youTubeDiv = this.getId('__youTube');
+        let shareVideoDiv = this.getId('__shareVideo');
-        if (youTubeDiv) {
+        if (shareVideoDiv) {
-            hide(youTubeCloseBtn);
+            hide(videoCloseBtn);
-            youTubeDiv.parentNode.removeChild(youTubeDiv);
+            shareVideoDiv.parentNode.removeChild(shareVideoDiv);
             handleAspectRatio();
-            console.log('[closeYouTube] Video-element-count', this.videoMediaContainer.childElementCount);
+            console.log('[closeVideo] Video-element-count', this.videoMediaContainer.childElementCount);
             this.sound('left');
         }
     }

public/js/SpeechRec.js

@@ -37,8 +37,8 @@ const commands = {
     participantsKickOut: 'kick out the participants',
     fileShareOn: 'open a file',
     fileShareOff: 'close a file',
-    youtubeOn: 'share the YouTube',
+    videoShareOn: 'share the video',
-    youtubeOff: 'close the YouTube',
+    videoShareOff: 'close the video',
     swapCamera: 'swap the camera',
     raiseHand: 'raise the hand',
     lowerHand: 'lower the hand',
@@ -238,13 +238,13 @@ function execVoiceCommands(transcript) {
             printCommand(commands.fileShareOff);
             sendAbortBtn.click();
             break;
-        case commands.youtubeOn:
+        case commands.videoShareOn:
-            printCommand(commands.youtubeOn);
+            printCommand(commands.videoShareOn);
-            youTubeShareButton.click();
+            videoShareButton.click();
             break;
-        case commands.youtubeOff:
+        case commands.videoShareOff:
-            printCommand(commands.youtubeOff);
+            printCommand(commands.videoShareOff);
-            youTubeCloseBtn.click();
+            videoCloseBtn.click();
             break;
         case commands.swapCamera:
             printCommand(commands.swapCamera);

public/view/Room.html

@@ -122,7 +122,7 @@ access to use this app.
                     <button id="tabDevicesBtn" class="fas fa-cog tablinks"></button>
                     <button id="tabRoomBtn" class="fas fa-home tablinks"></button>
                     <button id="tabRecordingBtn" class="fas fa-record-vinyl tablinks"></button>
-                    <button id="tabYoutubeBtn" class="fab fa-youtube tablinks"></button>
+                    <button id="tabVideoShareBtn" class="fab fa-youtube tablinks"></button>
                     <button id="tabAspectBtn" class="fas fa-cog tablinks"></button>
                     <button id="tabStylingBtn" class="fas fa-palette tablinks"></button>
                 </div>
@@ -213,16 +213,16 @@ access to use this app.
                     <br />
                 </div>
 
-                <div id="tabYoutube" class="tabcontent">
+                <div id="tabVideoShare" class="tabcontent">
                     <br />
-                    <button id="youTubeShareButton">
+                    <button id="videoShareButton">
                         <i class="fab fa-youtube"></i>
-                        <p>Share YouTube</p>
+                        <p>Share Video</p>
                     </button>
                     <br />
-                    <button id="youTubeCloseBtn" class="hidden">
+                    <button id="videoCloseBtn" class="hidden">
                         <i class="fas fa-times"></i>
-                        <p>Close YouTube</p>
+                        <p>Close Video</p>
                     </button>
                     <br />
                 </div>