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

https://apprtc.appspot.com/


YouTube と組み合わせたり

https://chat.skyway.io/


Chromecast

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


Chromecast (cont.)

Home Network

再生指示 via WebRTC

Movie file via HTTP

Webof

Things


Platform としての WebRTC

専用アプリ

専用アプリ

専用ハード

専用アプリ

専用ハード

ブラウザ

ブラウザ

ここが共通化・標準化されるだけで、

相当嬉しい


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


SkyWay の概要

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


SkyWay の概要

13

WebRTC 利用アプリを簡単に開発できるクラウド基盤

2013 年 12 月 5 日に提供開始

社外の約 600 名以上の開発者が利用している

提供内容• シグナリング等の API• ライブラリ• サンプルアプリ• ドキュメント


WebRTC は Web 開発者にとって難しい技術

14

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

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

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


SkyWay の特徴

15

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

STUNAPI

SignalingAPI STUN

API

ライブラリライブラリ

API とライブラリが複雑な処理を担う


まず、 local に Web サーバーをたてる

一番簡単なのは、• $ python –m SimpleHTTPServer

• あとは、 apache とか、 nginx とか、 express とかsinatra とかやり方は色々（なんでもいいです）


HTML にライブラリをカキコ

<!doctype html><html><head>…<script src="https://skyway.io/dist/0.3/peer.min.js"></script>…</head><body>…</body></html>


SkyWay のブローカーサーバーに繋げる

var peer = new Peer({key: 'APIKEY'});

peer.on(‘open’, function(id){ // これが自分の ID になる <= 重要});

今回のイベント用の APIKEY はhttp://goo.gl/26aMKE

にあります。caller

callee

ID ID

http://goo.gl/26aMKE

http://goo.gl/26aMKE


ローカルの映像取り込んで、相手に送信

navigator.webkitGetUserMedia({video:true, audio:true}, function(stream) { // stream が映像・音声データを管理する StreamObject var call = peer.call(‘destination-id’, stream); }, function(err) { // 映像取得エラー });

callercallee


受信側で Answer

peer.on(‘call’, function(call) { call.answer(stream);});

callercallee


Call – Answer が終わったら映像受信処理

call.on(‘stream’, function(stream) { var url = window.URL.createObjectURL(stream); $(“#you”).attr(“src”, url); $(“#you”)[0].play();});

callercallee


document

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




Sample source

http://cdn.peerjs.com/demo/videochat/ https://github.com/nttcom/peerjs/

tree/master/examples/videochat


Thank you!!

24

Technology

Web rtcの使い方