先月、 Twilio Video がリニューアルされました。
リニューアルの内容
具体的にどんなリニューアルなのかというと、今までは「人と人とが会話をする」という設計になっており、「ユーザーAがユーザーBに会話を招待し、Bが受け取った場合に会話が始まる」というような作りになっていました。その会話にさらに人を増やす場合には、AかBが招待をまた別の人に送って・・という流れです。
この設計は、ややイケてないものでした。招待するAとされるBとで同じユーザーなのに別としてそれぞれの役割を持ってしまっているからです。
新しく生まれ変わった Twilio Video では、新しく Room という概念が生まれました。ユーザーは、指定の Room に Client を通して入退室することで、会話を開始/終了することができます。この方が私はユーザーの役割がシンプルになって好みです。しかしながら、以前のバージョンにあった招待の機能が廃止されているため、部屋の選択などを工夫してAとBが会話を始められるような仕組みを自分で作る必要が出てきています。
以前の Twilio Video と同じように招待の仕組みを作りたければ、 Twilio Sync などの別の Twilio サービスを組み合わせることで実現できます。このように Twilio は最近、それぞれの役割をしっかりと分けることを意識しているように思います。必要な時に必要な Twilio のサービスを使うという判断ができるようになるため、良い傾向だと考えています。
Twilio は Kurento という WebRTC テクノロジー企業を買収しています。これにより、今後はより多くの人との会話や、ストリーミング配信といったことも Twilio Video でできるようになるかもしれません。そんな今後の期待高まる Twilio Video を触ってみましょう！
Twilio Video を触ってみよう
さて、Twilio Video が最新すぎる影響で、まだドキュメントの日本語訳が追いついていない模様です。そのうち日本語化されるのを待つか、英語で読み進めていきましょう。
基本的なトークンの生成などは以前と全く変わりがありません。
以前の Twilio Video ハンズオン資料が役立つと思います。それよりも Twilio ドキュメントを英語で読む方がさらに役立つと思います。
何が変わったのかというと、トークン生成して Client を初期化した後です。
client.connect({
to: 'my-room',
localMedia: localMedia
}).then(room => {
console.log('Connected to the Room "%s"', room.name);
}, error => {
console.error('Failed to connect to the Room', error);
});
client に connect メソッドが追加され、client は Room に接続しに行きます。接続に成功したら、 room オブジェクトが帰ってきて、無事に Room へ入室できたことになります。
この room オブジェクトで発生したイベントを、諸々定義できます。
function _addVideo (participant) {
participant.media.attach('#video-view');
}
room.participants.forEach(participant => {
console.log('Participant "%s" is connected to the Room', participant.identity);
_addVideo(participant);
});
// Log new Participants as they connect to the Room
room.once('participantConnected', participant => {
console.log('Participant "%s" has connected to the Room', participant.identity);
_addVideo(participant);
});
// Log Participants as they disconnect from the Room
room.once('participantDisconnected', participant => {
console.log('Participant "%s" has disconnected from Room', participant.identity);
});
この時に、いろいろと UI を適切に変えてあげるだけです。簡単ですね ;)
attach されるのは、HTML5 の Video 要素です。Video 要素は、JavaScript を通していろいろと操作することが可能です。また、 Audio 要素と分けることも可能で、JavaScript で音声をいじれる Web Audio API などと組み合わせると、面白い Video 通話ができるようになりそうですね。
より洗練された設計になった Twilio Video をぜひ試してみてください。