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