Article

ブログ

2016/10/15

新しい WebRTC SDK の Twilio Video を触ってみた

こんにちは、本間です。

つい昨日のことですが、 Twilio Video の仕組みが変わったとのことで早速触ってみました。WebRTC によるビデオ通話がさらにシンプルで拡張性の高いものになりました!

相手の探し方の変化

今回の Twilio Video のアップデートで、相手の探し方が大きく変わりました。

今までの Twilio ビデオは、ユーザー一人一人に identity と呼ばれるユーザーを識別するための文字列を開発者が提供し、その identity を相手のブラウザ上で入力することで会話が始まるような仕組みでした。つまり、どちらかがどちらかを招待するという考え方が中心となっていました。しかし、この方法は招待する相手の identity をあらかじめ知らなければならなかったり、”会話の参加者” のうち、招待する側とされる側といったような形で多少複雑なコードを書く必要がありました。

これからの Twilio ビデオには、Room という新しい概念が登場しました。すべてのユーザーは Room に参加するという形となり、招待などの仕組みが廃止されています。これにより、初めて入る人も Room に参加、後から入る人も Room に参加という共通のアクションとなるため、より直感的でわかりやすいコードを書くことがでいます。

ではそのシンプルになった JavaScript のサンプルコードを覗いていみましょう。


var videoClient;
var activeRoom;
var previewMedia;
var identity;
var roomName;

// Check for WebRTC
if (!navigator.webkitGetUserMedia && !navigator.mozGetUserMedia) {
  alert('WebRTC is not available in your browser.');
}

$.getJSON('/token', function (data) {
  identity = data.identity;

  // Create a Conversations Client and connect to Twilio
  videoClient = new Twilio.Video.Client(data.token);
  document.getElementById('room-controls').style.display = 'block';

  // Bind button to join room
  document.getElementById('button-join').onclick = function () {
    roomName = document.getElementById('room-name').value;
    if (roomName) {
      log("Joining room '" + roomName + "'...");

      videoClient.connect({ to: roomName}).then(roomJoined,
        function(error) {
          log('Could not connect to Twilio: ' + error.message);
        });
    } else {
      alert('Please enter a room name.');
    }
  };

  // Bind button to leave room
  document.getElementById('button-leave').onclick = function () {
    log('Leaving room...');
    activeRoom.disconnect();
  };
});

// Successfully connected!
function roomJoined(room) {
  activeRoom = room;

  log("Joined as '" + identity + "'");
  document.getElementById('button-join').style.display = 'none';
  document.getElementById('button-leave').style.display = 'inline';

  // Draw local video, if not already previewing
  if (!previewMedia) {
    room.localParticipant.media.attach('#local-media');
  }

  room.participants.forEach(function(participant) {
    log("Already in Room: '" + participant.identity + "'");
    participant.media.attach('#remote-media');
  });

  // When a participant joins, draw their video on screen
  room.on('participantConnected', function (participant) {
    log("Joining: '" + participant.identity + "'");
    participant.media.attach('#remote-media');

    participant.on('disconnected', function (participant) {
      log("Participant '" + participant.identity + "' left the room");
    });
  });

  // When a participant disconnects, note in log
  room.on('participantDisconnected', function (participant) {
    log("Participant '" + participant.identity + "' left the room");
  });

  // When the conversation ends, stop capturing local video
  room.on('disconnected', function () {
    log('Left');
    room.localParticipant.media.detach();
    activeRoom = null;
    document.getElementById('button-join').style.display = 'inline';
    document.getElementById('button-leave').style.display = 'none';
  });
}

//  Local video preview
document.getElementById('button-preview').onclick = function () {
  if (!previewMedia) {
    previewMedia = new Twilio.Video.LocalMedia();
    Twilio.Video.getUserMedia().then(
    function (mediaStream) {
      previewMedia.addStream(mediaStream);
      previewMedia.attach('#local-media');
    },
    function (error) {
      console.error('Unable to access local media', error);
      log('Unable to access Camera and Microphone');
    });
  };
};

// Activity log
function log(message) {
  var logDiv = document.getElementById('log');
  logDiv.innerHTML += '<p>&gt;&nbsp;' + message + '</p>';
  logDiv.scrollTop = logDiv.scrollHeight;
}

一行一行の細かい説明は省きますが、部屋に入る(connect({ to: roomName}), 誰かが部屋に入った(participantConnected),誰かが部屋を出た(participantDisconnected)というだけのとてもシンプルなイベント定義だけで済むようになっていることがお分かりいただけたかと思います。

appear.in のような URL をキーにした会話サービスなども簡単に作れるようになります。その他にも、チャット部屋内にいる人同士でビデオ通話が始まるような仕組みを作ったりすることもできるでしょう。同じ条件で部屋に入った人たちで会話するという仕組みのおかげで、私たちはより柔軟なビデオアプリケーションが作れるようになります。

Kurento チームによる Twilio Video の加速

Twilio は先日、 Kurentoを仲間に迎えています。これは、クライアント同士が単にビデオ通話をするのではなく、サーバーを介してより多くの人とビデオ通話をするような仕組みを作れるような土台を整えたということができます。

twilio/kurento

今後の Twilio Video に関して、 Twilio Video チームはメディアサーバーの実装に対して YES と答えています。

Do you plan to add server-side multi-party and recording capabilities to Rooms? Yes! These features and many more are coming soon—we’ll let you know as soon as they’re available for your testing.

server-side multi-party がまさにそれです。今後に期待ですね!

終わりに

Twilio ビデオを知っていれば、 WebRTC を一から勉強してビデオ通話の実装をするなんてことは必要なくなります。

そしてビデオ通話の実装に必要なのは、ちょっとしたサーバーサイドのコードと、上記の 数行の JavaScript だけです!

Twilio ビデオは今まで息を潜めていましたが、今後一気に多くの機能やサービスを提供していくことでしょう。

今後も Twilio Video に目が離せません。