マルチストリーム

概要

マルチストリームとは、一つのピア接続で複数のメディアストリームを管理する機能です。 詳しくは Sora ドキュメント を参照してください。

Sora JavaScript SDK におけるマルチストリームの扱い

Sora サーバーにマルチストリームで接続するには、オプションに multistream: true をセットしてから接続します。

マルチストリーム接続例:

var debug = false;
var sora = Sora.connection('ws://192.168.0.2:5000/signaling', debug);
var publisher = sora.publisher('Sora', '', {multistream: true});

navigator.mediaDevices.getUserMedia({audio: true, video: true})
  .then(mediaStream => publisher.connect(mediaStream))
  .then(stream => {
  })
  .catch(e => {
    console.error(e);
  });

マルチストリームで接続した Publisher オブジェクトは接続したメディアチャネル ID に MediaStream が追加、削除されるとイベントハンドラが呼ばれます。イベントハンドラを利用して追加、削除された MediaStream を処理します。

マルチストリームイベントハンドラ:

publisher.on('addstream', function(event) {
  var remoteVideo = document.createElement('video');
  remoteVideo.id = 'publisher-remote-video-' + event.stream.id;
  remoteVideo.autoplay = true;
  remoteVideo.srcObject = event.stream;

  var remoteVideos = document.querySelector('#remote-videos');
  remoteVideos.appendChild(remoteVideo);
});

publisher.on('removestream', function(event) {
  var remoteVideo = document.querySelector('#publisher-remotevideo-' + event.stream.id);

  var remoteVideos = document.querySelector('#remote-videos');
  remoteVideos.removeChild(remoteVideo);
});

重要

Firefox 59 で RTCPeerConnection の onremovestream API は削除されました。そのため SDK の on('removestream') は発火しません。event.stream の onremovetrack を使用して処理を行う必要があります

Firefox 59 専用マルチストリームイベントハンドラ:

publisher.on('addstream', function(event) {
  var remoteVideo = document.createElement('video');
  remoteVideo.id = 'publisher-remote-video-' + event.stream.id;
  remoteVideo.autoplay = true;
  remoteVideo.srcObject = event.stream;

  var remoteVideos = document.querySelector('#remote-videos');
  remoteVideos.appendChild(remoteVideo);
  // Firefox 59 対応
  event.stream.onremovetrack = function(e) {
    const targetVideo = document.querySelector('#publisher-remote-video-' + event.stream.id);
    if (targetVideo) {
      document.querySelector('#remote-videos').removeChild(targetVideo);
    }
  }
});

Subscriber オブジェクトでは配信中の Publisher Multistream 接続を視聴することが可能です。