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

https://5jcup.org/awards/ntt-com


業務連絡 (SkyWayの宣伝）


WebRTCは、簡単だけど難しい

14

ブラウザ間で直接通信する前に、サーバ経由で「シグナリング」を行う必要があり、実装にはネットワークの知識が必要

14ようやく直接通信できる

これらの通信が完了してから…


SkyWayを使えばかんたん

15

SkyWayのAPIとライブラリが複雑な処理をやってくれます。開発者は、直接通信に専念できます。

STUNAPI

SignalingAPI 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

Copyright © NTT Communications Corporation. All right reserved. 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/

Engineering

5jCup WebRTC賞