SlideShare a Scribd company logo
ここがつらいよWebRTC
- WebRTC開発の落とし穴
WebRTC Conference Japan 2016
2016.02.17 Track A
13:00-13:45
パネラー紹介:源 拓洋
(敬称略)
• 所属
– ソフトバンク株式会社
– 情報システム本部
– システムサービス事業統括部
– コミュニケーションサービス部
• 略歴
– 2014年4月ソフトバンクモバイルに入社
– 同年6月からWebRTC関連の開発を担当
– WebRTCはネイティブアプリやSFU/MCUの検証が主
• WebRTC 利用状況
– 社内、関連会社間でのビデオ会議システムに利用
• 担当範囲
– Androidのネイティブアプリを担当
– MCU/SFUについても詳しい
パネラー紹介: kyo_ago
(敬称略)
• 所属
– ChatWork株式会社
• 略歴
– フロントエンドエンジニア
– 主にJavaScriptとかTypeScriptとかを書く人
• WebRTC 利用状況
– クラウド型ビジネスコミュニケーションツールを提供
– サービスの一環として、ビデオ会議/音声通話を実現
• 担当範囲
– PCブラウザが中心
パネラー紹介: 飯田 アレン 真人
(敬称略)
• 所属
– NTTコミュニケーションズ株式会社
– 技術開発部
– Webコアテクニカルユニット エンジニア
• 略歴
– 何年もCやJavaを使ってきて初めてJavaScriptを触った時の印象はキモい!
– 今はJSなしで生きていけない身になってしまい、バックエンドも JSで書くように
なりました
– NTTコミュニケーションズではSkyWayプラットフォームの開発を担当しつつ、
SkyWayを利用したWebRTCアプ リケーションの開発も行っています
• WebRTC 利用状況
– 開発者向けにWebRTCを使うためのPaaSであるSkyWayを提供
– 定番ライブラリのカスタマイズ版や、iOS/Android SDK、TURNサーバーも提供
• 担当範囲
– PCブラウザが中心に、サーバー側も担当
モデレーター紹介: 我如古正志
(敬称略)
• 所属
– インフォコム株式会社
– 技術企画室 室長
• 略歴
– 企業向けのシステム開発と、コンシューマー向けの携帯Web
サービスの運営の両方に従事する
– 2013年度よりWebRTCに注目し、技術調査と社内での利用を推
進中
– 内容はHTML5Experts.jpの記事などを通して発信中
• WebRTC 利用状況
– 社内ビデオチャット、社内イベント配信に利用
– 自社サービス向けライブラリを開発、一部サービスで利用
• 担当範囲
– PCブラウザやサーバー側など、広く浅く
利用状況
内部利用 一般公開
アプリケーション、サービス
プラットフォーム
同時接続 400
メディアサーバー(MCU)5台
導入社数 9万社
Skyway 登録者数 2000人、登録アプリ数 4000
シグナリングサーバー … 同時接続上限 10万以上
平均アクセス数:1万セッション/日(1月末~2月初)
同時配信 30人
双方向通話 2~5人×数組
海外とも(米国、南アフリカ、
アイスランド…)
今日のテーマ
• 自分で映像/音声/データ通信を扱えるのは
– とても楽しい
– 利用者にもより良い体験を提供できる
• 大変なところもあるけど、ブラウザもSDKも
サーバー環境も整いつつある
• 知識と知恵を共有して、もっといろんなプロダ
クトを生み出そう
アジェンダ
• クライアントサイドの話
• 通信が「つながらない」時の話
• サーバーサイドの話
• 期待する未来像
Part 1
クライアントサイドの話
クライアントサイドの落とし穴
• 仕様がどんどん変わっていく、決まらない
– とは言え、WebRTC 1.0 がそろそろ決まりそう
• 仕様と実装が違う
– ブラウザごとに違う
– バージョンごとに変わる
– ブラウザ以外もある
→ まずは、この辺りから聞いていきます
質問1: サポート対象は?
• PCブラウザ
– Chrome, Firefox
– IE, Safari
– Edge
– 他
• モバイルブラウザ
• PCアプリ
• モバイルアプリ
• 他
質問2: ブラウザ、アプリの差異の吸収は?
• 捨てる
• 自分で頑張る
• 便利ライブラリを使う
– adapter.jsとか
• 他
質問3:ブラウザ/ライブラリのバージョンの差異は?
• 常に最新バージョンのみ
• 固定させる
• 自分で頑張って複数サポート
• こんな便利なものがあるよ
• 他
• 関連して
– 次バージョンの情報収集の方法は?
– 次バージョン、次々バージョンの確認は?
自分で作るか、他社のを使うか?
• これ、といった判断基準はありますか?
• この場合はこれ、というベストプラクティス例
はありますか?
質問4:サポートするデバイス/マシンの制限
• 幅広い機種やスペックを許容していますか?
– それで困ることはありますか?
– その場合、どう対処していますか?
• それとも特定の機種に限定していますか?
質問5:通信する内容は?
• 音声
• カメラ映像
• スクリーンシェア
• データ通信
• 双方向か、片方向(配信)か?
当日は時間の都合でスキップ
質問6:テストってどうしていますか?
• 自分で頑張る
• 金で解決(外部に頼む)
• 自動テストの手段を持っている
当日は時間の都合でスキップ
質問7: その他
• 音響機器、映像機器について、工夫やノウハ
ウありますか?
• 色々あるけど、最近良くなってきていると感じ
るところはどこですか?
当日は時間の都合でスキップ
質問8: お互いに質問
• お互いに質問はありますか?
当日は時間の都合でスキップ
Part 2
通信が「繋がらない」時の話
通信環境の落とし穴
• なぜか「つながらない」と言われる
• 「つがならない」と言っても、現象/原因は様々
→ 次は、この辺りを聞いてみます
質問1: 「繋がらない」と言われることは
• しょっちゅうある
• 時々ある
• ほとんど無い
• 一度も無い
質問2: 「繋がらない」で良くある原因は?
• カメラやマイクの問題
• デバイス/PCの問題
• ブラウザの種類の問題
• 通信環境の問題
– 間のネットワーク機器、通信制限も含む
• 回線品質の問題
• 操作の問題
• 利用規模の問題
• 他
質問3: 通信環境で「繋がらない」のはどの部分?
• シグナリングのレベルで
• NAT/Firewall/Proxy
– UDP不可
• MITM
質問4: 今までの「繋がらない」ケースで
レアな要因、最も変わった原因は?
質問5: 原因切り分けのための手段は?
• 情報収集の仕組みを用意していますか?
– (シグナリング)サーバー側で、クライアント側で
– 自分で、他社の仕組みを利用
• 利用者が自分で原因調査できる仕組みを用
意していますか?
• 他の手段は?
– 現地に見に行く
– 超能力で透視する
質問6: なるべく繋がるための対策
• 何か対策をとっていますか?
• サポート体制はどうしてますか?
– 問い合わせ窓口
– 環境調査の担当者
– 他の役割の人
当日は時間の都合でスキップ
質問7: お互いに質問
• お互いに質問はありますか?
当日は時間の都合でスキップ
Part 3
サーバーサイドの話
サーバーサイドの落とし穴
• Peer-to-Peerなのに、やっぱりサーバーが必要
• しかも、さまざまな役割のサーバーが必要
• 大規模に使おうとすると、サーバーの方が重要で
は??
→ 次は、この辺りを聞いてみます
質問1: シグナリングサーバーどうしてますか?
• 自分で用意する? 他社のを使う?
– 他社なら、例えばどこがお勧め?
• シグナリングの方式は?
– SIP、XMPP等既存と互換性のある方法?
– 独自の実装
• WebSocket
• HTTP(S) POST
• メッセージングプラットフォーム
質問2: NAT/Firewall越えのための
STUN/TURNサーバー
• TURNサーバー、提供してますか?
– 自分で運用
– 他社サービスを利用
• 地理的に、どこに置いてますか?
質問3: スケーリング
• シグナリングサーバーをスケールさせるため
に、何か対策していますか?
• TURNサーバーをスケールさせるために、何
か対策していますか?
• お金かかりませんか?
質問4: メディアサーバー使っていますか?
• 他人数が参加する会議や、大人数への配
信で、何かメディア用サーバーを使ってい
ますか?
• Peer-to-Peer
– 上りN本、下りN本
• Selective Forwarding Unit
– 上り1本、下りN本
• Media Control Unit
– サーバーで合成
– 上り1本、下り1本
• 商用ですか、オープンソースですか、自作
ですか?
– どうして、それを選んだのですか?
www.slideshare.net/minamotot/webrtc-44772839 より
当日は時間の
都合でスキップ
質問5: おすすめプラットフォームは?
質問6: お互いに質問
• お互いに質問はありますか?
当日は時間の
都合でスキップ
Part 4
未来の話
当日は時間の
都合でスキップ
質問1: WebRTCの今後に期待していることは?
• 今年(2016年)について
• 近未来(2~3年先)について
• 関係ありそうなもの
• ORTC
• WebRTC NV
• Simulcast
• SVC
• VP9
当日は時間の
都合でスキップ
質問2: WebRTCを使ったサービスに期待は?
– こんなサービスが登場したら嬉しい
– (チャンスがあれば)こんな使い方をしてみたい
当日は時間の
都合でスキップ
Part 5
その他の話
当日は時間の
都合でスキップ
質問1: ぶっちゃけ、使ってますか?
• 画面共有
• DataChannel
• 録画
当日は時間の
都合でスキップ
質問2:WebRTC以外で頑張っているところ
• ユーザー体験の向上
– 見せ方で印象が変わる?
• 既存の仕組みとの互換性、接続性
– どこまで求められていますか?
• 政治的な苦労
– WebRTCを使うための、根回し?とか…
当日は時間の
都合でスキップ
会場から
• ご質問はありますか?
最後に
• 言い残したこと、言いたいことはありますか?
ありがとうございました

More Related Content

What's hot (20)

PDF
計算機アーキテクチャを考慮した高能率画像処理プログラミング
Norishige Fukushima
 
PDF
【Unite Tokyo 2019】Understanding C# Struct All Things
UnityTechnologiesJapan002
 
PDF
ネットワークOS野郎 ~ インフラ野郎Night 20160414
Kentaro Ebisawa
 
PDF
tf,tf2完全理解
Koji Terada
 
PPTX
ネットワーク機器のAPIあれこれ入門 (NetOpsCoding#2)
Kentaro Ebisawa
 
PPTX
分散システムについて語らせてくれ
Kumazaki Hiroki
 
PDF
MagicOnion入門
torisoup
 
PPTX
WebRTC multitrack / multistream
mganeko
 
PDF
WebブラウザでP2Pを実現する、WebRTCのAPIと周辺技術
Yoshiaki Sugimoto
 
PDF
WebRTC と Native とそれから、それから。
tnoho
 
PDF
初心者向けCTFのWeb分野の強化法
kazkiti
 
PDF
SFUの話
tnoho
 
PDF
ネットワーク ゲームにおけるTCPとUDPの使い分け
モノビット エンジン
 
PDF
なぜOpenID Connectが必要となったのか、その歴史的背景
Tatsuo Kudo
 
PDF
IL2CPPに関する軽い話
Wooram Yang
 
PDF
Python 3.9からの新定番zoneinfoを使いこなそう
Ryuji Tsutsui
 
PDF
Twitterのsnowflakeについて
moai kids
 
PDF
多機能ボイチャを簡単に導入する方法
Unity Technologies Japan K.K.
 
PDF
新入社員のための大規模ゲーム開発入門 サーバサイド編
infinite_loop
 
PDF
NumPyが物足りない人へのCython入門
Shiqiao Du
 
計算機アーキテクチャを考慮した高能率画像処理プログラミング
Norishige Fukushima
 
【Unite Tokyo 2019】Understanding C# Struct All Things
UnityTechnologiesJapan002
 
ネットワークOS野郎 ~ インフラ野郎Night 20160414
Kentaro Ebisawa
 
tf,tf2完全理解
Koji Terada
 
ネットワーク機器のAPIあれこれ入門 (NetOpsCoding#2)
Kentaro Ebisawa
 
分散システムについて語らせてくれ
Kumazaki Hiroki
 
MagicOnion入門
torisoup
 
WebRTC multitrack / multistream
mganeko
 
WebブラウザでP2Pを実現する、WebRTCのAPIと周辺技術
Yoshiaki Sugimoto
 
WebRTC と Native とそれから、それから。
tnoho
 
初心者向けCTFのWeb分野の強化法
kazkiti
 
SFUの話
tnoho
 
ネットワーク ゲームにおけるTCPとUDPの使い分け
モノビット エンジン
 
なぜOpenID Connectが必要となったのか、その歴史的背景
Tatsuo Kudo
 
IL2CPPに関する軽い話
Wooram Yang
 
Python 3.9からの新定番zoneinfoを使いこなそう
Ryuji Tsutsui
 
Twitterのsnowflakeについて
moai kids
 
多機能ボイチャを簡単に導入する方法
Unity Technologies Japan K.K.
 
新入社員のための大規模ゲーム開発入門 サーバサイド編
infinite_loop
 
NumPyが物足りない人へのCython入門
Shiqiao Du
 

Similar to ここがつらいよWebRTC - WebRTC開発の落とし穴 (20)

PPTX
Infocom webrtc conference japan
mganeko
 
PDF
Web RTCにより拓かれるコミュニケーションサービスの形 「新たなバリュー創造へ。ntt comのチャレンジ」webアプリケーション エバンジェリスト ...
Mickey Miki
 
PDF
WebRTC入門+最新動向
Ryosuke Otsuya
 
PDF
WebRTC入門 ~沖縄編~
Ryosuke Otsuya
 
PDF
2013 WebRTC 概説 & ワークショップ
mganeko
 
PPTX
Webrtc最新動向
Yusuke Naka
 
PDF
WebRTC Summit 2014 NewYork 参加報告
mganeko
 
PPTX
WebRTC NextVersion時代のJavaScript開発
Yusuke Naka
 
PDF
WebRTCハンズオン
Yusuke Naka
 
PPTX
WebRTCとSFU
Saki Homma
 
PPTX
WebRTCを始めよう! HTML5fun 第一回勉強会
Yusuke Naka
 
PDF
5分でわかるWebRTC
Ryosuke Otsuya
 
PDF
WebRTC/ORTCの最新動向まるわかり!
Yusuke Naka
 
PDF
WebRTCがビデオ会議市場に与えるインパクトを探る
Shumpei Shiraishi
 
PDF
はじめてのWebRTC/ORTC
Yusuke Naka
 
PPTX
WebRTCでアプリやIoT機器にリアルタイム・コミュニケーションを追加しよう
Ryosuke Otsuya
 
PDF
SkyWayとWebRTC開発者コミュニティ4年間の軌跡とCMC_Meetupで学んだこと、実践したこと
Yusuke Naka
 
PDF
吾輩はコンテンツ事業者である 楽天編
Rakuten Group, Inc.
 
PDF
注目の最新技術「WebRTC」とは? -技術概要と事例紹介-
Yusuke Naka
 
PDF
ビデオ通話・P2Pがコモディティ化する世界 WebRTCによるこれからを探る
Kensaku Komatsu
 
Infocom webrtc conference japan
mganeko
 
Web RTCにより拓かれるコミュニケーションサービスの形 「新たなバリュー創造へ。ntt comのチャレンジ」webアプリケーション エバンジェリスト ...
Mickey Miki
 
WebRTC入門+最新動向
Ryosuke Otsuya
 
WebRTC入門 ~沖縄編~
Ryosuke Otsuya
 
2013 WebRTC 概説 & ワークショップ
mganeko
 
Webrtc最新動向
Yusuke Naka
 
WebRTC Summit 2014 NewYork 参加報告
mganeko
 
WebRTC NextVersion時代のJavaScript開発
Yusuke Naka
 
WebRTCハンズオン
Yusuke Naka
 
WebRTCとSFU
Saki Homma
 
WebRTCを始めよう! HTML5fun 第一回勉強会
Yusuke Naka
 
5分でわかるWebRTC
Ryosuke Otsuya
 
WebRTC/ORTCの最新動向まるわかり!
Yusuke Naka
 
WebRTCがビデオ会議市場に与えるインパクトを探る
Shumpei Shiraishi
 
はじめてのWebRTC/ORTC
Yusuke Naka
 
WebRTCでアプリやIoT機器にリアルタイム・コミュニケーションを追加しよう
Ryosuke Otsuya
 
SkyWayとWebRTC開発者コミュニティ4年間の軌跡とCMC_Meetupで学んだこと、実践したこと
Yusuke Naka
 
吾輩はコンテンツ事業者である 楽天編
Rakuten Group, Inc.
 
注目の最新技術「WebRTC」とは? -技術概要と事例紹介-
Yusuke Naka
 
ビデオ通話・P2Pがコモディティ化する世界 WebRTCによるこれからを探る
Kensaku Komatsu
 
Ad

More from mganeko (20)

PDF
Google Meet でもバーチャル背景を使いたい (WebRTC Meetup Online)
mganeko
 
PPTX
Amazon Kinesis Video Streams WebRTC 使ってみた
mganeko
 
PPTX
Build Node.js-WASM/WASI Tiny compiler with Node.js
mganeko
 
PPTX
Node.jsでつくるNode.js ミニインタープリター&コンパイラー
mganeko
 
PPTX
Node.js x Headless Chrome for WeRTC MCU / Node.js x Chrome headless で、お手軽WebR...
mganeko
 
PPTX
Skywayのビデオチャットを録画しよう。そう、ブラウザでね
mganeko
 
PPTX
WebRTC mediasoup on raspberrypi3
mganeko
 
PPTX
WebRTC SFU Mediasoup Sample update
mganeko
 
PPTX
ブラウザでWebRTC - iOSゲートウェイ作ってみた
mganeko
 
PDF
Inside of 聖徳玉子 by O2
mganeko
 
PDF
Node.js with WebRTC DataChannel
mganeko
 
PPTX
PeerConnectionリレーとMediaRecorder
mganeko
 
PPTX
Webrtc bootcamp handson
mganeko
 
PDF
WebRTC UserMedia Catalog: いろんなユーザメディア(MediaStream)を使ってみよう
mganeko
 
PDF
WebRTC multistream
mganeko
 
PPTX
Inside WebM
mganeko
 
PPTX
MediaRecorder と WebM で、オレオレ Live Streaming
mganeko
 
PPTX
Chromebook 「だけ」で WebRTCを動かそう
mganeko
 
PPTX
WebRTC getStats - WebRTC Meetup Tokyo 5 LT
mganeko
 
PPTX
Nodeで操るKurentoメディアサーバー ( Kurento + WebRTC + Node.js )
mganeko
 
Google Meet でもバーチャル背景を使いたい (WebRTC Meetup Online)
mganeko
 
Amazon Kinesis Video Streams WebRTC 使ってみた
mganeko
 
Build Node.js-WASM/WASI Tiny compiler with Node.js
mganeko
 
Node.jsでつくるNode.js ミニインタープリター&コンパイラー
mganeko
 
Node.js x Headless Chrome for WeRTC MCU / Node.js x Chrome headless で、お手軽WebR...
mganeko
 
Skywayのビデオチャットを録画しよう。そう、ブラウザでね
mganeko
 
WebRTC mediasoup on raspberrypi3
mganeko
 
WebRTC SFU Mediasoup Sample update
mganeko
 
ブラウザでWebRTC - iOSゲートウェイ作ってみた
mganeko
 
Inside of 聖徳玉子 by O2
mganeko
 
Node.js with WebRTC DataChannel
mganeko
 
PeerConnectionリレーとMediaRecorder
mganeko
 
Webrtc bootcamp handson
mganeko
 
WebRTC UserMedia Catalog: いろんなユーザメディア(MediaStream)を使ってみよう
mganeko
 
WebRTC multistream
mganeko
 
Inside WebM
mganeko
 
MediaRecorder と WebM で、オレオレ Live Streaming
mganeko
 
Chromebook 「だけ」で WebRTCを動かそう
mganeko
 
WebRTC getStats - WebRTC Meetup Tokyo 5 LT
mganeko
 
Nodeで操るKurentoメディアサーバー ( Kurento + WebRTC + Node.js )
mganeko
 
Ad

Recently uploaded (6)

PDF
20250711JIMUC総会IBM Automation_Platform最新情報_Connpass公開版.pdf
ChikakoInami1
 
PDF
20250717_Devin×GitHubCopilotで10人分の仕事は出来るのか?.pdf
Masaki Yamakawa
 
PPTX
Devcontainerのススメ(1)-Devcontainerとはどういう技術?-
iPride Co., Ltd.
 
PDF
20250711JIMUC総会_先進IT運用管理分科会Connpass公開資料.pdf
ChikakoInami1
 
PDF
20250711_日本IBM ミドルウエア・ユーザー研究会(JIMUC)総会_中村会長資料.pdf
ChikakoInami1
 
PDF
PostgreSQL18新機能紹介(db tech showcase 2025 発表資料)
NTT DATA Technology & Innovation
 
20250711JIMUC総会IBM Automation_Platform最新情報_Connpass公開版.pdf
ChikakoInami1
 
20250717_Devin×GitHubCopilotで10人分の仕事は出来るのか?.pdf
Masaki Yamakawa
 
Devcontainerのススメ(1)-Devcontainerとはどういう技術?-
iPride Co., Ltd.
 
20250711JIMUC総会_先進IT運用管理分科会Connpass公開資料.pdf
ChikakoInami1
 
20250711_日本IBM ミドルウエア・ユーザー研究会(JIMUC)総会_中村会長資料.pdf
ChikakoInami1
 
PostgreSQL18新機能紹介(db tech showcase 2025 発表資料)
NTT DATA Technology & Innovation
 

ここがつらいよWebRTC - WebRTC開発の落とし穴

Editor's Notes

  • #3: みなもと たくみ ※パネラー自身に、30秒ぐらいで自己紹介してもらう。 主に「WebRTC 利用状況、担当範囲」について
  • #4: あごう きょう ※パネラー自身に、30秒ぐらいで自己紹介してもらう。 主に「WebRTC 利用状況、担当範囲」について
  • #5: ※パネラー自身に、30秒ぐらいで自己紹介してもらう。 主に「WebRTC 利用状況、担当範囲」について
  • #6: ※パネラー自身に、30秒ぐらいで自己紹介してもらう。 主に「WebRTC 利用状況、担当範囲」について
  • #9: 会場アンケート。どの分野が一番聞きたいか?