SlideShare uma empresa Scribd logo
1 de 36
TwilioとWebRTC
2019/05/29
レバレジーズ株式会社 西口瑛一
目次
● 自己紹介
● TwilioとWebRTCの関係
● Unified Plan対応
● まとめ
目次
● 自己紹介
● TwilioとWebRTCの関係
● Unified Plan対応
● まとめ
西口瑛一(にしぐちえいいち)
: @24guchia
レバレジーズ株式会社
メディアシステム部所属
最近:Twilioの技術コンサルタント業初めました
ブログ: 針は飲まれぬ http://harinoma.info/
WhoAmI
WhoAmI
Twilioの実績
● 社内向けコンタクトセンター開発
○ 利用者数:500名を超える
○ 通話時間:5万時間を超える(4月度実績)
● Twilioコミュニティ活動
○ ビジネスセミナー登壇
○ ユーザミートアップ開催サポート
○ Twilioユーザ向け拡張機能開発
http://harinoma.info/?p=340
ぎっくり腰のため、LTに出れず
http://harinoma.info/?p=224
● 自己紹介
● TwilioとWebRTCの関係
● Unified Plan対応
● まとめ
目次
そもそもTwilioってなんですか?
Twilioとは
電話やSMS、ビデオ通話などをAPIで提供しているサービス
● 電話かけたり受けたりをAPIでできるようになります
● SMSやLINE通話、ビデオ通話などもAPIで呼び出せます
● アメリカ発のユニコーン企業
Twilioの使いみち
コンタクトセンターからアラート通知など多様に渡る
● コンタクトセンター
● アプリ間通話
● 自動通知
Twilio企業事例
TwilioとWebRTCの関係
音声通話、ビデオ通話で使われている
● Voice(音声通話)、Video(動画通話)
○ STUNサーバが使える(TURNも別料金だけど使える)
○ NAT越えはICE
○ 公衆交換電話網(PSTN)の普通の電話と繋がる
● Voice(音声通話)、Video(動画通話)
○ STUNサーバが使える(TURNも別料金だけど使える)
○ NAT越えはICE
○ 公衆交換電話網(PSTN)の普通の電話と繋がる
Twilioを使うメリット
Twilio ClientというPCで通話が出来るライブラリが提供されている
● Webサイトでライブラリを読み込むだけ
● 普通のWebエンジニアがとりあえずすぐに使える
● WebRTCの難しい部分をすっ飛ばして始められる
DEMOのシナリオ
内製CRM
DEMOのシナリオ
内製CRM顧客情報
DEMOのシナリオ
内製CRM顧客情報
DEMOのシナリオ
内製CRM顧客情報
DEMOのシナリオ
通話が始まる
内製CRM顧客情報
DEMO
とはいえ、WebRTCの知識が必要
WebRTCの知識が問われるとき
調査が必要なとき
● ネットワークの調査で必要になる
● 音声品質の問題解決で調査が必要になる
● WebRTC界隈の流れに合わせてTwilio Clientが改修される
● ネットワークの調査で必要になる
● 音声品質の問題解決で調査が必要になる
● WebRTC界隈の流れに合わせてTwilio Clientが改修される
● 自己紹介
● TwilioとWebRTCの関係
● Unified Plan対応
● まとめ
目次
Intent to Implement:WebRTC Unified Plan SDP
Plan A,Plan Bに関する標準化の流れ
● 先述のTwilio ClientはPlan Bに依存した実装になっていた
● Chrome M72でPlan A(Unified Plan)が標準になった
● 旧バージョンのTwilio Clientが利用できなくなった
● 先述のTwilio ClientはPlan Bに依存した実装になっていた
● Chrome M72でPlan A(Unified Plan)が標準になった
● 旧バージョンのTwilio Clientが利用できなくなった
Twilio Clientの対応
Unified Plan対応バージョンが出た
● デフォルトがUnified Plan、Plan Bも使える
● 弊社は内製したChrome拡張機能でTwilioを利用している
● プロダクトに取り込み済み、問題なくUnified Planで動作している
Twilio Clientの現状
WebRTCのデファクトスタンダード全部盛り
● Unified Plan、Plan Bサポート
● OPUS、PCMUサポート
● Chrome、Firefox、Edge、Safariサポート
○ FF、Edge、Safariは一部使えない機能がある
● iOS、Androidサポート
● 自己紹介
● TwilioとWebRTCの関係
● Unified Plan対応
● まとめ
目次
電話回線やLINEともつながる
※ 引用1
※ 引用2
日本中の端末とつながる
ご清聴ありがとうございました
Twilio × WebRTC
● We can’t wait to see what you build.
● 皆さまが何を開発されるのか、目にするのが待ちきれません!
出典
● 引用1
○ 第2部 基本データと政策動向 . 総務省 .
http://www.soumu.go.jp/johotsusintokei/whitepaper/ja/
h30/html/nd252110.html, (参照 2019-05-19)
● 引用2
○ LINE社 . LINE公式アカウント2019年4月-2019年6月媒体資
料_ver1.2 .
https://adcenter.linebiz.com/mediaguide/?contents_typ
e=117&pageID=3, (参照 2019-05-19)

Mais conteúdo relacionado

Mais procurados

CyberAgentのプライベートクラウド Cycloudの運用及びモニタリングについて #CODT2020 / Administration and M...
CyberAgentのプライベートクラウド Cycloudの運用及びモニタリングについて #CODT2020 / Administration and M...CyberAgentのプライベートクラウド Cycloudの運用及びモニタリングについて #CODT2020 / Administration and M...
CyberAgentのプライベートクラウド Cycloudの運用及びモニタリングについて #CODT2020 / Administration and M...
whywaita
 
WebSocketのキホン
WebSocketのキホンWebSocketのキホン
WebSocketのキホン
You_Kinjoh
 

Mais procurados (20)

オープンソースBotフレームワークではじめるChatOps
オープンソースBotフレームワークではじめるChatOpsオープンソースBotフレームワークではじめるChatOps
オープンソースBotフレームワークではじめるChatOps
 
CyberAgentのプライベートクラウド Cycloudの運用及びモニタリングについて #CODT2020 / Administration and M...
CyberAgentのプライベートクラウド Cycloudの運用及びモニタリングについて #CODT2020 / Administration and M...CyberAgentのプライベートクラウド Cycloudの運用及びモニタリングについて #CODT2020 / Administration and M...
CyberAgentのプライベートクラウド Cycloudの運用及びモニタリングについて #CODT2020 / Administration and M...
 
TDD のこころ
TDD のこころTDD のこころ
TDD のこころ
 
それはYAGNIか? それとも思考停止か?
それはYAGNIか? それとも思考停止か?それはYAGNIか? それとも思考停止か?
それはYAGNIか? それとも思考停止か?
 
トップエンジニアが実践する思考整理法~テクニカルライティングを用いた課題解決の基本
トップエンジニアが実践する思考整理法~テクニカルライティングを用いた課題解決の基本トップエンジニアが実践する思考整理法~テクニカルライティングを用いた課題解決の基本
トップエンジニアが実践する思考整理法~テクニカルライティングを用いた課題解決の基本
 
WebRTCで動かす“テレイグジスタンス”ロボット
WebRTCで動かす“テレイグジスタンス”ロボットWebRTCで動かす“テレイグジスタンス”ロボット
WebRTCで動かす“テレイグジスタンス”ロボット
 
cloudpack負荷職人結果レポート(サンプル)
cloudpack負荷職人結果レポート(サンプル)cloudpack負荷職人結果レポート(サンプル)
cloudpack負荷職人結果レポート(サンプル)
 
マーブル図で怖くないRxJS
マーブル図で怖くないRxJSマーブル図で怖くないRxJS
マーブル図で怖くないRxJS
 
HTTP/2 入門
HTTP/2 入門HTTP/2 入門
HTTP/2 入門
 
cluster-monitoringで困ったこと学んだこと
cluster-monitoringで困ったこと学んだことcluster-monitoringで困ったこと学んだこと
cluster-monitoringで困ったこと学んだこと
 
ネットワーク ゲームにおけるTCPとUDPの使い分け
ネットワーク ゲームにおけるTCPとUDPの使い分けネットワーク ゲームにおけるTCPとUDPの使い分け
ネットワーク ゲームにおけるTCPとUDPの使い分け
 
WebSocketのキホン
WebSocketのキホンWebSocketのキホン
WebSocketのキホン
 
リーン開発の本質 公開用
リーン開発の本質 公開用リーン開発の本質 公開用
リーン開発の本質 公開用
 
分散トレーシング技術について(Open tracingやjaeger)
分散トレーシング技術について(Open tracingやjaeger)分散トレーシング技術について(Open tracingやjaeger)
分散トレーシング技術について(Open tracingやjaeger)
 
DXとかDevOpsとかのなんかいい感じのやつ 富士通TechLive
DXとかDevOpsとかのなんかいい感じのやつ 富士通TechLiveDXとかDevOpsとかのなんかいい感じのやつ 富士通TechLive
DXとかDevOpsとかのなんかいい感じのやつ 富士通TechLive
 
ビジネスパーソンのためのDX入門講座エッセンス版
ビジネスパーソンのためのDX入門講座エッセンス版ビジネスパーソンのためのDX入門講座エッセンス版
ビジネスパーソンのためのDX入門講座エッセンス版
 
Hubsを何度も破壊して得た知見、話します
Hubsを何度も破壊して得た知見、話しますHubsを何度も破壊して得た知見、話します
Hubsを何度も破壊して得た知見、話します
 
SFUの話
SFUの話SFUの話
SFUの話
 
オレオレ言語実装に役立つプル型ASTウォーカーAPI
オレオレ言語実装に役立つプル型ASTウォーカーAPIオレオレ言語実装に役立つプル型ASTウォーカーAPI
オレオレ言語実装に役立つプル型ASTウォーカーAPI
 
私とOSSの25年
私とOSSの25年私とOSSの25年
私とOSSの25年
 

Semelhante a TwilioとWebRTC

企業と勉強会 @nifty エンジニアサポート
企業と勉強会 @nifty エンジニアサポート企業と勉強会 @nifty エンジニアサポート
企業と勉強会 @nifty エンジニアサポート
Daichi Morifuji
 
日本の中小企業のIT導入10年の振り返り
日本の中小企業のIT導入10年の振り返り日本の中小企業のIT導入10年の振り返り
日本の中小企業のIT導入10年の振り返り
Yuichi Morito
 
0112特別canpass ver6
0112特別canpass ver60112特別canpass ver6
0112特別canpass ver6
Yuichi Morito
 
Webst3 ashisto
Webst3 ashistoWebst3 ashisto
Webst3 ashisto
loftwork
 

Semelhante a TwilioとWebRTC (20)

Twilio signal2019 report
Twilio signal2019 reportTwilio signal2019 report
Twilio signal2019 report
 
Twilioで作る、電話レスコールセンター
Twilioで作る、電話レスコールセンターTwilioで作る、電話レスコールセンター
Twilioで作る、電話レスコールセンター
 
Twilio Meetup 2014/11/27
Twilio Meetup 2014/11/27Twilio Meetup 2014/11/27
Twilio Meetup 2014/11/27
 
20190517 twilio business seminar in osaka #3
20190517 twilio business seminar in osaka #320190517 twilio business seminar in osaka #3
20190517 twilio business seminar in osaka #3
 
Twilioハンズオン資料 鹿児島
Twilioハンズオン資料 鹿児島Twilioハンズオン資料 鹿児島
Twilioハンズオン資料 鹿児島
 
IoT_Parnter_Community_201803
IoT_Parnter_Community_201803IoT_Parnter_Community_201803
IoT_Parnter_Community_201803
 
サービスをつくりなおす決断をするとき
サービスをつくりなおす決断をするときサービスをつくりなおす決断をするとき
サービスをつくりなおす決断をするとき
 
【 ITベンチャーを支えるテクノロジー 】チャットワークを支える技術|Chatwork株式会社
【 ITベンチャーを支えるテクノロジー 】チャットワークを支える技術|Chatwork株式会社【 ITベンチャーを支えるテクノロジー 】チャットワークを支える技術|Chatwork株式会社
【 ITベンチャーを支えるテクノロジー 】チャットワークを支える技術|Chatwork株式会社
 
企業と勉強会 @nifty エンジニアサポート
企業と勉強会 @nifty エンジニアサポート企業と勉強会 @nifty エンジニアサポート
企業と勉強会 @nifty エンジニアサポート
 
IAチャンネル:nissenのIA最適化事例その1
IAチャンネル:nissenのIA最適化事例その1IAチャンネル:nissenのIA最適化事例その1
IAチャンネル:nissenのIA最適化事例その1
 
Tech Valley #5
Tech Valley #5Tech Valley #5
Tech Valley #5
 
Twilioビジネスセミナー資料
Twilioビジネスセミナー資料Twilioビジネスセミナー資料
Twilioビジネスセミナー資料
 
日本の中小企業のIT導入10年の振り返り
日本の中小企業のIT導入10年の振り返り日本の中小企業のIT導入10年の振り返り
日本の中小企業のIT導入10年の振り返り
 
セミナー「パルス型消費」について
セミナー「パルス型消費」についてセミナー「パルス型消費」について
セミナー「パルス型消費」について
 
0112特別canpass ver6
0112特別canpass ver60112特別canpass ver6
0112特別canpass ver6
 
LIFULLマーケター総会スライド(2017/07)
LIFULLマーケター総会スライド(2017/07)LIFULLマーケター総会スライド(2017/07)
LIFULLマーケター総会スライド(2017/07)
 
WebRTCがビデオ会議市場に与えるインパクトを探る
WebRTCがビデオ会議市場に与えるインパクトを探るWebRTCがビデオ会議市場に与えるインパクトを探る
WebRTCがビデオ会議市場に与えるインパクトを探る
 
モデリングの彼方に未来を見た
モデリングの彼方に未来を見たモデリングの彼方に未来を見た
モデリングの彼方に未来を見た
 
Webst3 ashisto
Webst3 ashistoWebst3 ashisto
Webst3 ashisto
 
Twilio flex導入までの背景と苦労した話
Twilio flex導入までの背景と苦労した話Twilio flex導入までの背景と苦労した話
Twilio flex導入までの背景と苦労した話
 

Mais de 瑛一 西口

Mais de 瑛一 西口 (10)

omotesando.rb_20231005.pdf
omotesando.rb_20231005.pdfomotesando.rb_20231005.pdf
omotesando.rb_20231005.pdf
 
問いかけの作法輪読会#2(ファクトリー型/ワークショップ型)
問いかけの作法輪読会#2(ファクトリー型/ワークショップ型)問いかけの作法輪読会#2(ファクトリー型/ワークショップ型)
問いかけの作法輪読会#2(ファクトリー型/ワークショップ型)
 
Tech Midnight PdM Runners の紹介
Tech Midnight PdM Runners の紹介Tech Midnight PdM Runners の紹介
Tech Midnight PdM Runners の紹介
 
社内勉強会からはじめる越境
社内勉強会からはじめる越境社内勉強会からはじめる越境
社内勉強会からはじめる越境
 
WebRTC Meetup Online #1
WebRTC Meetup Online #1WebRTC Meetup Online #1
WebRTC Meetup Online #1
 
Video SaaS engineering #1
Video SaaS engineering #1Video SaaS engineering #1
Video SaaS engineering #1
 
社内勉強会をはじめるにあたって
社内勉強会をはじめるにあたって社内勉強会をはじめるにあたって
社内勉強会をはじめるにあたって
 
Twilio Developer Meetup 2018 Summer 登壇資料
Twilio Developer Meetup 2018 Summer 登壇資料Twilio Developer Meetup 2018 Summer 登壇資料
Twilio Developer Meetup 2018 Summer 登壇資料
 
Twilioが使えるChromeエクステンションを作った
Twilioが使えるChromeエクステンションを作ったTwilioが使えるChromeエクステンションを作った
Twilioが使えるChromeエクステンションを作った
 
Twilio meetup2017 LT
Twilio meetup2017 LTTwilio meetup2017 LT
Twilio meetup2017 LT
 

TwilioとWebRTC

Notas do Editor

  1. 今日はこのような目次進めます。 また、本日のスライドは後ほどWebにアップしますので、 話に集中してもらえるとありがたいです。よろしくおねがいします。
  2. 西口 瑛一です。 Leverages株式会社のメディアシステム部に所属しています。 Twilioの技術コンサルタント業務を始めています。興味ある人いたら、連絡ください。 あと、ブログやってます。針は飲まれぬっていう名前です。 twilioに関する濃い記事を月1〜2回くらい上げてます。
  3. Twilioの実績です。社内向けコンタクトセンターの開発をしました。 利用者数が500人、通話時間は4月実績で5万時間を超えてました。 それ以外にコミュニティ活動をいろいろやってまして、一番最近はTwilioユーザ向け拡張機能開発しました。
  4. めちゃくちゃニッチですが、ごく一部から感謝されたので、作ってみてよかったかなと思ってます。 実はこのWebRTCミートアップは前回LTしようとしてたのですが、
  5. はい、ぎっくり腰ですね。それでLTできず、前回は直前キャンセルでご迷惑おかけしました。 ちなみに、ぎっくり腰の経過は僕のブログにまとめたんですが、
  6. 他のTwilioの濃い記事よりPV数が多くてちょっと悩んでます。
  7. 今回LT主題、TwilioとWebRTCの関係です。
  8. Twilioとはこのような特徴を持ったサービス、及び開発している会社の名前です。 電話をかけたり受けたり、SMSやLINE通話、ビデオ通話などがAPIで呼び出せるようになります。 会社としてはアメリカ発のユニコーン企業で、かなりの規模の会社になっています。
  9. 最近だと、SendGridの買収などを行ったり、
  10. Twilio Flexというコンタクトセンター特化のサービスを打ち出しています。 この記事はFlexがSalesforceとの連携が正式版として使えるようになったというアナウンスの記事です。 このようにWebを経由するコミュニケーション全般のプラットフォーム目指している企業です。
  11. Twilioの主な用途ですが、こんな感じです。 基本的にはコンタクトセンターが大きな用途です。 それ以外にもネイティブアプリに埋め込んで、アプリ同士で通話したり、 障害が発生したときに電話で通知する機能だったりなどがあります。
  12. 詳しく知りたい人はTwilioの国内販売元であるKDDIウェブコミュニケーションズの 企業事例紹介ページを見てもらうとわかりやすいと思います。 手前味噌ですが、紹介されています。 この画像はまだ大きく取り上げられてたときの画像で、現在とは異なります。
  13. WebRTCはTwilioのどこで使われるかというと、一般的な用途で音声通話、ビデオ通話で使われています。 Voiceと呼ばれるTwilioのプロダクトがあるのですが、これは一般的な音声通話の機能です。 Voiceの特徴はSTUNサーバが使える、NAT越えはICEを使います。 一番の特徴は公衆交換電話網と呼ばれる、 一般的な電話機全般がいるネットワークとゲートウェイを介して、Twilioで通話ができるところにあると考えています。
  14. TwilioでWebRTCを使うメリットですが、ClientというPCでの通話をサポートするJSライブラリが提供されている点です。 ライブラリが提供されているメリットとして、読み込むだけですぐ使えて、 JavaScriptなので普通のWebエンジニアでもとりあえず始められます。 実際僕もTwilioを使う前まで、WebRTCのことは知らないWebエンジニアだったのですが、すぐにTwilio通話できるようなりました。 あと、Twilioに関していろいろと覚えることが多い中、一旦WebRTCの難しい部分をすっ飛ばして開発が進められるのは良い点です。
  15. これからデモをやります。 デモのシナリオですがこの通りで、まずこのPCにインストールしてある内製した拡張機能で電話をかけます。 かけるとTwilioに命令が飛んでいき、この番号で架電したときはこれまた内製したCRMから 電話番号に関する顧客情報を取得し、それを顧客情報はPCに渡されます。 その後、Twilioがこっちのガラケーに電話がかかるようになってます。 で、ガラケーで通話ボタンを押すと、通話ができます。
  16. これからデモをやります。 デモのシナリオですがこの通りで、まずこのPCにインストールしてある内製した拡張機能で電話をかけます。 かけるとTwilioに命令が飛んでいき、この番号で架電したときはこれまた内製したCRMから 電話番号に関する顧客情報を取得し、それを顧客情報はPCに渡されます。 その後、Twilioがこっちのガラケーに電話がかかるようになってます。 で、ガラケーで通話ボタンを押すと、通話ができます。
  17. これからデモをやります。 デモのシナリオですがこの通りで、まずこのPCにインストールしてある内製した拡張機能で電話をかけます。 かけるとTwilioに命令が飛んでいき、この番号で架電したときはこれまた内製したCRMから 電話番号に関する顧客情報を取得し、それを顧客情報はPCに渡されます。 その後、Twilioがこっちのガラケーに電話がかかるようになってます。 で、ガラケーで通話ボタンを押すと、通話ができます。
  18. これからデモをやります。 デモのシナリオですがこの通りで、まずこのPCにインストールしてある内製した拡張機能で電話をかけます。 かけるとTwilioに命令が飛んでいき、この番号で架電したときはこれまた内製したCRMから 電話番号に関する顧客情報を取得し、それを顧客情報はPCに渡されます。 その後、Twilioがこっちのガラケーに電話がかかるようになってます。 で、ガラケーで通話ボタンを押すと、通話ができます。
  19. これからデモをやります。 デモのシナリオですがこの通りで、まずこのPCにインストールしてある内製した拡張機能で電話をかけます。 かけるとTwilioに命令が飛んでいき、この番号で架電したときはこれまた内製したCRMから 電話番号に関する顧客情報を取得し、それを顧客情報はPCに渡されます。 その後、Twilioがこっちのガラケーに電話がかかるようになってます。 で、ガラケーで通話ボタンを押すと、通話ができます。
  20. ここで今日のLT用に作成したデモ用Webサイトとこのスマホで通話してみようと思います
  21. と今まで、TwilioだとWebRTCの知識がなくても始められる点がいいと話してましたが、やはり必要になるときはあります。
  22. 実際にTwilioの開発や運用をしていて、WebRTCの知識が必要になったときは調査するときに必要になります。 ネットワークの問題や音声品質に関しては特に多いです。 今回はこの部分にフォーカス当てようと思います。 WebRTC界隈の流れに合わせて、先述のClient改修が行われることがあります。
  23. GoogleがUnified Planの実装する意向を出し、 年始にリリースされたChrome72では、ついにUnified Planが標準になりました。 この流れに合わせて、Plan Bに依存した実装していた古いバージョンのTwilio Clientが利用できなくなりました。
  24. Twilio の対応として、Client 1.7系が出ました。 Unified Planに対応、さらにPlan Bもまだ使える作りになってます。 弊社で利用しているソフトフォンにすでに取り込み済みで、問題なく動作しています。
  25. 現状としては、このような状態でTwilio ClientはWebRTCのデファクトスタンダード全部盛り状態になっています。 SDPフォーマットとしては、Unified Plan,Plan Bも使えますし、 音声コーデックは最近、OPUSも使えるようになり、IP電話デファクトスタンダードのPCMUが使えます。 ブラウザは主要ブラウザのChrome,FF,Edge,Safariが使え、 iOS,Androidでも使えるライブラリが提供されています。
  26. 最後まとめです
  27. さきほどのスライドでクライアント側のいいところを話しましたが、 Twilio Clientの一番いいところは、つなぎ先が豊富なところです。 PCやスマホはもちろん、電話回線やLINEともつなぐことができます。
  28. 総務省から引用したグラフです。 国民の通信端末の保有率に関する資料で、固定電話は70%、スマートフォンは75%と 日本ほとんどのひととつながることができます。
  29. これはLINE社の資料から引用しています。 LINE利用者数は日本人口の62%をカバーしています。
  30. 各種ブラウザで使え、つなぎ先も電話やスマホ、LINEなどにつなげることができます。 ということで、Twilioを使うと日本中の端末とつながることができるということです。 WebRTCでなにか作ってみたい人や、 WebRTCのプロダクトを電話ともつないでみたい人はぜひ試してみてはいかがでしょうか?
  31. こちらで最後です。 Twilioのドキュメントや管理画面でよく目にするフレーズです。 We can’t wait to see what you build.、皆さまが何を開発されるのか、目にするのが待ちきれません! というメッセージで本日のLTを終了させてもらいます。 わからなかったことや質問などありましたら、質問してください。 以上、ご清聴ありがとうございました。