Web rtcの使い方

Copyright © NTT Communications Corporation. All right reserved.
WebRTCを使って復興支援アプリを作ろう
～WebRTC ハッカソン～
WebRTCについての解説
NTTコミュニケーションズ株式会社
先端IPアーキテクチャセンタ
WebコアTechnical Unit
小松健作
2014年6月7日

自己紹介
名前：小松健作
所属：NTT communications
HTML5の研究開発
標準化活動（W3C）
HTML5の啓蒙・コミュニティ運営
Google Developer Expert (HTML5)

3Copyright © NTT Communications Corporation. All right reserved.
WebRTCとは？

ブラウザで p2p での
テレビ電話やファイル交換などを
可能にする技術

WebRTCとは
 ブラウザでカメラとマイク、音声と映像を扱える。
 ブラウザ間の直接通信、リアルタイム通信が可能になる。
 情報が分散型へシフトする。
5
従来のWeb WebRTC
カメラやマイ
クを利用可
リアルタイ
ムに送受信
ブラウザ間
の直接通信
サーバ⇔ク
ライアント
間の通信
リクエストと
レスポンスの
繰り返し
カメラやマイ
クの利用不可

WebRTC Reference App
6
https://apprtc.appspot.com/

YouTubeと組み合わせたり
7
https://chat.skyway.io/

Chromecast
8
http://www.google.com/intl/ja_ALL/chrome/devices/chromecast
/

Chromecast (cont.)
9
Home Network
再生指示 via WebRTC
Movie file via HTTP
Web
of
Things

Platform としての WebRTC
10
専用
アプリ
専用
アプリ
専用
ハード
専用
アプリ
専用
ハード
ブラウザ
ブラウザ
ここが共通化・
標準化されるだけで、
相当嬉しい

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

SkyWayの概要
SkyWayを使えば簡単に
WebRTCのアプリを開発できる

SkyWayの概要
13
WebRTC利用アプリを簡単に開発できるクラウド基盤
 2013年12月5日に提供開始
 社外の約600名以上の
開発者が利用している
 提供内容
• シグナリング等のAPI
• ライブラリ
• サンプルアプリ
• ドキュメント

WebRTCはWeb開発者にとって難しい技術
14
ブラウザ間で直接通信する前に、サーバ経由で「シグナリング」を
行う必要があり、実装にはネットワークの知識が必要。
14ようやく直接通信できる
これらの通信が
完了してから…

SkyWayの特徴
15
SkyWayのシグナリングAPIとライブラリが複雑な処理を担うので、
開発者は簡単にWebRTC利用アプリを開発できる。
STUN
API
Signaling
API
STUN
API
ライブラリライブラリ
APIとライブ
ラリが複雑な
処理を担う

まず、localにWebサーバーをたてる
 一番簡単なのは、
• $ python –m SimpleHTTPServer
• あとは、apacheとか、nginxとか、expressとかsinatraとか
やり方は色々（なんでもいいです）
16

HTMLにライブラリをカキコ
<!doctype html>
<html>
<head>
…
<script src="https://skyway.io/dist/0.3/peer.min.js"></script>
…
</head>
<body>
…
</body>
</html>
17

SkyWayのブローカーサーバーに繋げる
var peer = new Peer({key: 'APIKEY'});
peer.on(‘open’, function(id){
// これが自分のIDになる <= 重要
});
今回のイベント用のAPIKEYは
http://goo.gl/26aMKE
にあります。
18
caller
callee
ID ID

ローカルの映像取り込んで、相手に送信
navigator.webkitGetUserMedia({video:true, audio:true},
function(stream) {
// stream が映像・音声データを管理するStreamObject
var call = peer.call(‘destination-id’, stream);
},
function(err) {
// 映像取得エラー
});
19
caller
callee

受信側でAnswer
peer.on(‘call’, function(call) {
call.answer(stream);
});
20
caller
callee

Call – Answerが終わったら映像受信処理
call.on(‘stream’, function(stream) {
var url = window.URL.createObjectURL(stream);
$(“#you”).attr(“src”, url);
$(“#you”)[0].play();
});
21
caller
callee

document
http://nttcom.github.io/skyway/docs/
22

Sample source
23
http://cdn.peerjs.com/demo/videoch
at/ https://github.com/nttcom/peerjs/tre
e/master/examples/videochat

Thank you!!
24

Web rtcの使い方

More Related Content

What's hot (20)

Similar to Web rtcの使い方 (20)

More from Kensaku Komatsu (16)

Web rtcの使い方