How to send Video Stream to RTMP Server with React and node

Question

I have a RTMP Server (node-media-server) where i can send stream from OBS and watch them in Browsers. To make the sending process easier i want to send streams directly from Browser.

1st idea was to get the Streamdata with navigator.getUserMedia()

const getVideo = () => {
  navigator.mediaDevices
    .getUserMedia({ video: { width: 300 } })
    .then(stream => {
      let video = videoRef.current;
      video.srcObject = stream;
      video.play();
    })
    .catch(err => {
      console.error("error:", err);
    });
};

this shows the media in a video element. is there a way to send this stream live to rtmp? Maybe i have to create a new MediaRecorder Object, but how i can send it? is there another way as websocket to send it?

all ideas to get a startpoint are welcome.

update 1

i have created a MediaRecorder Object and send it with Websocket:

.then(stream => {
    let mediaRecorder = new MediaRecorder(stream);
    mediaRecorder.start(250);
    mediaRecorder.ondataavailable = function(e) {
        ws.send(e.data);
    }
    //...
}

on node.js side

ws._socket.on('data', (data) => console.log('incoming_data'));

console:

Eߣ�B��B��B�BB��matroskaB��B��S�g�������I�f�*ױ�B@M��ChromeWA�ChromeT�k���ׁsŇ��v0��烁��V_MPEG4/ISO/AVC��������C�u��������

not sure this is correct. when its correct, how i can give this data to node-media-server?

Alireza Tavasoli · Answer 1 · 2021-09-22T15:04:23.930

I use 'node-media-server' package to handle RTMP.

It works for me.

  const ffmpeg = child_process.spawn("ffmpeg", [
        "-f",
        "lavfi",
        "-i",
        "anullsrc",
        "-i",
        "-",
        "-c:v",
        "libx264",
        "-preset",
        "veryfast",
        "-tune",
        "zerolatency",
        "-c:a",
        "aac",
        "-f",
        "flv",
        `rtmp://127.0.0.1:1935/live/key`
      ]) 

   io.on('data', (data) => {
     ffmpeg.stdin.write(data)
   })

score 0 · Answer 2 · answered Jul 09 '21 at 06:06

send the incoming blob to ffmpeg stdin

io.on("connection", (socket) => {
  const ffmpeg = child_process.spawn('ffmpeg', [
    '-f', 'lavfi', '-i', 'anullsrc',
    '-i', '-',
    '-vcodec', 'copy',
    '-acodec', 'aac',
    '-f', 'flv',
    `rtmp://${url}/${key}`
  ])

  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());
  });
  
  ws._socket.on('data', (data) => {
    // console.log("got tracks");
    ffmpeg.stdin.write(data)
  });

});

i referred this docs

How to send Video Stream to RTMP Server with React and node

2 Answers2