[mirotalkbro] - improvements

miroslavpejic85 · Jan 16, 2025 · 6554b1a · 6554b1a
1 parent b158334
commit 6554b1a
Show file tree

Hide file tree

Showing 8 changed files with 53 additions and 46 deletions.
diff --git a/app/server.js b/app/server.js
@@ -8,7 +8,7 @@
  * @license For open source under AGPL-3.0
  * @license For private project or commercial purposes contact us at: [email protected]
  * @author  Miroslav Pejic - [email protected]
- * @version 1.0.72
+ * @version 1.0.73
  */
 
 require('dotenv').config();

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "mirotalkbro",
-    "version": "1.0.72",
+    "version": "1.0.73",
     "description": "P2P WebRTC audio, video and screen live broadcast",
     "main": "app/server.js",
     "scripts": {
@@ -23,7 +23,7 @@
     "author": "Miroslav Pejic",
     "license": "AGPLv3",
     "dependencies": {
-        "@sentry/node": "^8.48.0",
+        "@sentry/node": "^8.50.0",
         "compression": "^1.7.5",
         "cors": "^2.8.5",
         "dotenv": "^16.4.7",

diff --git a/public/js/broadcast.js b/public/js/broadcast.js
@@ -26,6 +26,8 @@ const settingsForm = document.getElementById('broadcasterSettingsForm');
 
 const copyRoom = document.getElementById('copyRoom');
 const shareRoom = document.getElementById('shareRoom');
+const enableAudio = document.getElementById('enableAudio');
+const disableAudio = document.getElementById('disableAudio');
 const videoBtn = document.getElementById('videoBtn');
 const screenShareStart = document.getElementById('screenShareStart');
 const screenShareStop = document.getElementById('screenShareStop');
@@ -81,6 +83,8 @@ const isSpeechSynthesisSupported = 'speechSynthesis' in window;
 const broadcastTooltips = [
     { element: copyRoom, text: 'Copy and share room URL', position: 'top' },
     { element: shareRoom, text: 'Share room URL', position: 'top' },
+    { element: enableAudio, text: 'Enable audio', position: 'top' },
+    { element: disableAudio, text: 'Disable audio', position: 'top' },
     { element: videoBtn, text: 'Toggle video', position: 'top' },
     { element: screenShareStart, text: 'Start screen sharing', position: 'top' },
     { element: screenShareStop, text: 'Stop screen sharing', position: 'top' },
@@ -147,11 +151,9 @@ socket.on('viewer', (id, iceServers, username) => {
 
     handleDataChannels(id);
 
-    connectedPeers.innerText = Object.keys(peerConnections).length;
-
     addViewer(id, username);
 
-    // popupMessage('toast', 'New viewer', `${username} join`, 'top', 2000);
+    connectedPeers.innerText = Object.keys(peerConnections).length;
 
     playSound('viewer');
 
@@ -270,6 +272,8 @@ elementDisplay(screenShareStop, false);
 elementDisplay(settingsForm, broadcastSettings.options.settings, broadcastSettings.options.settings ? 'grid' : 'none');
 elementDisplay(copyRoom, broadcastSettings.buttons.copyRoom);
 elementDisplay(shareRoom, broadcastSettings.buttons.shareRoom);
+elementDisplay(disableAudio, broadcastSettings.buttons.audio);
+elementDisplay(enableAudio, broadcastSettings.buttons.audio && false);
 elementDisplay(videoBtn, broadcastSettings.buttons.video);
 elementDisplay(screenShareStart, broadcastSettings.buttons.screenShareStart);
 elementDisplay(recordingStart, broadcastSettings.buttons.recordingStart);
@@ -366,6 +370,22 @@ navigator.share
     ? shareRoom.addEventListener('click', shareRoomNavigator)
     : shareRoom.addEventListener('click', shareRoomQR);
 
+// =====================================================
+// Handle audio
+// =====================================================
+
+enableAudio.addEventListener('click', () => toggleAudio(true));
+disableAudio.addEventListener('click', () => toggleAudio(false));
+
+function toggleAudio(enable) {
+    const audioTrack = broadcastStream.getAudioTracks()[0];
+    if (audioTrack) {
+        audioTrack.enabled = enable;
+    }
+    elementDisplay(enableAudio, !enable);
+    elementDisplay(disableAudio, enable && broadcastSettings.buttons.audio);
+}
+
 // =====================================================
 // Handle video stream
 // =====================================================

diff --git a/public/js/config.js b/public/js/config.js
@@ -4,8 +4,9 @@ const broadcastSettings = {
     buttons: {
         copyRoom: true,
         shareRoom: true,
-        screenShareStart: true,
+        audio: true,
         video: true,
+        screenShareStart: true,
         recordingStart: true,
         messagesOpenForm: true,
         viewersOpenForm: true,
@@ -24,7 +25,6 @@ const broadcastSettings = {
 
 const viewerSettings = {
     buttons: {
-        audio: true,
         snapshot: true,
         recordingStart: true,
         fullScreenOn: true,

diff --git a/public/js/swal.js b/public/js/swal.js
@@ -50,19 +50,28 @@ function popupMessage(icon, title, message, position = 'center', timer = 3000) {
     }
 }
 
-function popupEnableAudio() {
+function popupEnableAutoPlay() {
     Swal.fire({
         allowOutsideClick: false,
         allowEscapeKey: false,
-        showDenyButton: true,
+        showDenyButton: false,
+        icon: 'warning',
         position: 'top',
-        title: 'Broadcaster audio',
-        text: 'Do you want to enable the broadcaster audio?',
-        confirmButtonText: `Yes`,
-        denyButtonText: `No`,
+        title: 'Autoplay is not allowed',
+        text: 'Please click Play to start playback',
+        confirmButtonText: '<i class="fas fa-play"></i>',
         showClass: { popup: 'animate__animated animate__fadeInDown' },
         hideClass: { popup: 'animate__animated animate__fadeOutUp' },
     }).then((result) => {
-        result.isConfirmed ? enableAudio.click() : disableAudio.click();
+        if (result.isConfirmed) {
+            video.play().catch((error) => {
+                console.error('Playback failed', error);
+                Swal.fire({
+                    icon: 'error',
+                    title: 'Playback Error',
+                    text: 'Failed to start playback. Please try again',
+                });
+            });
+        }
     });
 }
diff --git a/public/js/viewer.js b/public/js/viewer.js
@@ -18,8 +18,6 @@ const sessionTime = document.getElementById('sessionTime');
 const video = document.querySelector('video');
 const videoOff = document.getElementById('videoOff');
 
-const enableAudio = document.getElementById('enableAudio');
-const disableAudio = document.getElementById('disableAudio');
 const recordingStart = document.getElementById('recordingStart');
 const recordingStop = document.getElementById('recordingStop');
 const recordingLabel = document.getElementById('recordingLabel');
@@ -45,8 +43,6 @@ const isMobileDevice = deviceType === 'mobile';
 // =====================================================
 
 const viewerTooltips = [
-    { element: enableAudio, text: 'Enable audio', position: 'top' },
-    { element: disableAudio, text: 'Disable audio', position: 'top' },
     { element: recordingStart, text: 'Start recording', position: 'top' },
     { element: recordingStop, text: 'Stop recording', position: 'top' },
     { element: snapshot, text: 'Take a snapshot', position: 'top' },
@@ -104,10 +100,8 @@ socket.on('offer', (id, description, iceServers) => {
     peerConnection.ontrack = (event) => {
         saveRecording();
         attachStream(event.streams[0]);
-        if (event.track.kind === 'audio') {
-            popupEnableAudio();
-        }
     };
+
     peerConnection.onicecandidate = (event) => {
         if (event.candidate) {
             socket.emit('candidate', id, event.candidate);
@@ -195,8 +189,6 @@ if (getMode === 'dark') body.classList.toggle('dark');
 elementDisplay(fullScreenOff, false);
 elementDisplay(recordingLabel, false);
 elementDisplay(recordingStop, false);
-elementDisplay(disableAudio, viewerSettings.buttons.audio);
-elementDisplay(enableAudio, !viewerSettings.buttons.audio);
 elementDisplay(snapshot, viewerSettings.buttons.snapshot);
 elementDisplay(recordingStart, viewerSettings.buttons.recordingStart);
 elementDisplay(fullScreenOn, viewerSettings.buttons.fullScreenOn && isFullScreenSupported());
@@ -281,29 +273,15 @@ function attachStream(stream) {
     video.srcObject = stream;
     video.playsInline = true;
     video.autoplay = true;
-    video.muted = true;
     video.controls = false;
 }
 
-// =====================================================
-// Handle audio
-// =====================================================
-
-enableAudio.addEventListener('click', setAudioOn);
-disableAudio.addEventListener('click', setAudioOff);
-
-function setAudioOn() {
-    if (!peerConnection) return;
-    video.muted = false;
-    elementDisplay(enableAudio, false);
-    elementDisplay(disableAudio, viewerSettings.buttons.audio);
-}
-
-function setAudioOff() {
-    video.muted = true;
-    elementDisplay(disableAudio, false);
-    elementDisplay(enableAudio, true);
-}
+video.addEventListener('loadeddata', () => {
+    video.play().catch((error) => {
+        console.error('Autoplay failed', error.message);
+        popupEnableAutoPlay();
+    });
+});
 
 // =====================================================
 // Handle recording

diff --git a/public/views/broadcast.html b/public/views/broadcast.html
@@ -44,6 +44,8 @@
                 <button id="screenShareStart"><i class="fas fa-display"></i></button>
                 <button id="screenShareStop" class="pulse-bg"><i class="fa-solid fa-circle-stop"></i></button>
                 <button id="videoBtn"><i class="fas fa-video"></i></button>
+                <button id="enableAudio" class="color-red"><i class="fas fa-microphone"></i></button>
+                <button id="disableAudio"><i class="fas fa-microphone"></i></button>
                 <button id="shareRoom"><i class="fas fa-share-alt"></i></button>
                 <button id="copyRoom"><i class="fas fa-copy"></i></button>
             </div>

diff --git a/public/views/viewer.html b/public/views/viewer.html
@@ -38,8 +38,6 @@
                 <button id="snapshot"><i class="fas fa-camera-retro"></i></button>
                 <button id="recordingStart"><i class="fas fa-record-vinyl"></i></button>
                 <button id="recordingStop" class="color-red"><i class="fas fa-record-vinyl"></i></button>
-                <button id="enableAudio"><i class="fas fa-microphone-slash"></i></button>
-                <button id="disableAudio"><i class="fas fa-microphone"></i></button>
             </div>
             <div id="messagesForm" class="animate__animated animate__zoomIn">
                 <input id="messageInput" maxlength="1024" name="message" placeholder="Type message..." />