Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Twilio Programmable Videoを利用したビデオアプリケーション開発入門 /...

Neri78
November 08, 2021

Twilio Programmable Videoを利用したビデオアプリケーション開発入門 / Get Started with Twilio Programmable Video

Twilio Programmable Videoを用いたビデオアプリケーション開発入門

Neri78

November 08, 2021
Tweet

More Decks by Neri78

Other Decks in Technology

Transcript

  1. © 2020 TWILIO INC. ALL RIGHTS RESERVED. Twilio Programmable Videoを

    利用したビデオアプリケーション 開発入門
  2. © 2021 TWILIO INC. ALL RIGHTS RESERVED. This presentation and

    the accompanying oral presentation contain forward-looking statements. All statements other than statements of historical fact contained in this presentation, including statements as to future results of operations and financial position, planned products and services, business strategy and plans, objectives of management for future operations of Twilio Inc. and its subsidiaries (“Twilio” or the “Company”), market size and growth opportunities, competitive position and technological and market trends, are forward-looking statements. In some cases, you can identify forward-looking statements by terms such as “expect,” “plan,” “anticipate,” “intend,” “target,” “project,” “predict,” “potential,” “explore” or “continue” or the negative of these terms or other similar words. Twilio has based these forward-looking statements largely on its current expectations and assumptions and on information available as of the date of this presentation. The Company assumes no obligation to update any forward-looking statements after the date of this presentation, except as required by law. The forward-looking statements contained in this presentation and the accompanying oral presentation are subject to known and unknown risks, uncertainties, assumptions and other factors that may cause actual results or outcomes to be materially different from any future results or outcomes expressed or implied by the forward-looking statements. These risks, uncertainties, assumptions and other factors include, but are not limited to, those related to the Company’s business and financial performance, the Company’s ability to attract and retain customers, the Company’s ability to develop new products and services and enhance existing products and services, the Company’s ability to respond rapidly to emerging technology trends and adapt to adverse changes in general economic or market conditions, the Company’s ability to comply with modified or new industry standards, laws and regulations applying to its business, the Company’s ability to execute on its business strategy, the Company’s ability to compete effectively and the Company’s ability to manage growth. Moreover, the Company operates in a very competitive and rapidly changing environment, and new risks may emerge from time to time. It is not possible for the Company to predict all risks, nor can the Company assess the impact of all factors on its business or the extent to which any factor, or combination of factors, may cause actual results or outcomes to differ materially from those contained in any forward-looking statements the Company may make. This presentation also contains estimates and other statistical data made by independent parties and by the Company relating to market size and growth and other industry data. These data involve a number of assumptions and limitations, and you are cautioned not to give undue weight to such estimates. The Company has not independently verified the statistical and other industry data generated by independent parties and contained in this presentation and, accordingly, it cannot guarantee their accuracy or completeness. In addition, projections, assumptions and estimates of its future performance and the future performance of the markets in which the Company competes are necessarily subject to a high degree of uncertainty and risk due to a variety of factors. These and other factors could cause results or outcomes to differ materially from those expressed in the estimates made by the independent parties and by Twilio. This presentation also includes certain non-GAAP financial measures. These non-GAAP financial measures are in addition to, and not as a substitute for or superior to measures of financial performance prepared in accordance with GAAP. There are a number of limitations related to the use of these non-GAAP financial measures versus their nearest GAAP equivalents. For example, other companies may calculate non-GAAP financial measures differently or may use other measures to evaluate their performance, all of which could reduce the usefulness of the Company’s non-GAAP financial measures as tools for comparison. The Company has provided a reconciliation of those measures to the most directly comparable GAAP measures, which is available in the appendix. For further information with respect to Twilio, we refer you to our most recent quarterly report on Form 10-Q filed with the SEC. In addition, we are subject to the information and reporting requirements of the Securities Exchange Act of 1934 and, accordingly, file periodic reports, current reports, proxy statements and other information with the SEC. The final prospectus and these periodic reports, current reports, proxy statements and other information are available for review at the SEC’s website at http://www.sec.gov. Legal disclaimer
  3. © 2020 TWILIO INC. ALL RIGHTS RESERVED. © 2020 TWILIO

    INC. ALL RIGHTS RESERVED. 自己紹介 池原 大然 デベロッパーエバンジェリスト Email: [email protected] TwilioQuest日本語版担当 https://www.twilio.com/quest/ja @Neri78
  4. © 2021 TWILIO INC. ALL RIGHTS RESERVED. Agenda ビデオチャットがもたらす 新たなカスタマーエンゲージメント

    Twilio Programmable Videoの特長 ビデオアプリの構築 今日からはじめたい!という方へ 1 2 3 4
  5. © 2020 TWILIO INC. ALL RIGHTS RESERVED. © 2021 TWILIO

    INC. ALL RIGHTS RESERVED. ビデオチャットがもたらす 新たなカスタマーエンゲージメント
  6. © 2020 TWILIO INC. ALL RIGHTS RESERVED. © 2020 TWILIO

    INC. ALL RIGHTS RESERVED. リモートコミュニケーションへの適合から リモートコミュニケーションの活用へ
  7. © 2020 TWILIO INC. ALL RIGHTS RESERVED. 顧客エンゲージメント現状分析2021から見る「ビデオ」 2020年、Twilio ビデオ製品の使用が

    グローバルで350%以上増加 ビデオが これまで以上に 使用されている 顧客との強固な関係 や リソースの有効活用 チャネルの 一つとして 進化する 日本の回答企業の 5割以上が実感 新しい活用方法が 生み出される 1 2 3 https://www.twilio.com/ja/state-of-customer-engagement
  8. © 2020 TWILIO INC. ALL RIGHTS RESERVED. リアル コミュニケーションが適 している

    ビデオ コミュニケーションで 実現できる 学校教育 同僚との協業 エキスパートサービス 家庭教師 オンライン診療 遠隔セラピー 修理トリアージ 健康診断 社会活動 面接 引っ越し グループワークアウト 修理サービス イベント 試験 ビデオコミュニケーションの向き不向き
  9. © 2020 TWILIO INC. ALL RIGHTS RESERVED. © 2021 TWILIO

    INC. ALL RIGHTS RESERVED. Twilio Programmable Video の特長
  10. © 2020 TWILIO INC. ALL RIGHTS RESERVED. © 2021 TWILIO

    INC. ALL RIGHTS RESERVED. Twilio Programmable Videoとは? WebRTCを利用し、最大50名までのビデオチャット機能を提供 Web, iOS, Android向けのSDK シグナリングをサポートする インフラストラクチャ サポートするブラウザー、プラットフォーム特有の 差異を吸収 参加者に対するwebsocketの確立を支援 メディアサービスの提供 多人数でのビデオミーティングで音声、動画、 その他のデータ転送をサポート
  11. © 2020 TWILIO INC. ALL RIGHTS RESERVED. © 2021 TWILIO

    INC. ALL RIGHTS RESERVED. グローバルロケーション VIRGINIA, USA DUBLIN, IRELAND SINGAPORE SYDNEY, AUSTRALIA TOKYO, JAPAN SAO PAULO, BRAZIL OREGON, USA FRANKFURT, GERMANY MUMBAI, INDIA
  12. © 2020 TWILIO INC. ALL RIGHTS RESERVED. © 2021 TWILIO

    INC. ALL RIGHTS RESERVED. おさえておきたい用語
 用語 説明 Room リアルタイム音声、データ、ビデオ、画面共有などを含んだセッション。 
 Web RTC Go Room / P2P Room メディア(音声、ビデオ)を Twilioを介さず、参加者で直接やりとりを行うセッション。 1部屋あたり最大2名、または10名まで Small Group Room / Group Room メディアをTwilioメディアサービスを介して、参加者がやりとりを行うセッション。 1部屋あたり最大4名、または50名まで Participants Roomに参加しているクライアントアプリケーション(ユーザー) Tracks 音声、データ、ビデオストリームなど、ビデオチャットで送出・配信されるデータ LocalTracks マイクやカメラなどローカルのメディアソースからキャプチャされ、 Roomに共有される音声、データ、ビデオストリーム RemoteTracks 別の参加者からルームに共有される音声、データ、ビデオストリーム
  13. © 2020 TWILIO INC. ALL RIGHTS RESERVED. © 2020 TWILIO

    INC. ALL RIGHTS RESERVED. 基本的な処理の流れ 1. ルーム(Room)の作成 2. アクセストークンを生成し、クライアントに送信 3. ルームに参加者(Participant)として接続 4. 参加者のトラック(Track)の公開、購読処理 https://jp.twilio.com/docs/video/tutorials/basic-concepts
  14. © 2020 TWILIO INC. ALL RIGHTS RESERVED. © 2021 TWILIO

    INC. ALL RIGHTS RESERVED. 2種類のビデオチャット「ルーム」 Peer-to-Peer Rooms • Media encrypted E2E with WebRTC security • Twilio does not interact with the media - not even when TURN is required to go across firewalls • No interaction means no recording possible • Signaling comms still go through Twilio to manage Participant discovery and session negotiation Group Rooms • Participants publish media to a Media Server (SFU) that decrypts and processes the data to route to participants that have subscribed • Media is NOT E2E encrypted • Richer services: recording, PSTN access, composition
  15. © 2020 TWILIO INC. ALL RIGHTS RESERVED. Peer-to-Peer Rooms •

    動画および音声は それぞれの参加者に 直接送られる • E2E-Encryption • 2種類のプランで提供 ◦ WebRTC Go ◦ P2P
  16. © 2020 TWILIO INC. ALL RIGHTS RESERVED. Group Rooms •

    動画や音声はTwilioを 介して参加者に送られる • より多くの参加人数や録画、 ダイヤルインなど追加機能を 提供
  17. © 2020 TWILIO INC. ALL RIGHTS RESERVED. © 2021 TWILIO

    INC. ALL RIGHTS RESERVED. 1. ルームの作成
 Room作成を リクエスト Roomを作成 Room情報を返信
  18. © 2020 TWILIO INC. ALL RIGHTS RESERVED. © 2020 TWILIO

    INC. ALL RIGHTS RESERVED. Demo Roomの作成

  19. © 2020 TWILIO INC. ALL RIGHTS RESERVED. © 2021 TWILIO

    INC. ALL RIGHTS RESERVED. const { identity, room } = req.body; const {TWILIO_ACCOUNT_SID, TWILIO_API_KEY, TWILIO_API_SECRET} = process.env; // Twilio Node Clientを初期化 const client = new twilio(TWILIO_API_KEY, TWILIO_API_SECRET, {accountSid: TWILIO_ACCOUNT_SID}); let roomObj; // 現在進行中のビデオルームを検索 let rooms = await client.video.rooms.list({ status: 'in-progress', uniqueName: room }); // ルームが存在する場合はそちらを利用 if (rooms.length) roomObj = rooms[0]; else { // そうでない場合はビデオルームを作成 roomObj = await client.video.rooms.create({ uniqueName: room, type: 'go' }); }
  20. © 2020 TWILIO INC. ALL RIGHTS RESERVED. © 2021 TWILIO

    INC. ALL RIGHTS RESERVED. 2. クライアントから接続するためのアクセストークンを生成
 アクセストークンをリ クエスト Twilio資格情報を 用いてトークン作成 トークンを返信 • アクセストークンを返信する際に、 ビデオチャットのルーム名も あわせてクライアント側に送信
  21. © 2020 TWILIO INC. ALL RIGHTS RESERVED. © 2020 TWILIO

    INC. ALL RIGHTS RESERVED. Demo アクセストークンの作成 

  22. © 2020 TWILIO INC. ALL RIGHTS RESERVED. © 2021 TWILIO

    INC. ALL RIGHTS RESERVED. const AccessTooken = twilio.jwt.AccessToken; const VideoGrant = AccessTooken.VideoGrant; // 特定のビデオルームのみに入室できる const grant = new VideoGrant(); grant.room = roomObj.uniqueName; // 上記の認可を有したアクセストークンを生成 const accessToken = new AccessTooken( TWILIO_ACCOUNT_SID, TWILIO_API_KEY, TWILIO_API_SECRET); accessToken.addGrant(grant); accessToken.identity = identity; // クライアント側にトークンを送信 res.send({ token: accessToken.toJwt(), room: roomObj.uniqueName });
  23. © 2020 TWILIO INC. ALL RIGHTS RESERVED. © 2021 TWILIO

    INC. ALL RIGHTS RESERVED. 3. ルームに接続
 アクセストークンを用 いて接続 アクセストークンの確 認および、シグナリン グ接続の確立
  24. © 2020 TWILIO INC. ALL RIGHTS RESERVED. © 2020 TWILIO

    INC. ALL RIGHTS RESERVED. Demo クライアントからRoomに接続 

  25. © 2020 TWILIO INC. ALL RIGHTS RESERVED. © 2021 TWILIO

    INC. ALL RIGHTS RESERVED. // TwilioクライアントSDKを用いてRoomに接続 Twilio.Video.connect(token, { room: room, audio: false, video: true, }).then((room) => { // Roomに接続した後の処理を行う });
  26. © 2020 TWILIO INC. ALL RIGHTS RESERVED. © 2021 TWILIO

    INC. ALL RIGHTS RESERVED. 4. トラックの処理
 トラック1を公開 トラック2を公開 トラック1を購読 トラック2を購読
  27. © 2020 TWILIO INC. ALL RIGHTS RESERVED. © 2020 TWILIO

    INC. ALL RIGHTS RESERVED. Demo 自分自身、その他の参加者のTrackを処理 

  28. © 2020 TWILIO INC. ALL RIGHTS RESERVED. © 2021 TWILIO

    INC. ALL RIGHTS RESERVED. // 参加者が接続した際のTrack処理と描画 function participantConnected(participant) { const el = document.createElement("div"); el.setAttribute("id", participant.identity); participants.appendChild(el); // 参加者のTrackを公開(Publish) 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); }
  29. © 2020 TWILIO INC. ALL RIGHTS RESERVED. © 2020 TWILIO

    INC. ALL RIGHTS RESERVED. 実装可能な機能例: 仮想背景 参加者のプライベートを守る機能を提供 ブランド体験 他のビデオミーティングサービスと 同等の機能を提供 ブラウザーに対応 ChromeおよびChrome Edgeに対応 開発者フレンドリーなライブラリ 背景ぼかしと仮想背景機能を素早く実装可能
  30. © 2020 TWILIO INC. ALL RIGHTS RESERVED. © 2020 TWILIO

    INC. ALL RIGHTS RESERVED. Demo 仮想背景機能
  31. © 2020 TWILIO INC. ALL RIGHTS RESERVED. © 2021 TWILIO

    INC. ALL RIGHTS RESERVED. 今日からはじめたい!という方へ
  32. © 2020 TWILIO INC. ALL RIGHTS RESERVED. © 2020 TWILIO

    INC. ALL RIGHTS RESERVED. すぐ試したい!という場合は、サンプルアプリケーション 数分でデプロイ 5分程度でリファレンスアプリケーションをクラウド環境に 展開。機能検証や開発のベースとして活用 基本的な機能の試行と他製品との連携 基本的な機能についてユーザーインタフェースが提供されており、 また、チャットサービスと組み合わせた実装例も紹介 GitHubで無料公開 Web - 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
  33. © 2020 TWILIO INC. ALL RIGHTS RESERVED. リソース 本日のデモ https://github.com/neri78/twilio-video-app-demo

    Twilio Programmable Video https://www.twilio.com/ja/video ビデオアプリサンプル 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
  34. © 2020 TWILIO INC. ALL RIGHTS RESERVED. © 2021 TWILIO

    INC. ALL RIGHTS RESERVED. プランの比較(抜粋)
 WebRTC Go Peer-2-Peer Group 1チャットルームの 参加人数 2 (全体を通じて最大 100名) 10 (音声のみの場合 ) 3 (ビデオの推奨人数) 50 E2E 暗号化 Yes Yes No (Twilio内部のみ非暗号化) ビデオの録画(有償) No No Yes その他の機能 SLA、VP8サイマルキャスト、ドミナントスピーカー 検知、ネットワーク品質 API、トラックサブスクリプ ションAPI、一般公衆回線との相互接続 価格 (ビデオチャットのみ) 無料 (最近TURNが無制限に) 1参加者あたり0.0015ドル/分 1参加者あたり0.004ドル/分 https://www.twilio.com/ja/video/pricing