WebRTCのAPIでビデオアプリケーションをつくってみるレクチャー&ハンズオン

9.9K Views

April 11, 22

スライド概要

WebRTCをベースに無料で利用できるビデオAPI、Twilio WebRTC Goに関する資料です。

profile-image

Developer Advocate for Auth0 by Okta

シェア

埋め込む »CMSなどでJSが使えない場合

関連スライド

各ページのテキスト
1.

WebRTCのAPIで ビデオアプリケーションを つくってみるレクチャー&ハンズオン © 2022 TWILIO INC. ALL RIGHTS RESERVED.

2.

自己紹介 池原 大然 デベロッパーエバンジェリスト Email: dikehara@twilio.com > npx neri78 @Neri78 © 2022 2020 TWILIO INC. ALL RIGHTS RESERVED.

3.

ビデオチャットがもたらす 新たなコミュニケーション © 2022 TWILIO INC. ALL RIGHTS RESERVED.

4.

© 2022 TWILIO INC. ALL RIGHTS RESERVED.

5.

ビデオコミュニケーション © 2022 TWILIO INC. ALL RIGHTS RESERVED.

6.

リモートコミュニケーションへの適合から リモートコミュニケーションの活用へ © 2022 TWILIO INC. ALL RIGHTS RESERVED.

7.

[参考] 顧客エンゲージメント現状分析レポート2021 ● ● ● 約2,500人の企業の意思決定層の方々、同 様規模の消費者の方々に対して、顧客エン ゲージメントの視点から調査 12月〜1月の調査を基に ’21年3月に発行 約10カ国の人々を対象、🎌もその1カ国 https://www.twilio.com/ja/state-of-customer-engagement © 2022 TWILIO INC. ALL RIGHTS RESERVED.

8.

顧客エンゲージメント現状分析2021から見るトレンド 1 2 3 ビデオが これまで以上に 使用されている 顧客との強固な 関係や リソースの有効活用 チャネルの 一つとして 進化する 2020年、Twilio ビデオ製品の使用が グローバルで350%以上増加 日本の回答企業の 5割以上が実感 新しい活用方法が 生み出される https://www.twilio.com/ja/state-of-customer-engagement © 2022 TWILIO INC. ALL RIGHTS RESERVED.

9.

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

10.

WebRTCを利用した ビデオコミュニケーション © 2022 TWILIO INC. ALL RIGHTS RESERVED.

11.

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

12.

WebRTCとは? Web Real-Time Communicationと呼ばれる Webブラウザ間での リアルタイムコミュニケーションを実現する技術 シグナリング 通信相手の情報を取得 STUN/TURN NATやFirewallを超えての通信を確立 P2P / SFU P2P = 音声や映像を相手と直接やりとりを行う SFU = 音声や映像を一度サーバーに送り、そこから 各参加者に配信 © 2022 TWILIO INC. ALL RIGHTS RESERVED.

13.

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

14.

Twilio Videoの基本的なコンセプト 開発工数の削減 高いビデオ品質 他チャンネルとの 連携 © 2022 TWILIO INC. ALL RIGHTS RESERVED.

15.

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

16.

Programmable Videoの用語 用語 説明 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 別の参加者からルームに共有される音声、データ、ビデオストリーム © 2022 TWILIO INC. ALL RIGHTS RESERVED.

17.

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

18.

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

19.

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

20.

基本的な処理の流れ https://jp.twilio.com/docs/video/tutorials/basic-concepts 1. 2. ルーム(Room)の作成 アクセストークンを生成 今回のデモでは 1と2を同時に実行 3. 4. ルームに参加者( Participant)として接続 参加者のトラック( Track)の公開、購読処理 © 2022 TWILIO INC. ALL RIGHTS RESERVED.

21.

お客様事例: 国内の2社様 〜価値①の例〜 「😊 既存の対面のユーザー体験をバーチャルに複製 + お客様に選択肢を提供」 キャタル様 (英語教育) SaaSビデオアプリで 遠隔レッスンの可能 性評価 👇 学習管理ツールにビ デオ機能を埋め込 み (Twilio利用!) 👇 教師1人が複数の生 徒に同時対応👉 個々のセッションは 別もの👉ビデオウィ ジェットを切り替えな がら対応 https://www.twilio.com/go/customer-japan-1 スピンシェル様 (ウェブ接客) ビデオ利用ベース のウェブ接客シス テム 👇 ビデオ利用周辺の ユーザー動/導線 にも気配り 👇 ラグジュアリーブラ ンドを含む多種多 様なエンドユーザ 企業のご利用 © 2022 TWILIO INC. ALL RIGHTS RESERVED.

22.

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

23.

2. アクセストークンの生成 トークンを返信 アクセストークンをリ クエスト Twilio資格情報を 用いてトークン作成 © 2022 TWILIO INC. ALL RIGHTS RESERVED.

24.

Demo アクセストークンのリクエスト時に併せて ビデオルームを作成 © 2022 TWILIO INC. ALL RIGHTS RESERVED.

25.
[beta]
const identity = normalize(event.identity); //ユーザーの情報

// トークンを作成

const ROOM = "hello"; //参加する Room名

const accessToken = new AccessToken(
context.ACCOUNT_SID,

// Twilio Clientを取得

context.API_KEY,

const client = context.getTwilioClient();

context.API_SECRET,
{ identity }

// ルームを取得または作成

);

let room;

// 指定のRoomでProgrammable Video機能を利用できる権限を作成

try {

const grant = new VideoGrant({ room: ROOM });

// RoomをAPIを用いて取得
room = await client.video.rooms(ROOM).fetch();
} catch (error) {

// トークンに先ほど作成した権限を付与
accessToken.addGrant(grant);

// 初回、またはルームが削除されている場合は新規に typeを指定し作成
try {
room = await client.video.rooms.create({

// 識別子、 Room名、作成されたトークンを返す
callback(null, {

uniqueName: ROOM,

identity,

type: "go",

room: ROOM,

});
} catch (error) {

token: accessToken.toJwt(),
});

// エラー
console.error(error);
callback(error);
}
}

© 2022 TWILIO INC. ALL RIGHTS RESERVED.

26.
[beta]
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(),
});
© 2022 TWILIO INC. ALL RIGHTS RESERVED.

27.

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

28.

Demo クライアントからビデオルームに接続 © 2022 TWILIO INC. ALL RIGHTS RESERVED.

29.
[beta]
// Twilioクライアント SDKを用いてRoomに接続
Twilio.Video.connect(token, {
room: room,
audio: false,
video: true,
}).then((room) => {
// Roomに接続した後の処理を行う
});

© 2022 TWILIO INC. ALL RIGHTS RESERVED.

30.

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

31.

Demo トラックの公開・購読処理 © 2022 TWILIO INC. ALL RIGHTS RESERVED.

32.
[beta]
// 参加者が接続した際のTrack処理と描画

//個別のTrackの公開と購読を処理

function participantConnected(participant) {

function trackPublished(trackPublication, participant) {

const el = document.createElement("div");

const el = document.getElementById(participant.identity);

el.setAttribute("id", participant.identity);
participants.appendChild(el);

const trackSubscribed = (track) => {
// Trackに関連する<video>や<audio>タグを生成。ページに追加できる

// 参加者のTrackをページに追加

el.appendChild(track.attach());

participant.tracks.forEach((trackPublication) => {

};

trackPublished(trackPublication, participant);
});

// すでにTrackが購読されていれば、上記のfunctionを使用し、ページに追加

// 他の参加者からのTrack公開イベントをハンドリング

if (trackPublication.track) {

participant.on("trackPublished", trackPublished);

trackSubscribed(trackPublication.track);

}

}
// まだ購読されていなければ購読を開始
trackPublication.on("subscribed", trackSubscribed);
}

© 2022 TWILIO INC. ALL RIGHTS RESERVED.

33.

Programmable Video活用例 遠隔医療 遠隔教育 リモート エンゲージメント 予約のリマインダー 家庭教師 予約 デジタル コンサルテーション 学校教育 デート 試験監督 ソーシャル 医療コンタクトセンター ボランティア © 2022 TWILIO INC. ALL RIGHTS RESERVED.

34.

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

35.

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

36.

リソース 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 ハンズオン https://neri78.github.io/Twilio-HandsOn-Video-JP/ © 2022 TWILIO INC. ALL RIGHTS RESERVED.

37.

サンプルアプリケーション 数分でデプロイ 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 © 2020 2022 TWILIO INC. ALL RIGHTS RESERVED.

38.

Twilio WebRTC Goハンズオン https://neri78.github.io/Twilio-HandsOn-Video-JP/ 1. 2. 3. 4. トークンの生成 ルームの作成 ルームに接続 トラックの処理 Twilioアカウントの作成から順を追って体験 本日はこの後実施します! © 2022 TWILIO INC. ALL RIGHTS RESERVED.

39.

Thank you © 2022 TWILIO INC. ALL RIGHTS RESERVED.