时间戳

首页 > 解决方案 > 如何使用 React 和节点将视频流发送到 RTMP 服务器

node.js - 如何使用 React 和节点将视频流发送到 RTMP 服务器

问题描述

我有一个 RTMP 服务器（节点媒体服务器），我可以在其中从 OBS 发送流并在浏览器中观看它们。为了使发送过程更容易，我想直接从浏览器发送流。

第一个想法是使用 navigator.getUserMedia() 获取 Streamdata

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);
    });
};

这显示了视频元素中的媒体。有没有办法将此流实时发送到 rtmp？也许我必须创建一个新的 MediaRecorder 对象，但我如何发送它？是否有另一种方式作为 websocket 发送它？

欢迎所有获得起点的想法。

更新 1

我创建了一个 MediaRecorder 对象并使用 Websocket 发送它：

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

在 node.js 方面

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

安慰：

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

不确定这是否正确。如果正确，我如何将这些数据提供给节点媒体服务器？

标签： node.jsreactjsnode-media-server

解决方案

我使用“node-media-server”包来处理 RTMP。

这个对我有用。

  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)
   })

推荐阅读