5jCup WebRTC賞

Copyright © NTT Communications Corporation. All right reserved.
5jCup WebRTC賞
NTT Communications
仲裕介
5jcup Hackathon@21cafe
2014/6/14

2Copyright © NTT Communications Corporation. All right reserved.
WebRTCって何？

WebRTCって何？
RTC = Real Time Communication
Webブラウザで、
リアルタイムなコミュニケーション／通信
を利用できる技術
3

WebRTCって何？
技術的には3つの要素
1. ブラウザ間で直接通信できる
2. リアルタイム通信ができる
3. カメラとマイクを使える
4
従来のWeb WebRTC
カメラやマイ
クを利用可
リアルタイ
ムに送受信
ブラウザ間
の直接通信
サーバ⇔ク
ライアント
間の通信
リクエストと
レスポンスの
繰り返し
カメラやマイ
クの利用不可

WebRTCって何？
利用例
ビデオチャット、ボイスチャット、
対戦ゲーム、ファイル転送、
ブラウザフォン…
5
従来のWeb WebRTC
カメラやマイ
クを利用可
リアルタイ
ムに送受信
ブラウザ間
の直接通信
サーバ⇔ク
ライアント
間の通信
リクエストと
レスポンスの
繰り返し
カメラやマイ
クの利用不可

WebRTCの何がすごいの？

7
https://www.flickr.com/photos/tjflex/57210112

8
https://www.flickr.com/photos/mattb_tv/2550476978

9
今、HTML5デベロッパの手に！
通信キャリアとしては、ちょっと微妙…

WebRTC賞って？

WebRTC賞って？
11
日本に、WebRTCのブームを起こしたい。
その一心です。

WebRTC賞って？
12
賞金は２０万円！
WebRTCを活用した
今までにないような独創的なアイディア求む！
応募作品はプロトタイプレベルでも構いません！
詳しくはこちら
https://5jcup.org/awards/ntt-com

業務連絡 (SkyWayの宣伝）

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

SkyWayを使えばかんたん
15
SkyWayのAPIとライブラリが複雑な処理をやってくれます。
開発者は、直接通信に専念できます。
STUN
API
Signaling
API
STUN
API
ライブラリライブラリ
APIとライブ
ラリが複雑な
処理を担う

SkyWayで簡単WebRTCプログラミング
実際に開発してみる

APIキーを申請する
17
ここをクリック
まずはアクセス → http://skyway.io

APIキーの申請にはドメインが必要
18
 APIキーの申請に必要なもの
 お名前
 連絡先メールアドレス
 SkyWayを利用するドメイン
 SkyWayを利用するドメイン
 例えば・・・
 ローカルで動かしたい
 127.0.0.1
 localhost
 開発サーバで動かしたい
 dev.domain.jp
 本番サーバで動かしたい
 www.domain.jp

開発してみる
19
 STEP1 - ライブラリを読み込む！
<script src="https://skyway.io/dist/0.3/peer.js"></script>
 STEP2 - Peerオブジェクトを生成する！
var APIKEY = '6165842a-5c0d-11e3-b514-75d3313b9d05’;
var peer = new Peer({ key: APIKEY});

開発してみる
20
 STEP3 - 相手からの着信イベントを処理する！
peer.on('open', function(){
//自分のPeerID（いわゆる電話番号）が生成されたら発火する
});
peer.on('call', function(call){
//相手からの着信があった場合に応答する
call.answer(window.localStream);
});
peer.on('error', function(err){
//何らかのエラーが発生した場合に発火する
console.log(err.message);
});

開発してみる
21
 STEP4 - 自分自身のオーディオ、ビデオストリームを取得する！
navigator.getUserMedia({audio: true, video: true}, function(stream){
//自分のVideoタグに表示
$('#my-video').prop('src', URL.createObjectURL(stream));
//相手に送るために保存
window.localStream = stream;
}, function(err){
//エラー処理は必須
console.log(err);
});

開発してみる
22
 STEP5 - 相手に発信＆発信後のイベントを処理する！
var call = peer.call(PeerId, window.localStream);
call.on('stream', function(stream){
//相手のオーディオ、ビデオストリームをVideoタグに表示
$('#their-video').prop('src', URL.createObjectURL(stream));
});
call.on('close’,function(){
//相手が切断した場合に切断処理を行う
});
※PeerIDの受け渡しは開発者が独自に実装する必要あり
peer.listAllPeers()というメソッドも用意しています
詳しくは開発者フォーラムを → http://goo.gl/NvXDQq

23
とりあえず。
ビデオチャット組み
込めばOKじゃね？
http://goo.gl/OD2VRD

SkyWayを活用してもらうために
開発に必要な様々な情報を提供

開発に必要な情報
 localhostのみで利用可能なAPIキー（全開発者に公開）
• 6165842a-5c0d-11e3-b514-75d3313b9d05
 クライアントライブラリの日本語ドキュメント
• クライアントはオープンソースのPeerJS互換
• PeerJSのドキュメントに一部修正を加え日本語化して公開中
25
http://nttcom.github.io/skyway/docs/

開発に必要な情報
 開発者向けフォーラムを用意
• SkyWay Technical Forum
 だれでも参加可能！
 中の人が懇切丁寧に開発者の疑問質問にお答え！
 WebRTCに関す日本語での情報交換に活用してください
26
http://goo.gl/enBkcF

27
日本に、WebRTCのブームを起こしたい。
ご応募お待ちしています！

Let’s Enjoy 5jcup Hackathon.
https://www.flickr.com/photos/hackny/5684846071/

5jCup WebRTC賞

Recommended

Recommended

More Related Content

What's hot

What's hot (16)

Viewers also liked

Viewers also liked (15)

Similar to 5jCup WebRTC賞

Similar to 5jCup WebRTC賞 (20)

More from Yusuke Naka

More from Yusuke Naka (9)

5jCup WebRTC賞

Editor's Notes