WebRTCのAPIでビデオアプリケーションをつくってみるレクチャー＆ハンズオン

11.2K Views

April 11, 22

#twilio #video #webrtc #api #WebRTC #Video Communication #Twilio #Remote Communication #Video Chat

スライド概要

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

Daizen Ikehara

@Neri78

スライド一覧

Developer Advocate for Auth0 by Okta

またはPlayer版

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

ダウンロード

ダウンロード(pdf - 4.01MB)

関連スライド

Phaserで始めるゲーム開発入門

phaser ゲーム

Daizen Ikehara 161.8K

ReBAC入門「関係性」によるアクセス制御とは？

fga openfga authorization authz

Daizen Ikehara 24.7K

Twilio Programmable Messagingを用いたSMS送信入門

twilio messaging sms api

Daizen Ikehara 10.5K

ASP.NET Core に追加された Minimal API を使って webhook エンドポイントを構築

aspnet asp.net asp.net core minimal api twilio c

Daizen Ikehara 9.1K

9-B-7 結局どれが一番なの？あなたのユーザーに最適な二要素認証の方法を考える

twilio 2fa verify

Daizen Ikehara 6.6K

OpenAPI Specificationを使ったTwilio APIテスト用モッキングサーバーの構築

twilio openapi prism node node.js

Daizen Ikehara 6.5K

各ページのテキスト

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

https://www.twilio.com/ja/state-of-customer-engagement

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

https://www.twilio.com/ja/state-of-customer-engagement

10.

11.

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.

15.

16.

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 別の参加者からルームに共有される音声、データ、ビデオストリーム © 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.

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 １参加者あたり 0.004ドル/分 © 2022 TWILIO INC. ALL RIGHTS RESERVED.

https://www.twilio.com/ja/video/pricing

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.

https://jp.twilio.com/docs/video/tutorials/basic-concepts

21.

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

https://www.twilio.com/go/customer-japan-1

22.

23.

24.

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.

28.

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.

31.

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.

34.

35.

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.

https://neri78.github.io/Twilio-HandsOn-Video-JP/

39.

WebRTCのAPIでビデオアプリケーションをつくってみるレクチャー＆ハンズオン

Daizen Ikehara

関連スライド

Phaserで始めるゲーム開発入門

ReBAC入門 「関係性」によるアクセス制御とは？

Twilio Programmable Messagingを用いたSMS送信入門

ASP.NET Core に追加された Minimal API を使って webhook エンドポイントを構築

9-B-7 結局どれが一番なの？ あなたのユーザーに最適な二要素認証の方法を考える

OpenAPI Specificationを使ったTwilio APIテスト用モッキングサーバーの構築

各ページのテキスト

ReBAC入門「関係性」によるアクセス制御とは？

9-B-7 結局どれが一番なの？あなたのユーザーに最適な二要素認証の方法を考える