2013 webrtc 概説 ＆ ワークショップ
DESCRIPTION
社内にてWebRTCに関する概説と、簡単なワークショップを実施した際の資料です。 2013年8月 This is a presentation for WebRTC basics and simple workshop (in Japanese).TRANSCRIPT
はじめに
• 本資料は以下の情報を参考に、作成しています。– WebRTC本家のサイト
• http://www.webrtc.org/
– HTML5 ROCKS• http://www.html5rocks.com/en/tutorials/webrtc/basics/
– WebRTC for Beginners Muaz Khan• https://www.webrtc-experiment.com/docs/webrtc-for-beginners.html• https://github.com/muaz-khan/WebRTC-Experiment
– WebRTC Conference 2013 Atlanta• http://www.webrtcworld.com/conference/west/default.aspx• http://images.tmcnet.com/expo/webrtc-
conference/pdfs/WebRTC%20SG13AtlantaRe-CapSml.pdf
– その他の多くのブログ
• 本利用に含まれる製品名、商標、ロゴは、各権利者に帰属します。
– ®、TM 等の表記は省略します
2
What’s WebRTC
• Web Real-Time Communication の略称
• Webブラウザ上で、Real-Time Communicationを可能にするフレームワーク– HTML5の一部
• 複数の技術の連携で成り立っている– 何が含まれるか、分かりますか？
3
WebRTCの構成要素
• ユーザーメディア– カメラ– マイク– 画面キャプチャ
• ストリーム (MediaStream)
• P2P通信 (RTCPeerConnection)• データ通信 (DataChannel)
• 関連するAPI、HTML要素– JavaScript （大前提）– Video, Audio– WebScoket– WebAudio API– Canvas– WebGL– などなど
4
WebRTCが使えるブラウザ
• Windows / Mac– Chrome 26～（カメラ、マイクはOK、画面キャプチャは要設定）– FireFox 22～（カメラ、マイクはOK、画面キャプチャはNG）– Opera 15 ～ （カメラ、マイクはOK、画面キャプチャはNG）※JavaScriptには方言がある。要注意
Chrome: webkit～, FireFox: moz～
• Android– Chrome 29～ （カメラ、マイクはOK、画面キャプチャはNG）
• iOS– なし– Google曰く、現在開発中で近々ライブラリを出す予定とのこと
• WebRTC Conference 2013 Atlanta にての発言。• → いずれChromeに乗るのでは？ と個人的に期待しています。
5
なぜWebRTCに注目するのか？通信手段の破壊的進化キャリア型通信
固定電話携帯電話(TV放送）
手段の例
Over The Top
Skype, WebEx(YouTube, USTREAM)
Webブラウザ型
WebRTC
世界中の人と会話できる
ユーザメリット世界中の人と無料/安価で会話できる
専用アプリ無しで会話できる
インフラを持つキャリアが支配
市場
キャリアに縛られない独自の仕組みを提供する少数のベンダーが参加可能
特別な仕組みは不要誰でも参加可能
×事業者メリット限定的なAPI提供一部連携可能
完全にプログラマブル部品として利用可能
単独で利用利用方法ユーザが組み合わせて利用
製品/サービスに組み込んで利用
コールセンター、ECサイト、情報共有システム、など
利用方法のイメージ■ユーザが組み合わせて利用→ Wordで見積書作成
合計：568,900
システムが合計を計算、自動で結果を反映する
■製品/サービスに組み込んで利用→ Excelで見積書作成
合計：568,900
電卓で計算、ワードに手動で転記
メディア関連
8
では、やってみようChrome編
• 準備
– OS: Windows, Mac OS X
–ブラウザ：Chrome 26～ をインストール
– Webカメラ、マイクを接続
–お好きなエディタ
• 内容
–ユーザーメディアの扱い
–ストリームの扱い9
自分撮りカメラ (Chrome)
<html><head><title>WebRTC Camera</title></head><body>
<video id="video1" autoplay="1"></video></body><script>
var video1 = document.getElementById('video1');navigator.webkitGetUserMedia({audio:false, video:true},
function(stream) { // successvideo1.src = window.webkitURL.createObjectURL(stream);
},function(err) { // error
console.log(err);}
);</script>
</html>
10
予定
11
ローカルでやってみる (file://～)
• 何も表示されないはず
• JavaScript コンソールを見ると…– NavigatorUserMediaError {code: 1,
PERMISSION_DENIED: 1} …
–権限エラー
• ローカルファイルからでは、ユーザーメディアにアクセスできない
• →ということで、サーバーに置いてみましょう– Apache, nginx, IISなどお好きなサーバーでどうぞ
12
Webサーバーがない人は• Webサーバのセットアップしたことがない場合
• →簡単なWebサーバー(Windows)
–シンプルなWebサーバ 04WebServer の導入
– http://www.vector.co.jp/soft/dl/winnt/net/se305171.html
–サービスにはしない（手動起動）で
• サーバー開始
– 04WebServerサーバーコントローラ
13
04WebServer
14
Webサーバーがない人は(2)• 簡単なWebサーバー(Windowsその2)
–簡単WEBサーバーの導入
– http://www.vector.co.jp/soft/dl/winnt/net/se381431.html
• サーバー開始
15
改めて、結果
16
セピアカメラ
<html><head><title>WebRTC Camera</title><head><body>
<video id="video1" autoplay="1" style="-webkit-filter: sepia(80%); "></video></body><script>
var video1 = document.getElementById('video1');navigator.webkitGetUserMedia({audio:false, video:true},
function(stream) { // successvideo1.src = window.webkitURL.createObjectURL(stream);
},function(err) { // error
console.log(err);}
);</script>
</html>
17
結果
18
ミラーカメラ
<html><head><title>WebRTC Camera</title><head><body><video id="video1" autoplay="1" ></video><video id="video2" autoplay="1" style="-webkit-transform: scaleX(-1);"></video>
</body><script>var video1 = document.getElementById('video1');var video2 = document.getElementById('video2');navigator.webkitGetUserMedia({audio:false, video:true},function(stream) { // successvideo1.src = window.webkitURL.createObjectURL(stream);video2.src = window.webkitURL.createObjectURL(stream);
},function(err) { // errorconsole.log(err);
});
</script></html>
19
結果
20
その他のバリエーション
痩せカメラ
<video id="video2" autoplay="1" style="-webkit-transform: scaleX(0.5);"></video>
貫禄カメラ
<video id="video2" autoplay="1" style="-webkit-transform: scaleX(1.5);"></video>
逆さカメラ
<video id="video2" autoplay="1" style="-webkit-transform: scaleY(-1);"></video>
白黒カメラ
<video id="video2" autoplay="1" style="-webkit-filter: grayscale(100%);"></video>
傾奇カメラ<video id="video6" autoplay="1" style="-webkit-transform: rotate(-30deg);"></video>
21
2つのvideoタグの意味
22
1つのMediaStreamを複数の出力先に接続することができる
MediaStream : 出力先 = 1 : n
ハウリング体験
<html><head><title>WebRTC Camera</title><head><body>
<video id="video1" autoplay="1"></video></body><script>
var video1 = document.getElementById('video1');navigator.webkitGetUserMedia({audio:true, video:true},
function(stream) { // successvideo1.src = window.webkitURL.createObjectURL(stream);
},function(err) { // error
console.log(err);}
);</script>
</html>
23
ハウリングの原理（ローカル）
24
※多くのサンプルはこのようになっている→ヘッドホンが必須
ここまでのまとめ
• ユーザーメディア（音声、画像）– navigator.webkitGetUserMedia(
{audio:true, video:true}, …
• ユーザーメディア（画面キャプチャ）– navigator.webkitGetUserMedia(
video : { mandatory : { chromeMediaSource : "screen" } },
• セキュリティ（アクセス権限）• メディアストリーム– MediaStream (video, audio)
25
WebRTCのアクセス権限(パーミッション）
26
メディアの階層図
27
通信関連
28
通信について
• RTCPeerConnection
–動画、音声などのMediaStreamを転送する経路
– P2P (Point to Point) → ブラウザとブラウザ
– UDP/IP を使用
29
RTCPeerConnection RTCPeerConnection
UDP/IP
P2P通信を始めるには
• お互い、相手のIPアドレスを知る必要がある• 使用するポート番号を知る必要がある
– 利用するUDPのポートはダイナミックに割り振られる
• RTCPeerConnectionの通信を始める前に、何らかの手段でネゴシエーション、合意が必要– この手順を”シグナリング：Signaling”と呼びます
30
RTCPeerConnection RTCPeerConnection
UDP/IP
お互いのIPアドレス利用するUDPポート
P2P前のシグナリング
• どちらのブラウザからもわかる、中継役が必要– →普通はシグナリングサーバーを立てる
• シグナリングのプロトコルは標準化されていない– 独自の方式
• WebSocket利用(TCP/IP)• Ajax利用(HTTP, HTTPS)
– 既存のプロトコル• SIP(VoIP用) with WebSocket(TCP/IP)• XMPP(IM用）with WebSocket(TCP/IP)
31
シグナリングで交換される情報
• Session Description Protocol (SDP)– セッションが含むメディアの種類（音声、映像）、メディアの形式（コーデック）
– IPアドレス、ポート番号– P2Pのデータ転送プロトコル→ WebRTCでは Secure RTP– 通信で使用する帯域– セッションの属性（名前、識別子、アクティブな時間、など）
• Interactive Connectivity Establishment (ICE)– 通信経路の候補をリストアップするためのプロトコル
• P2Pによる直接通信• STUNによる、NAT通過のためのポートマッピング（→P2Pになる）• TRUNによる、リレーサーバーを介した中継通信
– ネットワーク的に近い経路（上から順）が選ばれる
32
直接P2Pの経路（同一ネットワーク内）
33
動的UDPポート(50000～65535)
STUNを使った、ポート情報交換その後のP2Pの経路（NAT越え）
34
TURNサーバによるリレー中継経路（Firewall抜け）
35
P2P通信確立までの流れ(1) WebSocketの例
36
PeerConnection
socket
ApplicationSignalingServer
PeerConnectionsocket
Application
connect()connect connect()
connect
createOffer()
offer sdp
setLocalDescription(sdp)
send(sdp)send sdp
send sdp onMessage(sdp)
setRemoteDescription(sdp)
createAnswer()
answer sdp
send sdpsend(sdp)
send sdp
onMessage(sdp)
setRemoteDescription(sdp)
setLocalDescription(sdp)
P2P通信確立までの流れ(2) WebSocketの例
37
PeerConnection
socket
ApplicationSignalingServer
PeerConnectionsocket
Application
onIceCandidate(ice)
send(ice) send icesend ice
onMessage(ice)
addIceCandidate(ice)
send ice send(ice)send ice
onMessage(ice)
addIceCandidate(ice)
onIceCandidate(ice)
onIceCandidate() : end of candidateonIceCandidate() : end of candidate
P2P stream transferP2Pは最後の最後
P2P型のメリット、デメリット
• メリット
– サーバを仲介しないので、オーバーヘッドがない
– 高スペックのサーバー不要
• デメリット
– 通信相手が多いと組み合わせ爆発で通信経路が増える• 2人 → 1経路
• 3人 → 3経路
• 4人 → 6経路
• 5人 → 10経路
• 6人 → 15経路
38
P2P型
サーバー型
P2P型4人
サーバー型4人
WebRTCで可能な(通信)形態
• 双方向通信– 1 to 1 の音声通信
– 1 to 1 の映像通信
– 1 to 1のスクリーンキャプチャ通信（と音声通信）
– n to n の音声通信
– n to nの映像通信
– n to n のスクリーンキャプチャ通信（と音声通信）
39
WebRTCで可能な(通信)形態
• 片方向通信– 1 → 1 の音声通信
– 1 → 1 の映像通信
– 1 → 1のスクリーンキャプチャ通信（と音声通信）
– 1 → n の音声通信
– 1 → n の映像通信
– 1 → n のスクリーンキャプチャ通信（と音声通信）
40
WebRTCで可能な(通信)形態
• ローカルのみ
–音声取得→スピーカーで再生
–動画取得→動画再生
–画面キャプチャ取得
–音声録音
–動画録画
–静止画保存（Canvas使用）
41
WebRTC関連の関連図
42
自分でハウリングを防止
43
※一見、これで防止できそう
相手とのハウリングの抑止？
44自動ミュートや、特定音域減衰などの音声処理が必要→ JavaScriptでは不可能？？
※相手がいると、やはり発生
画面キャプチャ＆音声通信
45
※2つのMediaStreamを、1つのPeerConnectionに接続
データ通信(DataChannel)
• RTCPeerConnectionの通信経路を通して、データ交換を実施
• UDP/IPなので、(TCP/IPと違い)通信レイヤーでのパケット再送なし– → DataChannelのレベルで、まるごと再送機能を提供
• onOpen, onClose, onMessageのイベントを処理• テキストチャット、ファイル転送、ゲームなどに利用可能
• DataChannelはP2P、WebSocketはサーバ経由• DataChannelはUDP/IP、WebSocketはTCP/IP
• 仕様はまだ未確定
46
まとめ
• WebRTCはパワフル– カメラ、マイク、画面キャプチャなど、ブラウザの能力を大きく拡大する
– HTML5の他の機能との相乗効果• Canvas, CSS, WebAudio API, WebGL
• WebRTCはフレキシブル– ローカルのみ、1対1、n対n– 双方向、片方向（ブロードキャスト）
• WebRTCは破壊的技術– だれでも市場/アプリに参入できる
• WebRTCはプログラマブル– 自分たちの製品/サービスに組み込める
47
WebRTCをどんな風に使うかは、みなさんのアイデア次第です！
END
48
おまけ
49
ワークショップの続き：静止画<html>
<head><title>WebRTC Camera</title></head>
<body>
<button onclick="captureImage();">Shot</button><br />
<video id="video1" autoplay="1" style="width:480px; height:360px;"></video>
<canvas id="canvas1" style="width:480px; height:360px;"></canvas>
</body>
<script>
var video1 = document.getElementById('video1');
var canvas1 = document.getElementById('canvas1');
navigator.webkitGetUserMedia({audio:false, video:true},
function(stream) { // success
video1.src = window.webkitURL.createObjectURL(stream);
},
function(err) { // error
console.log(err);
});
function captureImage(){
var context = canvas1.getContext('2d');
context.drawImage(video1, 0, 0, canvas1.width, canvas1.height);
}
</script>
</html>50
ワークショップの続き：静止画(2)<html>
<head><title>WebRTC Camera</title></head>
<body>
<button onclick="captureImage();">Shot</button><br />
<button onclick="saveImage();">Save</button><br />
…
</body>
<script>
…
function captureImage(){
var context = canvas1.getContext('2d');
context.drawImage(video1, 0, 0, canvas1.width, canvas1.height);
}
function saveImage() { // download
var data = canvas1.toDataURL('image/png');
data = data.replace('image/png', 'image/octet-stream');
document.location.href = data;
};
</script>
</html>51
※なぜか保存されたpngは、縦方向につぶれてしまう（原因不明）