Submit Search
Upload
WebRTCとPeer.jsを使った実装
•
16 likes
•
7,621 views
Yuta Suzuki
Follow
9/5にLIGさんと勉強会をさせて頂きました。 その際に発表した資料です。 発表ではDEMOがありましたが、この資料では省かせて頂きました。
Read less
Read more
Engineering
Report
Share
Report
Share
1 of 52
Download now
Download to read offline
Recommended
実践 WebRTC 〜最新事例と開発ノウハウの紹介〜
実践 WebRTC 〜最新事例と開発ノウハウの紹介〜
Yusuke Naka
WebRTCの技術解説 公開版
WebRTCの技術解説 公開版
Contest Ntt-west
WebRTC入門+最新動向
WebRTC入門+最新動向
Ryosuke Otsuya
WebSocket / WebRTCの技術紹介
WebSocket / WebRTCの技術紹介
Yasuhiro Mawarimichi
5分でわかるWebRTCの仕組み - html5minutes vol.01
5分でわかるWebRTCの仕組み - html5minutes vol.01
西畑 一馬
SFUの話
SFUの話
tnoho
ここがつらいよWebRTC - WebRTC開発の落とし穴
ここがつらいよWebRTC - WebRTC開発の落とし穴
mganeko
エンジニアから飛んでくるマサカリを受け止める心得
エンジニアから飛んでくるマサカリを受け止める心得
Reimi Kuramochi Chiba
Recommended
実践 WebRTC 〜最新事例と開発ノウハウの紹介〜
実践 WebRTC 〜最新事例と開発ノウハウの紹介〜
Yusuke Naka
WebRTCの技術解説 公開版
WebRTCの技術解説 公開版
Contest Ntt-west
WebRTC入門+最新動向
WebRTC入門+最新動向
Ryosuke Otsuya
WebSocket / WebRTCの技術紹介
WebSocket / WebRTCの技術紹介
Yasuhiro Mawarimichi
5分でわかるWebRTCの仕組み - html5minutes vol.01
5分でわかるWebRTCの仕組み - html5minutes vol.01
西畑 一馬
SFUの話
SFUの話
tnoho
ここがつらいよWebRTC - WebRTC開発の落とし穴
ここがつらいよWebRTC - WebRTC開発の落とし穴
mganeko
エンジニアから飛んでくるマサカリを受け止める心得
エンジニアから飛んでくるマサカリを受け止める心得
Reimi Kuramochi Chiba
WebRTC SFU Mediasoup Sample update
WebRTC SFU Mediasoup Sample update
mganeko
WebRTCで動かす“テレイグジスタンス”ロボット
WebRTCで動かす“テレイグジスタンス”ロボット
NTT Communications Technology Development
WebRTC/ORTCの最新動向まるわかり!
WebRTC/ORTCの最新動向まるわかり!
Yusuke Naka
WebRTC配信とハードウェアエンコーダ
WebRTC配信とハードウェアエンコーダ
tnoho
AWS CDKに魅入られた PHPer がオススメする
AWS CDKに魅入られた PHPer がオススメする
Taichi Inaba
WebブラウザでC#実行 WebAssemblyの技術
WebブラウザでC#実行 WebAssemblyの技術
Sho Okada
テストコードの DRY と DAMP
テストコードの DRY と DAMP
Yusuke Kagata
IoT用途で簡単に使えるWebRTC Engineを作った話
IoT用途で簡単に使えるWebRTC Engineを作った話
ToshiyaNakakura1
WebRTCの技術解説 第二版 公開版 本編
WebRTCの技術解説 第二版 公開版 本編
Contest Ntt-west
WebRTC SFU mediasoup sample
WebRTC SFU mediasoup sample
mganeko
いまどき(これから)のPHP開発
いまどき(これから)のPHP開発
Kenjiro Kubota
プロが解説!Hinemosによる運用管理テクニック!
プロが解説!Hinemosによる運用管理テクニック!
hinemos_atomitech
第21回関西PHP勉強会 ReactPHPは もっと流行って欲しい #phpkansai
第21回関西PHP勉強会 ReactPHPは もっと流行って欲しい #phpkansai
Hisateru Tanaka
とにかく分かりづらいTwelve-Factor Appの解説を試みる
とにかく分かりづらいTwelve-Factor Appの解説を試みる
Masatoshi Tada
Dockerの期待と現実~Docker都市伝説はなぜ生まれるのか~
Dockerの期待と現実~Docker都市伝説はなぜ生まれるのか~
Masahito Zembutsu
PHP の GC の話
PHP の GC の話
y-uti
WebRTCハンズオン
WebRTCハンズオン
Yusuke Naka
TRICK 2022 Results
TRICK 2022 Results
mametter
nginx入門
nginx入門
Takashi Takizawa
スマホアプリ開発者のためのWeb api開発入門の入門
スマホアプリ開発者のためのWeb api開発入門の入門
Kenyu Miura
WebRTCについて
WebRTCについて
shotamoriwaki
ビデオ通話・P2Pがコモディティ化する世界 WebRTCによるこれからを探る
ビデオ通話・P2Pがコモディティ化する世界 WebRTCによるこれからを探る
Kensaku Komatsu
More Related Content
What's hot
WebRTC SFU Mediasoup Sample update
WebRTC SFU Mediasoup Sample update
mganeko
WebRTCで動かす“テレイグジスタンス”ロボット
WebRTCで動かす“テレイグジスタンス”ロボット
NTT Communications Technology Development
WebRTC/ORTCの最新動向まるわかり!
WebRTC/ORTCの最新動向まるわかり!
Yusuke Naka
WebRTC配信とハードウェアエンコーダ
WebRTC配信とハードウェアエンコーダ
tnoho
AWS CDKに魅入られた PHPer がオススメする
AWS CDKに魅入られた PHPer がオススメする
Taichi Inaba
WebブラウザでC#実行 WebAssemblyの技術
WebブラウザでC#実行 WebAssemblyの技術
Sho Okada
テストコードの DRY と DAMP
テストコードの DRY と DAMP
Yusuke Kagata
IoT用途で簡単に使えるWebRTC Engineを作った話
IoT用途で簡単に使えるWebRTC Engineを作った話
ToshiyaNakakura1
WebRTCの技術解説 第二版 公開版 本編
WebRTCの技術解説 第二版 公開版 本編
Contest Ntt-west
WebRTC SFU mediasoup sample
WebRTC SFU mediasoup sample
mganeko
いまどき(これから)のPHP開発
いまどき(これから)のPHP開発
Kenjiro Kubota
プロが解説!Hinemosによる運用管理テクニック!
プロが解説!Hinemosによる運用管理テクニック!
hinemos_atomitech
第21回関西PHP勉強会 ReactPHPは もっと流行って欲しい #phpkansai
第21回関西PHP勉強会 ReactPHPは もっと流行って欲しい #phpkansai
Hisateru Tanaka
とにかく分かりづらいTwelve-Factor Appの解説を試みる
とにかく分かりづらいTwelve-Factor Appの解説を試みる
Masatoshi Tada
Dockerの期待と現実~Docker都市伝説はなぜ生まれるのか~
Dockerの期待と現実~Docker都市伝説はなぜ生まれるのか~
Masahito Zembutsu
PHP の GC の話
PHP の GC の話
y-uti
WebRTCハンズオン
WebRTCハンズオン
Yusuke Naka
TRICK 2022 Results
TRICK 2022 Results
mametter
nginx入門
nginx入門
Takashi Takizawa
スマホアプリ開発者のためのWeb api開発入門の入門
スマホアプリ開発者のためのWeb api開発入門の入門
Kenyu Miura
What's hot
(20)
WebRTC SFU Mediasoup Sample update
WebRTC SFU Mediasoup Sample update
WebRTCで動かす“テレイグジスタンス”ロボット
WebRTCで動かす“テレイグジスタンス”ロボット
WebRTC/ORTCの最新動向まるわかり!
WebRTC/ORTCの最新動向まるわかり!
WebRTC配信とハードウェアエンコーダ
WebRTC配信とハードウェアエンコーダ
AWS CDKに魅入られた PHPer がオススメする
AWS CDKに魅入られた PHPer がオススメする
WebブラウザでC#実行 WebAssemblyの技術
WebブラウザでC#実行 WebAssemblyの技術
テストコードの DRY と DAMP
テストコードの DRY と DAMP
IoT用途で簡単に使えるWebRTC Engineを作った話
IoT用途で簡単に使えるWebRTC Engineを作った話
WebRTCの技術解説 第二版 公開版 本編
WebRTCの技術解説 第二版 公開版 本編
WebRTC SFU mediasoup sample
WebRTC SFU mediasoup sample
いまどき(これから)のPHP開発
いまどき(これから)のPHP開発
プロが解説!Hinemosによる運用管理テクニック!
プロが解説!Hinemosによる運用管理テクニック!
第21回関西PHP勉強会 ReactPHPは もっと流行って欲しい #phpkansai
第21回関西PHP勉強会 ReactPHPは もっと流行って欲しい #phpkansai
とにかく分かりづらいTwelve-Factor Appの解説を試みる
とにかく分かりづらいTwelve-Factor Appの解説を試みる
Dockerの期待と現実~Docker都市伝説はなぜ生まれるのか~
Dockerの期待と現実~Docker都市伝説はなぜ生まれるのか~
PHP の GC の話
PHP の GC の話
WebRTCハンズオン
WebRTCハンズオン
TRICK 2022 Results
TRICK 2022 Results
nginx入門
nginx入門
スマホアプリ開発者のためのWeb api開発入門の入門
スマホアプリ開発者のためのWeb api開発入門の入門
Similar to WebRTCとPeer.jsを使った実装
WebRTCについて
WebRTCについて
shotamoriwaki
ビデオ通話・P2Pがコモディティ化する世界 WebRTCによるこれからを探る
ビデオ通話・P2Pがコモディティ化する世界 WebRTCによるこれからを探る
Kensaku Komatsu
Magic Leap で WebRTC 触ってみた
Magic Leap で WebRTC 触ってみた
NishoMatsusita
レポート
レポート
xin song
websocket-survery
websocket-survery
hogemaru_
レポート
レポート
xin song
WebRTC Boot Camp (WebRTC Conference Japan 2016) 事前公開版
WebRTC Boot Camp (WebRTC Conference Japan 2016) 事前公開版
You_Kinjoh
SkyWayで作るボイスチャット
SkyWayで作るボイスチャット
tioken
Vuzix Developer Conference
Vuzix Developer Conference
Keiji Ariyama
はじめてのWeb of Things
はじめてのWeb of Things
Saki Homma
はじめてのWeb of Things
はじめてのWeb of Things
Saki Homma
5jCup WebRTC賞
5jCup WebRTC賞
Yusuke Naka
ひとつひとつ組み上げてみていくビデオチャットアプリのアーキテクチャ
ひとつひとつ組み上げてみていくビデオチャットアプリのアーキテクチャ
Koki Kumagai
WebRTC再び
WebRTC再び
Shigeyuki Takeuchi
WebRTCについて
WebRTCについて
BeMarble
今、本当に“オープン”が必要なそのワケ ブロケードが考えるNFVの今、SDNへの未来とは?
今、本当に“オープン”が必要なそのワケ ブロケードが考えるNFVの今、SDNへの未来とは?
Brocade
WebRTCとORTCについて整理しておこう
WebRTCとORTCについて整理しておこう
彰 村地
10th jan 2013_miyazaki
10th jan 2013_miyazaki
Kensaku Komatsu
JavaプログラマのためのWebSocket概要
JavaプログラマのためのWebSocket概要
Shumpei Shiraishi
Open contrailのご紹介
Open contrailのご紹介
Daisuke Nakajima
Similar to WebRTCとPeer.jsを使った実装
(20)
WebRTCについて
WebRTCについて
ビデオ通話・P2Pがコモディティ化する世界 WebRTCによるこれからを探る
ビデオ通話・P2Pがコモディティ化する世界 WebRTCによるこれからを探る
Magic Leap で WebRTC 触ってみた
Magic Leap で WebRTC 触ってみた
レポート
レポート
websocket-survery
websocket-survery
レポート
レポート
WebRTC Boot Camp (WebRTC Conference Japan 2016) 事前公開版
WebRTC Boot Camp (WebRTC Conference Japan 2016) 事前公開版
SkyWayで作るボイスチャット
SkyWayで作るボイスチャット
Vuzix Developer Conference
Vuzix Developer Conference
はじめてのWeb of Things
はじめてのWeb of Things
はじめてのWeb of Things
はじめてのWeb of Things
5jCup WebRTC賞
5jCup WebRTC賞
ひとつひとつ組み上げてみていくビデオチャットアプリのアーキテクチャ
ひとつひとつ組み上げてみていくビデオチャットアプリのアーキテクチャ
WebRTC再び
WebRTC再び
WebRTCについて
WebRTCについて
今、本当に“オープン”が必要なそのワケ ブロケードが考えるNFVの今、SDNへの未来とは?
今、本当に“オープン”が必要なそのワケ ブロケードが考えるNFVの今、SDNへの未来とは?
WebRTCとORTCについて整理しておこう
WebRTCとORTCについて整理しておこう
10th jan 2013_miyazaki
10th jan 2013_miyazaki
JavaプログラマのためのWebSocket概要
JavaプログラマのためのWebSocket概要
Open contrailのご紹介
Open contrailのご紹介
WebRTCとPeer.jsを使った実装
1.
2.
Profile yuta suzuki
Trifort inc. developer(?) HTML / CSS / Javascript Travel
3.
Agenda WebRTCの概要 ブラウザ間通信の手順
を使った実装 まとめ
4.
WebRTCの概要
5.
WebRTCはリアルタイムWebの 新しいカタチ
6.
従来の通信方法 WebRTC 概要
7.
従来の通信方法 WebRTC 概要
テキストデータ 音声・ビデオ
8.
リアルタイム・コミュニケーション RTCはReal Time
Communicationの略 ブラウザからカメラやマイクを使用 ブラウザ間の双方通信(P2P)を可能にする 概要
9.
対応ブラウザ非対応ブラウザ 2014年8月時点 対応ブラウザ
10.
よくある勘違い
11.
何もしなくても、そこのページに入ったら 自動で通信が開始するんだよね? Case
1 Q
12.
after Case 1
A アクセス時に乱数のidが発行され、それを 相手のブラウザに認識させる必要があります。
13.
Case 2 Q
ブラウザ同士で通信できるってことは サーバーとかネットワークの知識は必要ない?
14.
そんなことはなく、サーバー、 ネットワークの知識は必要です。 Case
2 A
15.
ネットワークのお話
16.
WebRTCはネットワーク上の問題を抱えています
17.
WebRTCのネットワーク問題 PCはNAT配下のプライベートIPアドレスを持つマシンで動いています。その為 そのままでは相手がどこにいるのか分かりません。
プライベートIPアドレスはルーターが割り振っています。 ?
18.
NAT(Network Address Translation)
プライベートIPアドレス 192.168.0.15 グローバルIPアドレス 192.168.0.15 203.0.113.100 PC サーバー 送信元 送信先 203.0.113.100 ルーター サーバー 送信元 送信先 203.0.113.100 198.51.100.20 198.51.100.20
19.
NAT(Network Address Translation)
203.0.113.100 プライベートIPアドレス 192.168.0.15 サーバー グローバルIPアドレス 192.168.0.15 PC 送信元 送信先 203.0.113.100 サーバー ルーター 送信元 送信先 203.0.113.100 198.51.100.20 198.51.100.20
20.
NAT(Network Address Translation)
プライベートIPアドレス? なに、それ???
21.
それを解決する為に、2つのサーバーを使用します
22.
ICEサーバー Signalingサーバー
23.
ICEサーバーとは? ICEはInteractive Connectivity
Establishmentの略です。 NATを越える為に使用するサーバー。 ICEサーバーには、STUNサーバー/TURNサーバーがあります。
24.
STUNサーバー STUNサーバーはSimple Traversal
of UDP through NATsの略 でNATを突破する為に使用するサーバーです。 自分の外側から見た情報(グローバルIP、プライベートIPやポートなど) を取得することができます。 TURNサーバー TURNサーバーはTraversal Using Relay NATの略でSTUNサーバ が繋がらなかった場合に補助として設定している事が多いです。 しかし、パケットがリレーする方式で通信するのでP2P通信ではなく なってしまいます。その為、CPUやネットワークの負荷が高くなりや すい傾向があります。
25.
ICEサーバー Signalingサーバー
26.
Signalingサーバーとは? 相手を見つける為のマッチング用のサーバー。 今回はnode.js、WebSocketで実装。
27.
ブラウザ間通信までの手順
28.
ICEサーバー (STUNサーバー) Signalingサーバー
(WebSocket)
29.
ICEサーバー (STUNサーバー) 自分の
Signalingサーバー (WebSocket) ネットワーク情報 を要求!
30.
ICEサーバー (STUNサーバー) 自分の
Signalingサーバー (WebSocket) ネットワーク情報 を取得!
31.
ICEサーバー (STUNサーバー) Signalingサーバー
(WebSocket) 接続候補情報 を送信!
32.
ICEサーバー (STUNサーバー) Signalingサーバー
(WebSocket) 接続候補情報 を取得!
33.
ICEサーバー (STUNサーバー) Signalingサーバー
(WebSocket) 接続候補情報 を取得!
34.
ICEサーバー (STUNサーバー) Signalingサーバー
(WebSocket) 接続候補情報 を取得! P2P通信開始の オファーを送信!
35.
ICEサーバー (STUNサーバー) Signalingサーバー
(WebSocket) 接続候補情報 オファをー取を得受!信!
36.
ICEサーバー (STUNサーバー) Signalingサーバー
(WebSocket) 接続候補情報 を取得! P2P通信開始の 許可を送信!
37.
ICEサーバー (STUNサーバー) Signalingサーバー
(WebSocket) 接続候補情報 を取得! 許可を受信!
38.
ICEサーバー (STUNサーバー) Signalingサーバー
(WebSocket) 接続候補情報 を取得! P2P通信開始!
39.
を使った実装
40.
とは? WebRTCを利用したP2Pのデータ、ビデオ、 オーディオ通信を簡単に実現することができるライブラリです。
通信状態に影響される繊細な処理を吸収 P2Pの接続できるまでの複雑な処理を簡略化 NTTがこのpeer.jsをベースにしたSkyWayという プラットフォームを開発 最新のVer.は0.3.9
41.
の取得
42.
43.
44.
Peerオブジェクトの作成 var peer
= new Peer({ key: 'xxxxxxxxxx', config: { 'iceServers': [ { url: ‘stun:stun.l.google.com:19302'} ] } });
45.
メディアへの接続 navigator.getUserMedia =
navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia; navigator.getUserMedia( {audio: true, video: true}, function success(stream){ var target = document.getElementById("my-video"); target.src = URL.createObjectURL(stream); window.localStream = stream; }, function error(){ console.log("mediaに接続できません"); } );
46.
P2Pの接続開始 peer.on('open', function(){
socket.emit("sendId",peer.id); });
47.
先に接続している人はsocketで受信 socket.on('connect', function()
{ socket.on(“getId",function(id){ var remoteCall = peer.call(id, window.localStream); remoteCall.on('stream', function(stream){ var video = '<li data-id="' + id + '"><video autoplay src="' + URL.createObjectURL(stream) + '"></ video></li>'; element.innerHTML += video; }); }); });
48.
P2Pのエラーイベント peer.on('error', function(evt){
console.log(evt); });
49.
まとめ
50.
まとめ ブラウザ通信は接続してから行われます。 メディアを起動して接続するまでの仕組みを
含めて、WebRTCです。 WebSocketとWebRTCはよく比較対象に されますが、用途が違います。 IE、Safariの動きに注目。
51.
ご清聴ありがとうございました。
52.
参考 ■ W3C
http://www.w3.org/TR/webrtc/ ! ■ HTML5Experts.jp http://html5experts.jp/mganeko/5554/ ! ■ HTML5rocks http://www.html5rocks.com/ja/tutorials/webrtc/datachannels/ ! ■ tjun memo http://tjun.org/blog/2013/12/webrtc_p2p/ ! ■ NullPointer's Blog http://paulownia.hatenablog.com/entry/20120506/1336324323 ! ■ Publickey http://www.publickey1.jp/blog/12/webrtchtml5_conference_2012.html ! ■ WebブラウザでP 2 Pを実現する WebRTCのAPIと周辺技術 http://www.slideshare.net/yoshiakisugimoto9/webrtc-slide
Download now