はじめてのTwilioシリーズ - 無料でWebRTCビデオチャットアプリを構築 / WebRTC Go Free Video

Transcript

1. © 2020 TWILIO INC. ALL RIGHTS RESERVED. はじめてのTwilioシリーズ 無料でWebRTCビデオチャット アプリを構築 Twilio Japan合同会社 池原大然（@neri78）
2. © 2020 TWILIO INC. ALL RIGHTS RESERVED. © 2020 TWILIO INC. ALL RIGHTS RESERVED. 自己紹介 池原 大然 Developer Evangelist @ Twilio Email: dikehara@twilio.com Twitter/Twitch/GitHub: “Neri78” Twitch Twitter GitHub
3. © 2020 TWILIO INC. ALL RIGHTS RESERVED.
4. © 2020 TWILIO INC. ALL RIGHTS RESERVED. RUNTIME Functions Assets CLI Debugger SDKs Phone Numbers Short Codes IoT SIM SIP Interconnect SUPER NETWORK Twilio Flex Marketing Campaigns ソリューション チャネル API SMS Voice Chat Email WhatsApp Video Facebook Autopilot インテリジェンス Verify Lookup Authy アイデンティティ TaskRouter オーケストレーション Studio Conversations
5. © 2020 TWILIO INC. ALL RIGHTS RESERVED. © 2020 TWILIO INC. ALL RIGHTS RESERVED. Twilio Video WebRTC Go概要

6. © 2020 TWILIO INC. ALL RIGHTS RESERVED. © 2020 TWILIO INC. ALL RIGHTS RESERVED. Programmable Videoとは？ WebRTCを利用し、最大50名までのビデオチャット機能を提供 Web, iOS, Android向けのSDK シグナリングをサポートする インフラストラクチャ サポートするブラウザー、プラットフォーム特有の 差異を吸収 参加者に対するwebsocketの確立を支援 メディアサービスの提供 多人数でのビデオミーティングで音声、動画、 その他のデータ転送をサポート
7. © 2019 TWILIO INC. ALL RIGHTS RESERVED. 開発工数の削減 高いビデオ品質 他チャンネルとの 連携 Twilio Videoの基本的なコンセプト
8. © 2020 TWILIO INC. ALL RIGHTS RESERVED. Programmable Video活用例 遠隔医療 リモート エンゲージメント 遠隔教育 予約のリマインダー デジタル コンサルテーション 医療コンタクトセンター 家庭教師 学校教育 試験監督 予約 デート ソーシャル ボランティア
9. © 2020 TWILIO INC. ALL RIGHTS RESERVED. Twilio use case Twilio Programmable Video Twilio-powered differentiator Using Twilio Programmable Video, Docway ensures an efficient and prompt service without losing the human touch with the patients. Impact and ROI Docway was able to scale a lightning speed, enabling 65k video appointments in just one month during the COVID-19 pandemic © 2020 TWILIO INC. ALL RIGHTS RESERVED. Uses technology to enable doctors and patients to connect
10. © 2020 TWILIO INC. ALL RIGHTS RESERVED. © 2020 TWILIO INC. ALL RIGHTS RESERVED. Programmable Videoの用語 用語 説明 Room リアルタイム音声、データ、ビデオ、画面共有などを含んだセッション。 Web RTC Go Room / P2P Room メディア（音声、ビデオ）を Twilioを介さず、参加者で直接やりとりを行うセッション。 1部屋あたり最大2名、または10名まで Small Group Room / Group Room メディアをTwilioメディアサービスを介して、参加者がやりとりを行うセッション。 １部屋あたり最大4名、または50名まで Participants Roomに参加しているクライアントアプリケーション（ユーザー） Tracks 音声、データ、ビデオストリーム LocalTracks マイクやカメラなどローカルのメディアソースからキャプチャされ、 Roomに共有される音声、データ、ビデオストリーム RemoteTracks 別の参加者からルームに共有される音声、データ、ビデオストリーム
11. © 2020 TWILIO INC. ALL RIGHTS RESERVED. Peer-to-Peer Rooms • 動画および音声は それぞれの参加者に 直接送られる • E2E-Encryption
12. © 2020 TWILIO INC. ALL RIGHTS RESERVED. Group Rooms • 動画や音声はTwilioを 介して参加者に送られる • 多くの参加人数や録画、 ダイヤルイン・アウトを サポート
13. © 2020 TWILIO INC. ALL RIGHTS RESERVED. P2P versus Group Rooms どのRoomを利用すべきか？ https://jp.twilio.com/docs/video/tutorials/understanding-video-roo ms
14. © 2020 TWILIO INC. ALL RIGHTS RESERVED. © 2020 TWILIO INC. ALL RIGHTS RESERVED. プランの比較（抜粋）
 WebRTC Go Peer-2-Peer Small Group / Group 1チャットルームの 参加人数 2 (全体を通じて最大 100名） 10 (音声のみの場合 ) 3 (ビデオの推奨人数） 4 (Small Group) 50 (Group) E2E 暗号化 Yes Yes No （Twilio内部のみ非暗号化） ビデオの録画（有償） No No Yes その他の機能 VP8サイマルキャスト、ドミナントスピーカー検知、 ネットワーク品質 API、トラックサブスクリプション API、一般公衆回線との相互接続 価格 （ビデオチャットのみ） 無料 (月25GB分のTURNまで) ≒ 全参加者合計で約 10万分 ≒ 2人が1ヶ月間丸々ビデオ チャットしても余るくらい 1参加者あたり0.0015ドル/分 １参加者あたり0.004ドル/分 https://www.twilio.com/ja/video/pricing
15. © 2020 TWILIO INC. ALL RIGHTS RESERVED. © 2020 TWILIO INC. ALL RIGHTS RESERVED. 基本的な処理の流れ 1. トークンの生成 2. ルームの作成 3. ルームに接続 4. トラックの処理 https://jp.twilio.com/docs/video/tutorials/basic-concepts
16. © 2020 TWILIO INC. ALL RIGHTS RESERVED. © 2020 TWILIO INC. ALL RIGHTS RESERVED. トークンの生成 アクセストークンをリ クエスト Twilio資格情報を 用いてトークン作成 トークンを返信
17. © 2020 TWILIO INC. ALL RIGHTS RESERVED. © 2020 TWILIO INC. ALL RIGHTS RESERVED. const ROOM = "hello"; //参加するRoom名 // Twilio Clientを取得 const client = context.getTwilioClient(); // ルームを取得または作成 let room; try { // RoomをAPIを用いて取得 room = await client.video.rooms(ROOM).fetch(); } catch (error) { // 初回、またはルームが削除されている場合は新規に作成 try { room = await client.video.rooms.create({ uniqueName: ROOM, type: "go", }); } catch (error) { // エラー console.error(error); callback(error); } }
18. © 2020 TWILIO INC. ALL RIGHTS RESERVED. © 2020 TWILIO INC. ALL RIGHTS RESERVED. ルームの作成 Room作成を リクエスト Roomを作成 Room情報を返信
19. © 2020 TWILIO INC. ALL RIGHTS RESERVED. © 2020 TWILIO INC. ALL RIGHTS RESERVED. const identity = normalize(event.identity); //ユーザーの情報 const ROOM = "hello"; //参加するRoom名 // Twilio Clientを取得 const client = context.getTwilioClient(); // ルームを取得または作成 ...先ほどのコードなので省略 // トークンを作成 const accessToken = new AccessToken( context.ACCOUNT_SID, context.API_KEY, context.API_SECRET, { identity } ); // 指定のRoomでProgrammable Video機能を利用できる権限を作成 const grant = new VideoGrant({ room: ROOM }); // トークンに先ほど作成した権限を付与 accessToken.addGrant(grant); // 識別子、Room名、作成されたトークンを返す callback(null, { identity, room: ROOM, token: accessToken.toJwt(), });
20. © 2020 TWILIO INC. ALL RIGHTS RESERVED. © 2020 TWILIO INC. ALL RIGHTS RESERVED. ルームに接続 アクセストークンを用 いて接続 アクセストークンの確 認および、シグナリン グ接続の確立
21. © 2020 TWILIO INC. ALL RIGHTS RESERVED. © 2020 TWILIO INC. ALL RIGHTS RESERVED. // TwilioクライアントSDKを用いてRoomに接続 Twilio.Video.connect(token, { room: room, audio: false, video: true, }).then((room) => { // Roomに接続した後の処理を行う });
22. © 2020 TWILIO INC. ALL RIGHTS RESERVED. © 2020 TWILIO INC. ALL RIGHTS RESERVED. トラックの処理 トラック1を公開 トラック2を公開 トラック1を購読 トラック2を購読
23. © 2020 TWILIO INC. ALL RIGHTS RESERVED. © 2020 TWILIO INC. ALL RIGHTS RESERVED. // 参加者が接続した際のTrack処理と描画 function participantConnected(participant) { const el = document.createElement("div"); el.setAttribute("id", participant.identity); participants.appendChild(el); // 参加者のTrackをページに追加 participant.tracks.forEach((trackPublication) => { trackPublished(trackPublication, participant); }); // 他の参加者からのTrack公開イベントをハンドリング participant.on("trackPublished", trackPublished); } //個別のTrackの公開と購読を処理 function trackPublished(trackPublication, participant) { const el = document.getElementById(participant.identity); const trackSubscribed = (track) => { // Trackに関連する<video>や<audio>タグを生成。ページに追加できる el.appendChild(track.attach()); }; // すでにTrackが購読されていれば、上記のfunctionを使用し、ページに追加 if (trackPublication.track) { trackSubscribed(trackPublication.track); } // まだ購読されていなければ購読を開始 trackPublication.on("subscribed", trackSubscribed); }
24. © 2020 TWILIO INC. ALL RIGHTS RESERVED. © 2020 TWILIO INC. ALL RIGHTS RESERVED. ハンズオンについて

25. © 2020 TWILIO INC. ALL RIGHTS RESERVED. © 2020 TWILIO INC. ALL RIGHTS RESERVED. 本日体験いただくこと 1. トークンの生成 2. ルームの作成 3. ルームに接続 4. トラックの処理 https://jp.twilio.com/docs/video/tutorials/basic-concepts
26. © 2020 TWILIO INC. ALL RIGHTS RESERVED. © 2020 TWILIO INC. ALL RIGHTS RESERVED. 本日のハンズオンについて
 • ハンズオンコンテンツ
 https://neri78.github.io/Twilio-HandsOn-Video-JP/ 
 
 • 質問はチャット、またはTwitter #twiliotv ハッシュタグでご質問くだ さい
 
 • ハンズオン中の休憩は適宜お取りください
 
 

27. © 2020 TWILIO INC. ALL RIGHTS RESERVED. © 2020 TWILIO INC. ALL RIGHTS RESERVED. クロージング
28. © 2020 TWILIO INC. ALL RIGHTS RESERVED. まとめ
 • JavaScript, iOS, Androidに対応する WebRTCベース製品 • 少人数から大人数までのビデオミーティングをサ ポート
 
 • すぐに試せるサンプルも提供

29. © 2020 TWILIO INC. ALL RIGHTS RESERVED. リソース Twilio Programmable Video https://www.twilio.com/ja/video GitHub - Phil Nash - first-twilio-video-application https://github.com/philnash/first-twilio-video-application Qiita - Twilio WebRTCハンズオン (by KWC高橋様) http://bit.ly/QiitaTwilioVideo 5分でデプロイ可能なビデオアプリサンプル Web (React, JavaScript) - https://github.com/twilio/twilio-video-app-react iOS - https://github.com/twilio/twilio-video-app-ios Android - https://github.com/twilio/twilio-video-app-android
30. © 2020 TWILIO INC. ALL RIGHTS RESERVED. Thank you