如何显示从nodejs服务器获取的缓冲区数据中的视频

Question

这是我使用webRtc和socket.io从我的实时网络摄像头在我的服务器端获取的缓冲区数据

[ <Buffer 1a 45 df a3 9f 42 86 81 01 42 f7 81 01 42 f2 81 04 42 f3 81 08 42 82 84 77 65 62 6d 42 87 81 04 42 85 81 02 18 53 80 67 01 ff ff ff ff ff ff ff 15 49 ... 53876 more bytes> ]
[ <Buffer 1a 45 df a3 9f 42 86 81 01 42 f7 81 01 42 f2 81 04 42 f3 81 08 42 82 84 77 65 62 6d 42 87 81 04 42 85 81 02 18 53 80 67 01 ff ff ff ff ff ff ff 15 49 ... 53876 more bytes>,
  <Buffer 41 ab 81 03 c0 80 fb 83 84 97 85 2d c7 d9 a6 12 c0 c8 c0 a4 bf bb 8b 6b 94 f1 78 40 a5 e3 29 e1 42 de f0 9a 4d 94 bd 3c c8 ae 9c 07 b2 c2 65 e1 22 ea ... 196152 more bytes> ]

现在我只想将该数据发送到我的 HTML 页面并播放网络摄像头视频。

我正在使用 angular4 并且我的代码不起作用，我的代码是

  video: HTMLVideoElement;

  constructor(private _chatService: ChatService) {

    this.video = document.querySelector('video');
    const myMediaSource = new MediaSource();
     this.video.src = URL.createObjectURL(myMediaSource);

    const videoSourceBuffer = myMediaSource
      .addSourceBuffer('video/mp4; codecs="avc1.64001e"');

    this._chatService.recieveData()
      .subscribe(data => {
        console.log(data); // image is shown below
        videoSourceBuffer.appendBuffer(data);
      });

  }

但它给出了一个错误

“{}”类型的参数不可分配给“BufferSource”类型的参数。

当我尝试控制台数据时，我在前端获取数据

有人，请帮我解决这个问题。

提前致谢。

Answer 1

有一个名为 NodeMediaServer 的节点模块可以工作。 这是您使用 rtmp 的方式：

const { NodeMediaServer } = require("node-media-server");

const config = {
  rtmp: {
    port: 1935,
    chunk_size: 60000,
    gop_cache: true,
    ping: 60,
    ping_timeout: 30
  },
  http: {
    port: 8000,
    allow_origin: "*"
  }
};

var nms = new NodeMediaServer(config);
nms.run();

这就是您在前端使用它来拾取并使用 flv 播放的内容：

buildPlayer() {
    if (this.player || !this.props.stream) {
      return;
    }
    const { id } = this.props.match.params;
    this.player = flv.createPlayer({
      type: "flv",
      url: `http://localhost:8000/live/${id}.flv`
    });
    this.player.attachMediaElement(this.videoRef.current);
    this.player.load();
  }

不确定它是否有帮助，但值得一试。