Twilio Video SDKを使った時にgetUserMediaが複数回走ってしまう時の対応方法

Twilio Video SDKを使った時に、connectを呼ぶたびにgetUserMediaが走ってユーザーに許可を求めてしまったのでその対処方法をメモ。

環境

• Twilio Video SDK v2.5

やりたかったこと

最初にnavigator.mediaDevices.getUserMedia()を実行しstreamを取得して、以後それを使いまわしたかった。

起こったこと

Twilio.video.connectを呼ぶたびに、getUserMediaが走って、ユーザーに許可を求めてしまう。

原因

Twilio.video.connectを実行した時、デフォルトだと自動でstreamを取得し、そのあとのstreamの管理も行ってくれる。

APIドキュメントはこちら

対応方法

navigator.mediaDevices.getUserMediaで取得した、streamをconnectにオプションとして渡す。

navigator.mediaDevices.getUserMedia({
  audio: true,
  video: true
}).then(function(mediaStream) {
  return Video.connect(token, {
    name: 'my-cool-room',
    tracks: mediaStream.getTracks() // tracksでstreamを渡す
  });
}).then(function(room) {
  room.on('participantConnected', function(participant) {
    console.log(participant.identity + ' has connected');
  });

  room.once('disconnected', function() {
    console.log('You left the Room:', room.name);
  });
}).catch(error => {
  console.log('Could not connect to the Room:', error.message);
});