从nodejs

Question

我正在尝试实时直播网络摄像头，因此我正在使用angular4，nodejs，socket.io和webRtc。

首先，每1秒获取一次缓冲区中的数据。从webcam发送并使用代码将其发送到nodejs服务器

const recordedChunks = [];

this.video = document.querySelector('video');
navigator.mediaDevices.getUserMedia(audio: true, video: true).then(
  stream => {
    this.video.srcObject = stream;

    const options = {mimeType: 'video/webm;codecs=vp9'};
    const mediaRecorder = new MediaRecorder(stream, options);
    const server = this._chatService;
    mediaRecorder.ondataavailable = function (event) {

      if (event.data.size > 0) {
        recordedChunks.push(event.data);
        server.sendData(recordedChunks);
      } 
    };
    mediaRecorder.start(1000);
  },
  error => {
    console.log('Error: ' + error);
  });

服务器代码为

io.on('connection', (socket)  => {
    console.log('new connection made');
    socket.on('blobs', function(data){
        // console.log(data);
        socket.emit('blobs', data);
    })
});

现在我正在我的services.ts中接收数据

  recieveData() {
    const observables = new Observable(observer => {
      this.socket.on('blobs', (data) => {
        observer.next(data);
      });
      return () => {this.socket.disconnect();}
    });
    return observables;
  }

现在，我想展示以视频形式接收缓冲区数据，但是我对如何为此创建HTML有了任何想法。

我做了一些逻辑，但是没有用

video: HTMLVideoElement;

  constructor(private _chatService: ChatService) {
    this.video = document.querySelector('video');
    this._chatService.recieveData()
      .subscribe(data => {
        console.log('data--> ', data);
        this.video.srcObject = data; //it showing an error
      });
  }

请有人帮帮我。

我收到的缓冲数据是服务器

[ <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> ]
[ <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>,
  <Buffer 41 83 81 07 80 80 fb 03 1b 17 0a 66 f9 02 76 71 9f 1a 28 61 41 a8 10 f8 d5 a9 61 02 dc 31 62 a7 f8 e9 01 56 ae 6c c8 b1 b4 96 6b 16 67 71 4d de 9b a9 ... 95249 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>,
  <Buffer 41 83 81 07 80 80 fb 03 1b 17 0a 66 f9 02 76 71 9f 1a 28 61 41 a8 10 f8 d5 a9 61 02 dc 31 62 a7 f8 e9 01 56 ae 6c c8 b1 b4 96 6b 16 67 71 4d de 9b a9 ... 95249 more bytes>,
  <Buffer 41 83 81 0b 7c 80 fb 03 3c 11 fe 6a 0b d7 93 d1 49 c0 34 ac b5 84 38 13 ae 53 40 e5 4c 5e 38 0e 7c 65 5b 43 83 a2 6d 63 55 9c c2 ef 15 af 2c de c2 74 ... 117426 more bytes> ]

和data来自this._chatService.recieveData（）是

Answer 1

首先，您应该将crete meadia源，然后在获取缓冲区数据后添加到媒体源。因此代码应如下所示：

video: HTMLVideoElement;

  constructor(private _chatService: ChatService) {
    this.video = document.querySelector('video');
    const myMediaSource = new MediaSource();
    const url = URL.createObjectURL(myMediaSource);
    this.video.src = url;

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

    this._chatService.recieveData()
      .subscribe(data => {
        const videoData = data.arrayBuffer()
        videoSourceBuffer.appendBuffer(videoData)
      });
  }