WebRTCを始めよう！ HTML5fun 第一回勉強会

Copyright © NTT Communications Corporation. All right reserved.
WebRTCを始めよう！
〜全国にHTML5の楽しさを届けよう！〜
第一回勉強会
2014 / 5 / 19
http://html5fun-1.peatix.com/

自己紹介
 なかゆうすけ（Twitter : @Tukimikage）
 所属
• NTTコミュニケーションズ先端IPアーキテクチャセンタ
 オフィシャルワーク
• HTML5 Experts.jp（HTML5 Experts Works）副編集長
• WebRTC開発者向けフレームワーク「SkyWay」中の人
 コミュニティワーク
• html5j自動車部部長
• html5jエンタープライズ部スタッフ
2

今日の流れ
 WebRTCとは？
 WebRTC開発者向けプラットフォーム「SkyWay」の概要
 SkyWayで簡単WebRTCプログラミング
 SkyWayを活用してもらうために
 SkyWayの利用事例（デモンストレーション）
 WeRTCで賞金ゲット！
3

WebRTCとは
 ブラウザでカメラとマイク、音声と映像を扱える。
 ブラウザ間の直接通信、リアルタイム通信が可能になる。
 ビデオ会議、ボイスチャット、テキストチャット、ファイル転送、電話と
の連携等が可能になる。
 対応ブラウザは、Chrome (iOS除く)、Firefox、Opera。iOS、IEは未対応。
4
従来のWeb WebRTC
カメラやマイ
クを利用可
リアルタイ
ムに送受信
ブラウザ間
の直接通信
サーバ⇔ク
ライアント
間の通信
リクエストと
レスポンスの
繰り返し
カメラやマイ
クの利用不可

5Copyright © NTT Communications Corporation. All right reserved.
SkyWayの概要
SkyWayを使えば簡単に
WebRTCのアプリを開発できる

SkyWayの概要
6
WebRTC利用アプリを簡単に開発できるクラウド基盤
 2013年12月5日に提供開始
 提供内容
• シグナリング等のAPI
• ライブラリ
• サンプルアプリ
• ドキュメント

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

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

9Copyright © NTT Communications Corporation. All right reserved.
SkyWayで簡単WebRTCプログラミング
実際に開発してみる

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

APIキーの申請にはドメインが必要
11
 APIキーの申請に必要なもの
 お名前
 連絡先メールアドレス
 SkyWayを利用するドメイン
 SkyWayを利用するドメイン
APIキーはJavaScriptで公開されるた
め不正利用を防ぐ目的のドメイン認証
 例えば・・・
 ローカルで動かしたい
 127.0.0.1
 localhost
 開発サーバで動かしたい
 dev.domain.jp
 本番サーバで動かしたい
 www.domain.jp

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

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

開発してみる
14
 STEP3 - 自分自身のオーディオ、ビデオストリームを取得
navigator.getUserMedia({audio: true, video: true}, function(stream){
//自分のVideoタグに表示
$('#my-video').prop('src', URL.createObjectURL(stream));
//相手に送るために保存
window.localStream = stream;
}, function(err){
//エラー処理は必須
console.log(err);
});
※getUserMediaにはブラウザごとにベンダープレフィックスがあります

開発してみる
15
 STEP4 - 相手に発信＆発信後のイベントを処理するハンドラを設置
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

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

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

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

情報発信
 SkyWay（WebRTC）に関する情報はTwitterをチェック！
#skywayjs
#webrtcjp
#webrtc
19

SkyWayの利用事例
デモンストレーション

多人数のビデオチャット
• ブラウザ搭載のあらゆるデバイスで利用できる。
• インストール不要、認証も不要、
URLにアクセスするだけで開始。
• サービス紹介ムービーはこちら
http://works.html5experts.jp/365/
212121
SkyWaySkyWayで
シグナリング
WebRTCでメッシュ状に接続し、
マイク音声、カメラ映像を
すべての相手に送信
WebRTC Chat on SkyWay
https://chat.skyway.io/
2014年4月21日サービス開始

スマホで撮った多数の映像を表示
• スマホで撮ったスマホカメラの映像をスクリーンに表示。
（HTML Conference 2013の会場で３００名規模のデモ実施）
22
SkyWay
SkyWayで
シグナリング
カメラの映像を
WebRTCで送信
HTML5 JUMBOTRON

通話内容をテキストで表示
• 音声認識機能を組み合わせ、通話内容をテキストで表示。
• 聴力が衰えた方向け、電車や会議中等の通話できない環境、
議事録の自動作成等に適用可能。
23
字幕付きボイスチャット
相手との通話内容が
吹き出し風に表示される
SkyWay
0.SkyWay
でシグナリング
4.テキストを送受信
音声認識
API
音声認識
API
2.音声を
テキスト化
3.音声を送受信
1.話す 5.音声を再生
テキストを表示
http://goo.gl/N8bnkh

テキストを音声に変換
• 音声合成機能を組み合わせて、テキストを音声で発話。
• テキストチャットとボイスチャットのコミュニケーションが実現可
能。
24
SkyWay
0.SkyWay
音声認識
API
2.テキストを送信
1.テキストを入力
6. テキストを表示
3.音声を合成
4. 話す
5.音声を送受信
音声合成
API
2.音声を
テキスト化

ファイル転送
• ブラウザ間で直接セキュアなファイル転送が可能。
25
SkyWay
0.SkyWay
2.ファイル送信
1.ファイルを送信 2.ファイルを受信
100MB以上の大容量
ファイルも送信可能
暗号化＆PtoPで
セキュアに送信可能
SkyDrop

位置情報を共有
• サバゲーを楽しくする！
• 仲間同士で位置情報を共有
• トランシーバー代わりに使える
26
SkyWaySkyWayで
シグナリング
同一チームに所属する端末で、
WebRTCを利用しメッシュ状に接続、
互いの位置情報をリアルタイム共有。
特定端末から音声を同一チームの
他端末にブロードキャスト
The Survivor

SIPや電話への接続
• WebRTCとVoIPを変換するゲートウェイを介して、SIPや電話と接続可能。
• DTMFトーンの発生も可能。
• 既存の電話会議システムとの連携や、ブラウザからコールセンターへの問い合わせに応用できる。
272727
既存システム
WebRTC Gateway
WebRTC
PSTN
SIP+RTP PSTN
ブラウザ
WebRTCと
VoIPを変換
SIP
SIPアプリ電話
SIP+RTP

WebRTCで賞金ゲット！
5jcup - WebRTC賞のススメ

WebRTC賞に応募しよう！
 5jcup WebRTC賞を提供しています。
29
WebRTCを活用した面白いアプリお待ちしています！

ご清聴ありがとうございました！
30

WebRTCを始めよう！ HTML5fun 第一回勉強会

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Semelhante a WebRTCを始めよう！ HTML5fun 第一回勉強会

Semelhante a WebRTCを始めよう！ HTML5fun 第一回勉強会 (20)

Mais de Yusuke Naka

Mais de Yusuke Naka (12)

Último

Último (7)

WebRTCを始めよう！ HTML5fun 第一回勉強会