View
2.885
Download
4
Category
Preview:
DESCRIPTION
Citation preview
Copyright © NTT Communications Corporation. All right reserved.
WebRTC を使って復興支援アプリを作ろう～ WebRTC ハッカソン～
WebRTC についての解説NTT コミュニケーションズ株式会社先端 IP アーキテクチャセンタWeb コア Technical Unit小松健作2014 年 6 月 7 日
Copyright © NTT Communications Corporation. All right reserved.
自己紹介
名前：小松健作所属： NTT communications
HTML5 の研究開発標準化活動（ W3C ）HTML5 の啓蒙・コミュニティ運営
Google Developer Expert (HTML5)
3Copyright © NTT Communications Corporation. All right reserved.
WebRTC とは？
4Copyright © NTT Communications Corporation. All right reserved.
ブラウザで p2p でのテレビ電話やファイル交換などを可能にする技術
Copyright © NTT Communications Corporation. All right reserved.
WebRTC とは
ブラウザでカメラとマイク、音声と映像を扱える。 ブラウザ間の直接通信、リアルタイム通信が可能になる。 情報が分散型へシフトする。
5
従来の Web WebRTC
カメラやマイクを利用可
リアルタイムに送
受信
ブラウザ間の直接通
信
サーバ⇔クライアント間の
通信
リクエストとレスポンスの
繰り返し
カメラやマイクの利用不可
6Copyright © NTT Communications Corporation. All right reserved.
WebRTC Reference App
https://apprtc.appspot.com/
7Copyright © NTT Communications Corporation. All right reserved.
YouTube と組み合わせたり
https://chat.skyway.io/
8Copyright © NTT Communications Corporation. All right reserved.
Chromecast
http://www.google.com/intl/ja_ALL/chrome/devices/chromecast/
9Copyright © NTT Communications Corporation. All right reserved.
Chromecast (cont.)
Home Network
再生指示 via WebRTC
Movie file via HTTP
Webof
Things
10Copyright © NTT Communications Corporation. All right reserved.
Platform としての WebRTC
専用アプリ
専用アプリ
専用ハード
専用アプリ
専用ハード
ブラウザ
ブラウザ
ここが共通化・標準化されるだけで、
相当嬉しい
11Copyright © NTT Communications Corporation. All right reserved.
WebRTC SDK, libraries for other env.
http://tokbox.com/opentok
http://js-platform.github.io/node-webrtc/
https://github.com/alongubkin/phonertc
http://www.webrtc.org/reference/native-apis
12Copyright © NTT Communications Corporation. All right reserved.
SkyWay の概要
SkyWay を使えば簡単にWebRTC のアプリを開発できる
Copyright © NTT Communications Corporation. All right reserved.
SkyWay の概要
13
WebRTC 利用アプリを簡単に開発できるクラウド基盤
2013 年 12 月 5 日に提供開始
社外の約 600 名以上の開発者が利用している
提供内容• シグナリング等の API• ライブラリ• サンプルアプリ• ドキュメント
Copyright © NTT Communications Corporation. All right reserved.
WebRTC は Web 開発者にとって難しい技術
14
ブラウザ間で直接通信する前に、サーバ経由で「シグナリング」を行う必要があり、実装にはネットワークの知識が必要。
14ようやく直接通信できる
これらの通信が完了してから…
Copyright © NTT Communications Corporation. All right reserved.
SkyWay の特徴
15
SkyWay のシグナリング API とライブラリが複雑な処理を担うので、開発者は簡単に WebRTC 利用アプリを開発できる。
STUNAPI
SignalingAPI STUN
API
ライブラリ ライブラリ
API とライブラリが複雑な処理を担う
16Copyright © NTT Communications Corporation. All right reserved.
まず、 local に Web サーバーをたてる
一番簡単なのは、• $ python –m SimpleHTTPServer
• あとは、 apache とか、 nginx とか、 express とかsinatra とかやり方は色々（なんでもいいです）
17Copyright © NTT Communications Corporation. All right reserved.
HTML にライブラリをカキコ
<!doctype html><html><head>…<script src="https://skyway.io/dist/0.3/peer.min.js"></script>…</head><body>…</body></html>
18Copyright © NTT Communications Corporation. All right reserved.
SkyWay のブローカーサーバーに繋げる
var peer = new Peer({key: 'APIKEY'});
peer.on(‘open’, function(id){ // これが自分の ID になる <= 重要});
今回のイベント用の APIKEY はhttp://goo.gl/26aMKE
にあります。caller
callee
ID ID
19Copyright © NTT Communications Corporation. All right reserved.
ローカルの映像取り込んで、相手に送信
navigator.webkitGetUserMedia({video:true, audio:true}, function(stream) { // stream が映像・音声データを管理する StreamObject var call = peer.call(‘destination-id’, stream); }, function(err) { // 映像取得エラー });
callercallee
20Copyright © NTT Communications Corporation. All right reserved.
受信側で Answer
peer.on(‘call’, function(call) { call.answer(stream);});
callercallee
21Copyright © NTT Communications Corporation. All right reserved.
Call – Answer が終わったら映像受信処理
call.on(‘stream’, function(stream) { var url = window.URL.createObjectURL(stream); $(“#you”).attr(“src”, url); $(“#you”)[0].play();});
callercallee
22Copyright © NTT Communications Corporation. All right reserved.
document
http://nttcom.github.io/skyway/docs/
23Copyright © NTT Communications Corporation. All right reserved.
Sample source
http://cdn.peerjs.com/demo/videochat/ https://github.com/nttcom/peerjs/
tree/master/examples/videochat
24Copyright © NTT Communications Corporation. All right reserved.
Thank you!!
24
Recommended