如何显示来自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();
  }

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