[mirotalkc2c] - #21 fix recording truncation by flushing data incrementally via timeslice and guarding track changes

Author: miroslavpejic85

.env.template

@@ -1,5 +1,5 @@
 # ====================================================
-# MiroTalk C2C v.1.2.75 - Environment Configuration
+# MiroTalk C2C v.1.2.76 - Environment Configuration
 # ====================================================
 
 # App environment

backend/server.js

@@ -9,7 +9,7 @@
  * @license For private project or commercial purposes contact us at: license.mirotalk@gmail.com or purchase it directly via Code Canyon:
  * @license https://codecanyon.net/item/mirotalk-c2c-webrtc-real-time-cam-2-cam-video-conferences-and-screen-sharing/43383005
  * @author  Miroslav Pejic - miroslav.pejic.85@gmail.com
- * @version 1.2.75
+ * @version 1.2.76
  */
 
 require('dotenv').config();

frontend/js/client.js

@@ -9,7 +9,7 @@
  * @license For private project or commercial purposes contact us at: license.mirotalk@gmail.com or purchase it directly via Code Canyon:
  * @license https://codecanyon.net/item/mirotalk-c2c-webrtc-real-time-cam-2-cam-video-conferences-and-screen-sharing/43383005
  * @author  Miroslav Pejic - miroslav.pejic.85@gmail.com
- * @version 1.2.75
+ * @version 1.2.76
  */
 
 const roomId = new URLSearchParams(window.location.search).get('room');
@@ -1231,6 +1231,9 @@ function toggleSettings() {
 }
 
 function swapCamera() {
+    if (recording && recording.isStreamRecording()) {
+        return popupMessage('toast', 'Recording', 'Cannot swap camera while recording', 'top');
+    }
     camera = camera == 'user' ? 'environment' : 'user';
     const camVideo = camera == 'user' ? true : { facingMode: { exact: camera } };
     navigator.mediaDevices
@@ -1252,6 +1255,9 @@ function swapCamera() {
 }
 
 async function toggleScreenSharing() {
+    if (recording && recording.isStreamRecording()) {
+        return popupMessage('toast', 'Recording', 'Cannot toggle screen sharing while recording', 'top');
+    }
     const constraints = { audio: true, video: true };
     try {
         let newStream;
@@ -1298,6 +1304,9 @@ async function toggleScreenSharing() {
 }
 
 function changeCamera(deviceId = false) {
+    if (recording && recording.isStreamRecording()) {
+        return popupMessage('toast', 'Recording', 'Cannot change camera while recording', 'top');
+    }
     const videoConstraints = getVideoConstraints(deviceId);
 
     navigator.mediaDevices
@@ -1331,6 +1340,9 @@ function changeCamera(deviceId = false) {
 }
 
 function changeMicrophone(deviceId = false) {
+    if (recording && recording.isStreamRecording()) {
+        return popupMessage('toast', 'Recording', 'Cannot change microphone while recording', 'top');
+    }
     const audioConstraints = getAudioConstraints(deviceId);
 
     navigator.mediaDevices

frontend/js/recording.js

@@ -12,6 +12,7 @@ class Recording {
         this._recordedBlobs = [];
         this._recordingStream = false;
         this._recStartTs = null;
+        this._trackEndedListeners = [];
     }
 
     start() {
@@ -20,7 +21,8 @@ class Recording {
         options = { mimeType: options[0] };
         try {
             this._mediaRecorder = new MediaRecorder(this._stream, options);
-            this._mediaRecorder.start();
+            this._mediaRecorder.start(1000);
+            this._listenTrackEnded();
             this._mediaRecorder.addEventListener('start', (e) => {
                 playSound('recStart');
                 console.log('MediaRecorder started', e);
@@ -36,6 +38,7 @@ class Recording {
             this._mediaRecorder.addEventListener('stop', (e) => {
                 this._recordingStream = false;
                 console.log('MediaRecorder stopped', e);
+                this._removeTrackEndedListeners();
                 this.handleElements();
                 stopRecordingTimer();
                 this.downloadRecordedStream();
@@ -149,4 +152,28 @@ class Recording {
     stop() {
         this._mediaRecorder.stop();
     }
+
+    _listenTrackEnded() {
+        this._stream.getTracks().forEach((track) => {
+            const handler = () => {
+                console.warn('Recording track ended during recording:', track.kind, track.label);
+                if (this._mediaRecorder && this._mediaRecorder.state === 'recording') {
+                    try {
+                        this._mediaRecorder.requestData();
+                    } catch (e) {
+                        console.warn('requestData after track ended failed:', e);
+                    }
+                }
+            };
+            track.addEventListener('ended', handler);
+            this._trackEndedListeners.push({ track, handler });
+        });
+    }
+
+    _removeTrackEndedListeners() {
+        this._trackEndedListeners.forEach(({ track, handler }) => {
+            track.removeEventListener('ended', handler);
+        });
+        this._trackEndedListeners = [];
+    }
 }

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "mirotalkc2c",
-    "version": "1.2.75",
+    "version": "1.2.76",
     "description": "A free WebRTC Cam-2-Cam browser-based video calls",
     "main": "server.js",
     "scripts": {