Angular と Akka Streams で多対多のビデオチャット作った – Media Source Extensions 利用

startVideo(): void {

  navigator.mediaDevices.getUserMedia({
    video: true,
    audio: false
  })
    .then((stream) => {
      this.localVideoPlayer.nativeElement.srcObject = stream;
    })
    .catch((error) => {
      console.error('mediaDevice.getUserMedia() error:', error);
      return;
    });

}

<div>
  <button (click)="startVideo();">start</button>
  <video autoplay #localVideoPlayer id="local_video" style="width: 240px; height: 180px; border: 1px solid black; transform: scale(-1, 1);">  </video>
</div>

start(): void {

  // -- ①
  let subject = this.videoService.connect(this.roomNumber, this.name);

  // -- ②
  const options = {
    audioBitsPerSecond: 64000,
    videoBitsPerSecond: 100000,
    mimeType: 'video/webm; codecs=vp9'
  };


  this.recorder = new MediaRecorder(this.localStream, options);

  // -- ③
  this.recorder.ondataavailable = (event) => {
    subject.next(event.data);
  };

  this.recorder.onstop = (event) => {
    console.log('recorder.stop(), so playback');
    subject.complete();
    subject = null;
    this.recorder = null;
  };

  // -- ④
  this.recorder.start(500);
  console.log('publish');
}

export class MembersVideoRoomComponent implements OnInit {

  roomNumber: string;
  name: string;

  private localStream;
  private recorder;
  @ViewChild('localVideoPlayer') localVideoPlayer: any;

  members: Observable<string[]>;

  constructor(
    private videoService: VideoService,
    private memberService: MemberService,
    private route: ActivatedRoute
  ) {
  }

  ngOnInit() {
    this.route.params.forEach((params: Params) => {
      this.roomNumber = params['roomNumber'];
    });

    this.route.queryParams.forEach((params: Params) => {
      this.name = params['name'];
    });

    navigator.mediaDevices.getUserMedia({
      video: true,
      audio: false
    })
      .then((stream) => {
        this.localStream = stream;
        this.localVideoPlayer.nativeElement.srcObject = this.localStream;
      })
      .catch((error) => {
        console.error('mediaDevice.getUserMedia() error:', error);
        return;
      });

    this.members = this.memberService.connect(this.roomNumber, this.name)
      .debounceTime(1000)
      .distinctUntilChanged()
      .concatMap(members => {
        return Observable.of<string[]>(members.members)
      });

  }

<div class="container">
  <button (click)="start();">publish</button>
  <button (click)="stop();">stop</button>

  <ul class="list-group">
    <li class="list-group-item">
      <div class="col-xs-12">
        <video autoplay #localVideoPlayer
               style="width: 240px; height: 180px; border: 1px solid black; transform: scale(-1, 1);"></video>
      </div>
    </li>
  </ul>
  <div class="row container">
    <div *ngFor="let member of members | async" class="col-sm-3">
      <app-member-video [room]=roomNumber [name]=member></app-member-video>
    </div>
  </div>
</div>

$ ffprobe chunk@3b6d8160 # 先頭データのバイナリを保存したファイル => 正常にメタ情報を表示可能

---
Input #0, matroska,webm, from 'chunk@3b6d8160':
  Metadata:
    encoder         : Chrome
  Duration: N/A, start: 0.000000, bitrate: N/A
    Stream #0:0(eng): Video: vp9 (Profile 0), yuv420p(tv), 640x480, SAR 1:1 DAR 4:3, 1k tbr, 1k tbn, 1k tbc (default)
---

$ ffprobe chunk@4e16e6ea # 先頭より後のバイナリを保存したファイル => メタ情報を表示させようとするとエラー
[mp3 @ 0x7f9e41802a00] Format mp3 detected only with low score of 1, misdetection possible!
[mp3 @ 0x7f9e41802a00] Failed to read frame size: Could not seek to 9100.
chunk@4e16e6ea: Invalid argument

export class MembersVideoRoomComponent implements OnInit {

  roomNumber: string;
  name: string;

  private localStream;
  private recorder;
  @ViewChild('localVideoPlayer') localVideoPlayer: any;

  members: Observable<string[]>;

  constructor(
    private videoService: VideoService,
    private memberService: MemberService,
    private route: ActivatedRoute
  ) {
  }

  ngOnInit() {
    this.route.params.forEach((params: Params) => {
      this.roomNumber = params['roomNumber'];
    });

    this.route.queryParams.forEach((params: Params) => {
      this.name = params['name'];
    });

    navigator.mediaDevices.getUserMedia({
      video: true,
      audio: false
    })
      .then((stream) => {
        this.localStream = stream;
        this.localVideoPlayer.nativeElement.srcObject = this.localStream;
      })
      .catch((error) => {
        console.error('mediaDevice.getUserMedia() error:', error);
        return;
      });

    this.members = this.memberService.connect(this.roomNumber, this.name)
      .debounceTime(1000)
      .distinctUntilChanged()
      .concatMap(members => {
        this.restart();
        return Observable.of<string[]>(members.members)
      });

  }
  start(): void { ... }
  stop(): void { ... }
  restart(): void {
      if (!this.recorder) {
        return;
      }
      this.stop();
      this.start();
    }
  }