[mirotalksfu] - allow RTMP stream from all major browser

rtmpServers/demo/client-server-socket/client/client.js

@@ -46,24 +46,10 @@ function showError(message) {
     showPopup(message, 'error');
 }
 
-function checkBrowserSupport() {
-    const userAgent = navigator.userAgent.toLowerCase();
-    if (userAgent.includes('chrome') && !userAgent.includes('edge') && !userAgent.includes('opr')) {
-        console.log('Browser is Chrome-based. Proceed with functionality.');
-    } else {
-        showError(
-            'This application requires a Chrome-based browser (Chrome, Edge Chromium, etc.). Please switch to a supported browser.',
-        );
-        toggleButtons(true);
-    }
-}
-
-window.onload = checkBrowserSupport;
-
 async function startCapture(constraints) {
     try {
         const stream = await navigator.mediaDevices.getUserMedia(constraints);
-        videoElement.srcObject = stream;
+        attachMediaStream(stream);
         return stream;
     } catch (err) {
         console.error('Error accessing media devices.', err);
@@ -74,7 +60,7 @@ async function startCapture(constraints) {
 async function startScreenCapture(constraints) {
     try {
         const stream = await navigator.mediaDevices.getDisplayMedia(constraints);
-        videoElement.srcObject = stream;
+        attachMediaStream(stream);
         return stream;
     } catch (err) {
         console.error('Error accessing screen media.', err);
@@ -82,6 +68,15 @@ async function startScreenCapture(constraints) {
     }
 }
 
+function attachMediaStream(stream) {
+    videoElement.srcObject = stream;
+    videoElement.playsInline = true;
+    videoElement.autoplay = true;
+    videoElement.muted = true;
+    videoElement.volume = 0;
+    videoElement.controls = false;
+}
+
 async function initRTMP() {
     const apiSecret = apiSecretInput.value;
     socket.emit('initRTMP', { apiSecret });
@@ -154,10 +149,19 @@ async function startStreaming(stream) {
     }
 }
 
+function getSupportedMimeTypes() {
+    const possibleTypes = ['video/webm;codecs=vp8,opus', 'video/mp4'];
+    return possibleTypes.filter((mimeType) => {
+        return MediaRecorder.isTypeSupported(mimeType);
+    });
+}
+
 async function startMediaRecorder(stream) {
     if (!stream) return;
 
-    mediaRecorder = new MediaRecorder(stream, { mimeType: 'video/webm; codecs=vp8,opus' });
+    const supportedMimeTypes = getSupportedMimeTypes();
+    console.log('MediaRecorder supported options', supportedMimeTypes);
+    mediaRecorder = new MediaRecorder(stream, { mimeType: supportedMimeTypes[0] });
 
     mediaRecorder.ondataavailable = async (event) => {
         if (event.data.size > 0) {

rtmpServers/demo/client-server-socket/server/RtmpStreamer.js

@@ -19,7 +19,6 @@ class RtmpStreamer {
         this.ffmpegStream = ffmpeg()
             .input(this.stream)
             .inputOptions('-re')
-            .inputFormat('webm')
             .videoCodec('libx264')
             .videoBitrate('3000k')
             .size('1280x720')