Sur d’autres sites (4555)

• Unable to read video streams on FFMPEG and send it to youTube RTMP server

  29 août 2024, par Rahul Bundele

  I'm trying to send two video stream from browser as array buffer (webcam and screen share video) to server via Web RTC data channels and want ffmpeg to add webcam as overlay on screen share video and send it to youtube RTMP server, the RTC connections are established and server does receives buffer , Im getting error in Ffmpeg..error is at bottom , any tips on to add overlay and send it to youtube RTMP server would be appreciated.

  


  Client.js

  


  `
const webCamStream = await navigator.mediaDevices.getUserMedia( video : true ,audio:true ) ;
const screenStream = await navigator.mediaDevices.getDisplayMedia( video : true ) ;

  


  const webcamRecorder = new MediaRecorder(webCamStream, { mimeType: 'video/webm' });
webcamRecorder.ondataavailable = (event) => {
    if (event.data.size > 0 && webcamDataChannel.readyState === 'open') {
        const reader = new FileReader();
        reader.onload = function () {
            const arrayBuffer = this.result;
            webcamDataChannel.send(arrayBuffer);
        };
        reader.readAsArrayBuffer(event.data);
    }
};
webcamRecorder.start(100);  // Adjust the interval as needed

// Send screen share stream data
const screenRecorder = new MediaRecorder(screenStream, { mimeType: 'video/webm' });
screenRecorder.ondataavailable = (event) => {
    if (event.data.size > 0 && screenDataChannel.readyState === 'open') {
        const reader = new FileReader();
        reader.onload = function () {
            const arrayBuffer = this.result;
            screenDataChannel.send(arrayBuffer);
        };
        reader.readAsArrayBuffer(event.data);
    }
};
screenRecorder.start(100); 


  


  `

  


  Server.js

  


  const youtubeRTMP = 'rtmp://a.rtmp.youtube.com/live2/youtube key';

// Create PassThrough streams for webcam and screen
const webcamStream = new PassThrough();
const screenStream = new PassThrough();

// FFmpeg arguments for processing live streams
const ffmpegArgs = [
  '-re',
  '-i', 'pipe:3',                  // Webcam input via pipe:3
  '-i', 'pipe:4',                  // Screen share input via pipe:4
  '-filter_complex',               // Complex filter for overlay
  '[0:v]scale=320:240[overlay];[1:v][overlay]overlay=10:10[out]',
  '-map', '[out]',                 // Map the output video stream
  '-c:v', 'libx264',               // Use H.264 codec for video
  '-preset', 'ultrafast',          // Use ultrafast preset for low latency
  '-crf', '25',                    // Set CRF for quality/size balance
  '-pix_fmt', 'yuv420p',           // Pixel format for compatibility
  '-c:a', 'aac',                   // Use AAC codec for audio
  '-b:a', '128k',                  // Set audio bitrate
  '-f', 'flv',                     // Output format (FLV for RTMP)
  youtubeRTMP                      // Output to YouTube RTMP server
];

// Spawn the FFmpeg process
const ffmpegProcess = spawn('ffmpeg', ffmpegArgs, {
  stdio: ['pipe', 'pipe', 'pipe', 'pipe', 'pipe']
});

// Pipe the PassThrough streams into FFmpeg
webcamStream.pipe(ffmpegProcess.stdio[3]);
screenStream.pipe(ffmpegProcess.stdio[4]);

ffmpegProcess.on('close', code => {
  console.log(`FFmpeg process exited with code ${code}`);
});

ffmpegProcess.on('error', error => {
  console.error(`FFmpeg error: ${error.message}`);
});

const handleIncomingData = (data, stream) => {
  const buffer = Buffer.from(data);
  stream.write(buffer);
};


  


  the server gets the video buffer via webrtc data channels

  


  pc.ondatachannel = event => {
        const dataChannel = event.channel;
        pc.dc = event.channel;
        pc.dc.onmessage = event => {
            // Spawn the FFmpeg process
            // console.log('Message from client:', event.data);
            const data = event.data;

            if (dataChannel.label === 'webcam') {
            handleIncomingData(data, webcamStream);
            } else if (dataChannel.label === 'screen') {
            handleIncomingData(data, screenStream);
            }
          
        };
        pc.dc.onopen = e=>{
            // recHead.innerText = "Waiting for user to send files"
            console.log("channel opened!")
        }
    };


  


  Im getting this error in ffmpeg

  


  [in#0 @ 0000020e585a1b40] Error opening input: Bad file descriptor
Error opening input file pipe:3.
Error opening input files: Bad file descriptor


  


• Issue with creating Video files from Binary files

  22 septembre 2022, par user20057686

  We have a bunch of binary files that represent Video data.
This is how the binary files were created :

  


  

  1. Used MediaRecorder from a React application to capture the browser window.
To capture the screen stream we used (Navigator.)MediaDevices.getDisplayMedia() API

  


  2. Each video is recorded for 1-second duration

  


  3. This data is then encoded with base64 and sent through a websocket. The server decodes the base64 string and stores the binary data in a file (without any extension)

  


  


  So we now have a bunch of binary files each containing 1 second worth of video data.

  


  The issue is, we are not able to convert all the binary files back to a single video.

  


  


  1. We tried using ffmpeg

     


     copy /b * merged.

     


     ffmpeg -i merged merged.mp4

     


  


  


  Basically first merging all the binary files and converting to mp4. It didn't work. The resulting video duration is not equal to the (number_of_files) in seconds.

  


  


  2. We also tried converting individual chunks with ffmpeg but we get the below error :

     


     [h264 @ 000001522dc74b80] [error] non-existing PPS 0 referenced
[h264 @ 000001522dc74b80] [error] non-existing PPS 0 referenced
[h264 @ 000001522dc74b80] [error] decode_slice_header error
[h264 @ 000001522dc74b80] [error] no frame !
I can provide the complete logs if needed.

     


  


  3. Next thing we tried was to use MoviePy library in Python. We programmatically concatenated the files and saved them as WebM and imported it into MoviePy as a Video.

     


  


  


  In all the above approaches, we couldn't get the full video.

  


• How to create a video file webm from chunks by media recorder api using ffmpeg

  17 octobre 2020, par Caio Nakai

  I'm trying to create a webm video file from blobs generated by MediaRecorderAPI in a NodeJS server using FFMPEG. I'm able to create the .webm file but it's not playable, I ran this command $ ffmpeg.exe -v error -i lel.webm -f null - >error.log 2>&1 to generate an error log, the error log file contains this :

  


  


  [null @ 000002ce7501de40] Application provided invalid, non monotonically increasing dts to muxer in stream 0 : 1 >= 1

  


  [h264 @ 000002ce74a727c0] Invalid NAL unit size (804 > 74).

  


  [h264 @ 000002ce74a727c0] Error splitting the input into NAL units.

  


  Error while decoding stream #0:0 : Invalid data found when processing input

  


  


  This is my web server code

  


  const app = require("express")();
const http = require("http").createServer(app);
const io = require("socket.io")(http);
const fs = require("fs");
const child_process = require("child_process");

app.get("/", (req, res) => {
  res.sendFile(__dirname + "/index.html");
});

io.on("connection", (socket) => {
  console.log("a user connected");

  const ffmpeg = child_process.spawn("ffmpeg", [
    "-i",
    "-",
    "-vcodec",
    "copy",
    "-f",
    "flv",
    "rtmpUrl.webm",
  ]);

  ffmpeg.on("close", (code, signal) => {
    console.log(
      "FFmpeg child process closed, code " + code + ", signal " + signal
    );
  });

  ffmpeg.stdin.on("error", (e) => {
    console.log("FFmpeg STDIN Error", e);
  });

  ffmpeg.stderr.on("data", (data) => {
    console.log("FFmpeg STDERR:", data.toString());
  });

  socket.on("message", (msg) => {
    console.log("Writing blob! ");
    ffmpeg.stdin.write(msg);
  });

  socket.on("stop", () => {
    console.log("Stop recording..");
    ffmpeg.kill("SIGINT");
  });
});

http.listen(3000, () => {
  console.log("listening on *:3000");
});



  


  And this is my client code, using HTML, JS :

  


  &#xA;&#xA;  &#xA;    &#xA;    &#xA;    &#xA;  &#xA;  <code class="echappe-js">&lt;script src='http://stackoverflow.com/socket.io/socket.io.js'&gt;&lt;/script&gt;&#xA;  &lt;script&gt;&amp;#xA;    const socket = io();&amp;#xA;    let mediaRecorder = null;&amp;#xA;    const startRecording = (someStream) =&gt; {&amp;#xA;      const mediaStream = new MediaStream();&amp;#xA;      const videoTrack = someStream.getVideoTracks()[0];&amp;#xA;      const audioTrack = someStream.getAudioTracks()[0];&amp;#xA;      console.log(&quot;Video trac &quot;, videoTrack);&amp;#xA;      console.log(&quot;audio trac &quot;, audioTrack);&amp;#xA;      mediaStream.addTrack(videoTrack);&amp;#xA;      mediaStream.addTrack(audioTrack);&amp;#xA;&amp;#xA;      const recorderOptions = {&amp;#xA;        mimeType: &quot;video/webm;codecs=h264&quot;,&amp;#xA;        videoBitsPerSecond: 3 * 1024 * 1024,&amp;#xA;      };&amp;#xA;&amp;#xA;      mediaRecorder = new MediaRecorder(mediaStream, recorderOptions);&amp;#xA;      mediaRecorder.start(1000); // 1000 - the number of milliseconds to record into each Blob&amp;#xA;      mediaRecorder.ondataavailable = (event) =&gt; {&amp;#xA;        console.debug(&quot;Got blob data:&quot;, event.data);&amp;#xA;        if (event.data &amp;amp;&amp;amp; event.data.size &gt; 0) {&amp;#xA;          socket.emit(&quot;message&quot;, event.data);&amp;#xA;        }&amp;#xA;      };&amp;#xA;    };&amp;#xA;&amp;#xA;    const getVideoStream = async () =&gt; {&amp;#xA;      try {&amp;#xA;        const stream = await navigator.mediaDevices.getUserMedia({&amp;#xA;          video: true,&amp;#xA;          audio: true,&amp;#xA;        });&amp;#xA;        startRecording(stream);&amp;#xA;        myVideo.srcObject = stream;&amp;#xA;      } catch (e) {&amp;#xA;        console.error(&quot;navigator.getUserMedia error:&quot;, e);&amp;#xA;      }&amp;#xA;    };&amp;#xA;&amp;#xA;    const stopRecording = () =&gt; {&amp;#xA;      mediaRecorder.stop();&amp;#xA;      socket.emit(&quot;stop&quot;);&amp;#xA;    };&amp;#xA;  &lt;/script&gt;&#xA;  &#xA;    
  hello world
  &#xA;
  start rec
  &#xA;
  stop rec
  &#xA;&#xA;    &#xA;    &lt;script&gt;&amp;#xA;      const myVideo = document.getElementById(&quot;myvideo&quot;);&amp;#xA;      myVideo.muted = true;&amp;#xA;    &lt;/script&gt;&#xA;  &#xA;&#xA;&#xA;
  

  


  Any help is appreciated !