Submit Search
Upload
WebRTCとPeer.jsを使った実装
•
16 likes
•
7,627 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
SFUの話
SFUの話
tnoho
WebSocket / WebRTCの技術紹介
WebSocket / WebRTCの技術紹介
Yasuhiro Mawarimichi
MQ入門
MQ入門
HIRA
nginx入門
nginx入門
Takashi Takizawa
MySQL 5.7にやられないためにおぼえておいてほしいこと
MySQL 5.7にやられないためにおぼえておいてほしいこと
yoku0825
マイクロにしすぎた結果がこれだよ!
マイクロにしすぎた結果がこれだよ!
mosa siru
TLS 1.3 と 0-RTT のこわ〜い話
TLS 1.3 と 0-RTT のこわ〜い話
Kazuho Oku
JavaScriptの仕組みと未来のJavaScript ~ESNextとは~
JavaScriptの仕組みと未来のJavaScript ~ESNextとは~
Yuki Hirano
Recommended
SFUの話
SFUの話
tnoho
WebSocket / WebRTCの技術紹介
WebSocket / WebRTCの技術紹介
Yasuhiro Mawarimichi
MQ入門
MQ入門
HIRA
nginx入門
nginx入門
Takashi Takizawa
MySQL 5.7にやられないためにおぼえておいてほしいこと
MySQL 5.7にやられないためにおぼえておいてほしいこと
yoku0825
マイクロにしすぎた結果がこれだよ!
マイクロにしすぎた結果がこれだよ!
mosa siru
TLS 1.3 と 0-RTT のこわ〜い話
TLS 1.3 と 0-RTT のこわ〜い話
Kazuho Oku
JavaScriptの仕組みと未来のJavaScript ~ESNextとは~
JavaScriptの仕組みと未来のJavaScript ~ESNextとは~
Yuki Hirano
大規模ソーシャルゲーム開発から学んだPHP&MySQL実践テクニック
大規模ソーシャルゲーム開発から学んだPHP&MySQL実践テクニック
infinite_loop
IoT時代におけるストリームデータ処理と急成長の Apache Flink
IoT時代におけるストリームデータ処理と急成長の Apache Flink
Takanori Suzuki
ServiceMesh と仲間たち 〜Istio & Conduit & Linkerd〜 @Cloud Native Meetup Tokyo #1
ServiceMesh と仲間たち 〜Istio & Conduit & Linkerd〜 @Cloud Native Meetup Tokyo #1
Masaya Aoyama
Istioサービスメッシュ入門
Istioサービスメッシュ入門
Yoichi Kawasaki
Amazon Aurora - Auroraの止まらない進化とその中身
Amazon Aurora - Auroraの止まらない進化とその中身
Amazon Web Services Japan
MHA for MySQLとDeNAのオープンソースの話
MHA for MySQLとDeNAのオープンソースの話
Yoshinori Matsunobu
やってはいけない空振りDelete
やってはいけない空振りDelete
Yu Yamada
JJUG CCC 2018 Spring - I-7 (俺が)はじめての Netty
JJUG CCC 2018 Spring - I-7 (俺が)はじめての Netty
Shinya Mochida
Githubを使って簡単に helm repoを公開してみよう
Githubを使って簡単に helm repoを公開してみよう
Shingo Omura
インターネットの仕組みとISPの構造
インターネットの仕組みとISPの構造
Taiji Tsuchiya
Kinesis + Elasticsearchでつくるさいきょうのログ分析基盤
Kinesis + Elasticsearchでつくるさいきょうのログ分析基盤
Amazon Web Services Japan
AWSのログ管理ベストプラクティス
AWSのログ管理ベストプラクティス
Akihiro Kuwano
マルチテナントのアプリケーション実装〜実践編〜
マルチテナントのアプリケーション実装〜実践編〜
Yoshiki Nakagawa
TLS, HTTP/2演習
TLS, HTTP/2演習
shigeki_ohtsu
SolrとElasticsearchを比べてみよう
SolrとElasticsearchを比べてみよう
Shinsuke Sugaya
Ingressの概要とLoadBalancerとの比較
Ingressの概要とLoadBalancerとの比較
Mei Nakamura
クラウド環境下におけるAPIリトライ設計
クラウド環境下におけるAPIリトライ設計
Kouji YAMADA
SQLアンチパターン 幻の第26章「とりあえず削除フラグ」
SQLアンチパターン 幻の第26章「とりあえず削除フラグ」
Takuto Wada
モノリスからマイクロサービスへの移行 ~ストラングラーパターンの検証~(Spring Fest 2020講演資料)
モノリスからマイクロサービスへの移行 ~ストラングラーパターンの検証~(Spring Fest 2020講演資料)
NTT DATA Technology & Innovation
ストリーム処理を支えるキューイングシステムの選び方
ストリーム処理を支えるキューイングシステムの選び方
Yoshiyasu SAEKI
WebRTCについて
WebRTCについて
shotamoriwaki
ビデオ通話・P2Pがコモディティ化する世界 WebRTCによるこれからを探る
ビデオ通話・P2Pがコモディティ化する世界 WebRTCによるこれからを探る
Kensaku Komatsu
More Related Content
What's hot
大規模ソーシャルゲーム開発から学んだPHP&MySQL実践テクニック
大規模ソーシャルゲーム開発から学んだPHP&MySQL実践テクニック
infinite_loop
IoT時代におけるストリームデータ処理と急成長の Apache Flink
IoT時代におけるストリームデータ処理と急成長の Apache Flink
Takanori Suzuki
ServiceMesh と仲間たち 〜Istio & Conduit & Linkerd〜 @Cloud Native Meetup Tokyo #1
ServiceMesh と仲間たち 〜Istio & Conduit & Linkerd〜 @Cloud Native Meetup Tokyo #1
Masaya Aoyama
Istioサービスメッシュ入門
Istioサービスメッシュ入門
Yoichi Kawasaki
Amazon Aurora - Auroraの止まらない進化とその中身
Amazon Aurora - Auroraの止まらない進化とその中身
Amazon Web Services Japan
MHA for MySQLとDeNAのオープンソースの話
MHA for MySQLとDeNAのオープンソースの話
Yoshinori Matsunobu
やってはいけない空振りDelete
やってはいけない空振りDelete
Yu Yamada
JJUG CCC 2018 Spring - I-7 (俺が)はじめての Netty
JJUG CCC 2018 Spring - I-7 (俺が)はじめての Netty
Shinya Mochida
Githubを使って簡単に helm repoを公開してみよう
Githubを使って簡単に helm repoを公開してみよう
Shingo Omura
インターネットの仕組みとISPの構造
インターネットの仕組みとISPの構造
Taiji Tsuchiya
Kinesis + Elasticsearchでつくるさいきょうのログ分析基盤
Kinesis + Elasticsearchでつくるさいきょうのログ分析基盤
Amazon Web Services Japan
AWSのログ管理ベストプラクティス
AWSのログ管理ベストプラクティス
Akihiro Kuwano
マルチテナントのアプリケーション実装〜実践編〜
マルチテナントのアプリケーション実装〜実践編〜
Yoshiki Nakagawa
TLS, HTTP/2演習
TLS, HTTP/2演習
shigeki_ohtsu
SolrとElasticsearchを比べてみよう
SolrとElasticsearchを比べてみよう
Shinsuke Sugaya
Ingressの概要とLoadBalancerとの比較
Ingressの概要とLoadBalancerとの比較
Mei Nakamura
クラウド環境下におけるAPIリトライ設計
クラウド環境下におけるAPIリトライ設計
Kouji YAMADA
SQLアンチパターン 幻の第26章「とりあえず削除フラグ」
SQLアンチパターン 幻の第26章「とりあえず削除フラグ」
Takuto Wada
モノリスからマイクロサービスへの移行 ~ストラングラーパターンの検証~(Spring Fest 2020講演資料)
モノリスからマイクロサービスへの移行 ~ストラングラーパターンの検証~(Spring Fest 2020講演資料)
NTT DATA Technology & Innovation
ストリーム処理を支えるキューイングシステムの選び方
ストリーム処理を支えるキューイングシステムの選び方
Yoshiyasu SAEKI
What's hot
(20)
大規模ソーシャルゲーム開発から学んだPHP&MySQL実践テクニック
大規模ソーシャルゲーム開発から学んだPHP&MySQL実践テクニック
IoT時代におけるストリームデータ処理と急成長の Apache Flink
IoT時代におけるストリームデータ処理と急成長の Apache Flink
ServiceMesh と仲間たち 〜Istio & Conduit & Linkerd〜 @Cloud Native Meetup Tokyo #1
ServiceMesh と仲間たち 〜Istio & Conduit & Linkerd〜 @Cloud Native Meetup Tokyo #1
Istioサービスメッシュ入門
Istioサービスメッシュ入門
Amazon Aurora - Auroraの止まらない進化とその中身
Amazon Aurora - Auroraの止まらない進化とその中身
MHA for MySQLとDeNAのオープンソースの話
MHA for MySQLとDeNAのオープンソースの話
やってはいけない空振りDelete
やってはいけない空振りDelete
JJUG CCC 2018 Spring - I-7 (俺が)はじめての Netty
JJUG CCC 2018 Spring - I-7 (俺が)はじめての Netty
Githubを使って簡単に helm repoを公開してみよう
Githubを使って簡単に helm repoを公開してみよう
インターネットの仕組みとISPの構造
インターネットの仕組みとISPの構造
Kinesis + Elasticsearchでつくるさいきょうのログ分析基盤
Kinesis + Elasticsearchでつくるさいきょうのログ分析基盤
AWSのログ管理ベストプラクティス
AWSのログ管理ベストプラクティス
マルチテナントのアプリケーション実装〜実践編〜
マルチテナントのアプリケーション実装〜実践編〜
TLS, HTTP/2演習
TLS, HTTP/2演習
SolrとElasticsearchを比べてみよう
SolrとElasticsearchを比べてみよう
Ingressの概要とLoadBalancerとの比較
Ingressの概要とLoadBalancerとの比較
クラウド環境下におけるAPIリトライ設計
クラウド環境下におけるAPIリトライ設計
SQLアンチパターン 幻の第26章「とりあえず削除フラグ」
SQLアンチパターン 幻の第26章「とりあえず削除フラグ」
モノリスからマイクロサービスへの移行 ~ストラングラーパターンの検証~(Spring Fest 2020講演資料)
モノリスからマイクロサービスへの移行 ~ストラングラーパターンの検証~(Spring Fest 2020講演資料)
ストリーム処理を支えるキューイングシステムの選び方
ストリーム処理を支えるキューイングシステムの選び方
Similar to WebRTCとPeer.jsを使った実装
WebRTCについて
WebRTCについて
shotamoriwaki
ビデオ通話・P2Pがコモディティ化する世界 WebRTCによるこれからを探る
ビデオ通話・P2Pがコモディティ化する世界 WebRTCによるこれからを探る
Kensaku Komatsu
WebRTCの技術解説 第二版 公開版 本編
WebRTCの技術解説 第二版 公開版 本編
Contest Ntt-west
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
5分でわかるWebRTCの仕組み - html5minutes vol.01
5分でわかるWebRTCの仕組み - html5minutes vol.01
西畑 一馬
はじめての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
Similar to WebRTCとPeer.jsを使った実装
(20)
WebRTCについて
WebRTCについて
ビデオ通話・P2Pがコモディティ化する世界 WebRTCによるこれからを探る
ビデオ通話・P2Pがコモディティ化する世界 WebRTCによるこれからを探る
WebRTCの技術解説 第二版 公開版 本編
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
5分でわかるWebRTCの仕組み - html5minutes vol.01
5分でわかるWebRTCの仕組み - html5minutes vol.01
はじめての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
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