SlideShare a Scribd company logo
1 of 12
Download to read offline
WebRTC を利用した
ブラウザキャッシュ共有による
データ配信システム
高知工科大学 情報学群 植田研究室
松下 和生
研究背景
• インターネットトラフィック 急増
– 特にビデオ配信トラフィック
• ネットワーク・サーバー 負荷増大
2
ネットワークトラフィックの削減
目的
P2P Web Proxy – 既存技術
• Web Proxy で通信を中継
– ピア同士で通信
– 通信を限られた NW 内で完結可能
3
キャッシュ を P2P で共有
P2P
Web Proxy
P2P
Web Proxy
Web サーバー
クライアント
P2P Web Proxy - 問題点
• 接続待ち受けが必要
→ セキュリティ上の懸念
• キャッシュの継続保持
→ ストレージ 圧迫
• 別途ソフトウェアが必要
4
既存 P2P Web Proxy には 多数の問題
5
ブラウザの プラグイン として動作
ウェブ
サーバー
シグナリング
サーバー
WebRTC
HTTP
HTTP
概要 (1/2) -
WebRTC を利用したブラウザキャッシュ
共有によるデータ配信システム
ブラウザの機能で通信を実現
• 拡張機能 API の利用
• WebRTC で直接通信
• 別途ソフトウェアが不要に
6
協調ダウンロードでキャッシュ保持不要
ウェブサーバー
• ストレージ圧迫 解消
• ダウンロード中ファイルのみ 共有
→ ダウンロード後 キャッシュを 削除
HTTP
クライアント
同時に DL
概要 (2/2) -
WebRTC を利用したブラウザキャッシュ
共有によるデータ配信システム
WebRTC – 利用技術
• 接続待ち受けが不要に
– 通信時のみ該当ピアでペアリング
• NAT 超えが非常に容易
7
ブラウザ間の 直接通信 が可能
NAT / NAPT
ブラウザ ブラウザ
直接通信
実装 (1/2) -
8
ウェブ
サーバー
シグナリング
サーバー
WebRTC
基本的な機能は全て実装
JavaScript (Node.js)
• ピア情報の管理
ブラウザプラグイン
TypeScript
• HTTP クライアント
• 内部 HTTP サーバー
• WebRTC ノード
HTTP
WebRTC を利用したブラウザキャッシュ
共有によるデータ配信システム
9
Chrome プラグインで通信を中継
内部 HTTP
サーバ
ウェブページ
HTTP
プラグイン
実装 (2/2) -
WebRTC を利用したブラウザキャッシュ
共有によるデータ配信システム
• ウェブサーバーとの通信
→ HTTP
• 他ピアとの通信
→ WebRTC
ウェブサーバー
クライアント
WebRTC
結果 -
• キャッシュの継続保持が不要に
• 外部からの待ち受けが不要に
• 別途のソフトウェアが不要に
10
従来手法に比べ 導入が容易に
WebRTC を利用したブラウザキャッシュ
共有によるデータ配信システム
既存の
問題を解決
結論 -
P2P Web Proxy でトラフィック削減
11
トラフィック削減による負荷減少
トラフィック急増による負荷増大
問題
結果
問題 解決案
帯域・ストレージ圧迫 協調ダウンロード
セキュリティ上の懸念 WebRTC の利用
要 別途ソフトウェア ブラウザプラグイン
実際に実装
WebRTC を利用したブラウザキャッシュ
共有によるデータ配信システム
11
1212
動画ファイルの 協調ダウンロード
ウェブ
サーバー
シグナリング
サーバー
WebRTC
HTTP HTTP
ブラウザ
実演 - WebRTC を利用したブラウザキャッシュ
共有によるデータ配信システム

More Related Content

Viewers also liked

WebRTCでリアル店舗を作ってみる
WebRTCでリアル店舗を作ってみるWebRTCでリアル店舗を作ってみる
WebRTCでリアル店舗を作ってみるJunichi Okamura
 
HTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説
HTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説HTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説
HTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説You_Kinjoh
 
うしちゃん WebRTC Chat on SkyWayの開発コードw
うしちゃん WebRTC Chat on SkyWayの開発コードwうしちゃん WebRTC Chat on SkyWayの開発コードw
うしちゃん WebRTC Chat on SkyWayの開発コードwKensaku Komatsu
 
WebRTCで実現するオンライン英会話の未来
WebRTCで実現するオンライン英会話の未来WebRTCで実現するオンライン英会話の未来
WebRTCで実現するオンライン英会話の未来WebRTCConferenceJapan
 
WebRTCライトニングトークス 〜 WebRTCを色々使ってみた話
WebRTCライトニングトークス 〜 WebRTCを色々使ってみた話WebRTCライトニングトークス 〜 WebRTCを色々使ってみた話
WebRTCライトニングトークス 〜 WebRTCを色々使ってみた話infocom corp.
 
はじめてのWebRTC/ORTC
はじめてのWebRTC/ORTCはじめてのWebRTC/ORTC
はじめてのWebRTC/ORTCYusuke Naka
 
PeerConnectionリレーとMediaRecorder
PeerConnectionリレーとMediaRecorderPeerConnectionリレーとMediaRecorder
PeerConnectionリレーとMediaRecordermganeko
 
MediaRecorder と WebM で、オレオレ Live Streaming
MediaRecorder と WebM で、オレオレ Live StreamingMediaRecorder と WebM で、オレオレ Live Streaming
MediaRecorder と WebM で、オレオレ Live Streamingmganeko
 
スマートフォンでの WebRTC活用
スマートフォンでのWebRTC活用スマートフォンでのWebRTC活用
スマートフォンでの WebRTC活用minamotot
 
WebRTCとPeer.jsを使った実装
WebRTCとPeer.jsを使った実装WebRTCとPeer.jsを使った実装
WebRTCとPeer.jsを使った実装Yuta Suzuki
 
スマホ(Android・iPhone)でWebRTC
スマホ(Android・iPhone)でWebRTCスマホ(Android・iPhone)でWebRTC
スマホ(Android・iPhone)でWebRTCNatsuki Yamanaka
 
ラズパイでWebRTC ヾ(*´∀`*)ノキャッキャ uv4l-webrtc 軽くハックしてみたよ!
ラズパイでWebRTC ヾ(*´∀`*)ノキャッキャ    uv4l-webrtc 軽くハックしてみたよ!ラズパイでWebRTC ヾ(*´∀`*)ノキャッキャ    uv4l-webrtc 軽くハックしてみたよ!
ラズパイでWebRTC ヾ(*´∀`*)ノキャッキャ uv4l-webrtc 軽くハックしてみたよ!Kensaku Komatsu
 
WebブラウザでP2Pを実現する、WebRTCのAPIと周辺技術
WebブラウザでP2Pを実現する、WebRTCのAPIと周辺技術WebブラウザでP2Pを実現する、WebRTCのAPIと周辺技術
WebブラウザでP2Pを実現する、WebRTCのAPIと周辺技術Yoshiaki Sugimoto
 
WebRTCサービスを個人で運営してみた話
WebRTCサービスを個人で運営してみた話WebRTCサービスを個人で運営してみた話
WebRTCサービスを個人で運営してみた話Junki Mizushima
 
色々なデバイスの映像を使ったWebブラウザでのWebRTC映像中継(GotAPIからのWebRTC利用)
色々なデバイスの映像を使ったWebブラウザでのWebRTC映像中継(GotAPIからのWebRTC利用) 色々なデバイスの映像を使ったWebブラウザでのWebRTC映像中継(GotAPIからのWebRTC利用)
色々なデバイスの映像を使ったWebブラウザでのWebRTC映像中継(GotAPIからのWebRTC利用) Device WebAPI Consortium
 
WebRTCの技術解説 公開版
WebRTCの技術解説 公開版WebRTCの技術解説 公開版
WebRTCの技術解説 公開版Contest Ntt-west
 
WebRTC on Edge
WebRTC on EdgeWebRTC on Edge
WebRTC on EdgeSaki Homma
 
WebRTC/ORTCの最新動向まるわかり!
WebRTC/ORTCの最新動向まるわかり!WebRTC/ORTCの最新動向まるわかり!
WebRTC/ORTCの最新動向まるわかり!Yusuke Naka
 
Web of Thingsの現状とWebRTC活用の可能性
Web of Thingsの現状とWebRTC活用の可能性Web of Thingsの現状とWebRTC活用の可能性
Web of Thingsの現状とWebRTC活用の可能性Kensaku Komatsu
 
注目の最新技術「WebRTC」とは? -技術概要と事例紹介-
注目の最新技術「WebRTC」とは? -技術概要と事例紹介-注目の最新技術「WebRTC」とは? -技術概要と事例紹介-
注目の最新技術「WebRTC」とは? -技術概要と事例紹介-Yusuke Naka
 

Viewers also liked (20)

WebRTCでリアル店舗を作ってみる
WebRTCでリアル店舗を作ってみるWebRTCでリアル店舗を作ってみる
WebRTCでリアル店舗を作ってみる
 
HTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説
HTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説HTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説
HTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説
 
うしちゃん WebRTC Chat on SkyWayの開発コードw
うしちゃん WebRTC Chat on SkyWayの開発コードwうしちゃん WebRTC Chat on SkyWayの開発コードw
うしちゃん WebRTC Chat on SkyWayの開発コードw
 
WebRTCで実現するオンライン英会話の未来
WebRTCで実現するオンライン英会話の未来WebRTCで実現するオンライン英会話の未来
WebRTCで実現するオンライン英会話の未来
 
WebRTCライトニングトークス 〜 WebRTCを色々使ってみた話
WebRTCライトニングトークス 〜 WebRTCを色々使ってみた話WebRTCライトニングトークス 〜 WebRTCを色々使ってみた話
WebRTCライトニングトークス 〜 WebRTCを色々使ってみた話
 
はじめてのWebRTC/ORTC
はじめてのWebRTC/ORTCはじめてのWebRTC/ORTC
はじめてのWebRTC/ORTC
 
PeerConnectionリレーとMediaRecorder
PeerConnectionリレーとMediaRecorderPeerConnectionリレーとMediaRecorder
PeerConnectionリレーとMediaRecorder
 
MediaRecorder と WebM で、オレオレ Live Streaming
MediaRecorder と WebM で、オレオレ Live StreamingMediaRecorder と WebM で、オレオレ Live Streaming
MediaRecorder と WebM で、オレオレ Live Streaming
 
スマートフォンでの WebRTC活用
スマートフォンでのWebRTC活用スマートフォンでのWebRTC活用
スマートフォンでの WebRTC活用
 
WebRTCとPeer.jsを使った実装
WebRTCとPeer.jsを使った実装WebRTCとPeer.jsを使った実装
WebRTCとPeer.jsを使った実装
 
スマホ(Android・iPhone)でWebRTC
スマホ(Android・iPhone)でWebRTCスマホ(Android・iPhone)でWebRTC
スマホ(Android・iPhone)でWebRTC
 
ラズパイでWebRTC ヾ(*´∀`*)ノキャッキャ uv4l-webrtc 軽くハックしてみたよ!
ラズパイでWebRTC ヾ(*´∀`*)ノキャッキャ    uv4l-webrtc 軽くハックしてみたよ!ラズパイでWebRTC ヾ(*´∀`*)ノキャッキャ    uv4l-webrtc 軽くハックしてみたよ!
ラズパイでWebRTC ヾ(*´∀`*)ノキャッキャ uv4l-webrtc 軽くハックしてみたよ!
 
WebブラウザでP2Pを実現する、WebRTCのAPIと周辺技術
WebブラウザでP2Pを実現する、WebRTCのAPIと周辺技術WebブラウザでP2Pを実現する、WebRTCのAPIと周辺技術
WebブラウザでP2Pを実現する、WebRTCのAPIと周辺技術
 
WebRTCサービスを個人で運営してみた話
WebRTCサービスを個人で運営してみた話WebRTCサービスを個人で運営してみた話
WebRTCサービスを個人で運営してみた話
 
色々なデバイスの映像を使ったWebブラウザでのWebRTC映像中継(GotAPIからのWebRTC利用)
色々なデバイスの映像を使ったWebブラウザでのWebRTC映像中継(GotAPIからのWebRTC利用) 色々なデバイスの映像を使ったWebブラウザでのWebRTC映像中継(GotAPIからのWebRTC利用)
色々なデバイスの映像を使ったWebブラウザでのWebRTC映像中継(GotAPIからのWebRTC利用)
 
WebRTCの技術解説 公開版
WebRTCの技術解説 公開版WebRTCの技術解説 公開版
WebRTCの技術解説 公開版
 
WebRTC on Edge
WebRTC on EdgeWebRTC on Edge
WebRTC on Edge
 
WebRTC/ORTCの最新動向まるわかり!
WebRTC/ORTCの最新動向まるわかり!WebRTC/ORTCの最新動向まるわかり!
WebRTC/ORTCの最新動向まるわかり!
 
Web of Thingsの現状とWebRTC活用の可能性
Web of Thingsの現状とWebRTC活用の可能性Web of Thingsの現状とWebRTC活用の可能性
Web of Thingsの現状とWebRTC活用の可能性
 
注目の最新技術「WebRTC」とは? -技術概要と事例紹介-
注目の最新技術「WebRTC」とは? -技術概要と事例紹介-注目の最新技術「WebRTC」とは? -技術概要と事例紹介-
注目の最新技術「WebRTC」とは? -技術概要と事例紹介-
 

Similar to WebRTC を利用したブラウザキャッシュ共有によるデータ配信システム

websocket-survery
websocket-surverywebsocket-survery
websocket-surveryhogemaru_
 
2012/6/10 Webのパフォーマンスを考える @ 【第三回】初心者向けホームページ勉強会
2012/6/10 Webのパフォーマンスを考える @ 【第三回】初心者向けホームページ勉強会2012/6/10 Webのパフォーマンスを考える @ 【第三回】初心者向けホームページ勉強会
2012/6/10 Webのパフォーマンスを考える @ 【第三回】初心者向けホームページ勉強会tama200x Kobayashi
 
KDL主催セミナー 20120215
KDL主催セミナー 20120215KDL主催セミナー 20120215
KDL主催セミナー 20120215Hiroshi Bunya
 
okuyama 勉強会 20110928
okuyama 勉強会 20110928okuyama 勉強会 20110928
okuyama 勉強会 20110928Hiroshi Bunya
 
これから利用拡大?WebSocket
これから利用拡大?WebSocketこれから利用拡大?WebSocket
これから利用拡大?WebSocketAdvancedTechNight
 
Janogia20120921 yoshinotakeshi
Janogia20120921 yoshinotakeshiJanogia20120921 yoshinotakeshi
Janogia20120921 yoshinotakeshiKeisuke Ishibashi
 
Webとは何か
Webとは何かWebとは何か
Webとは何かteracchi
 
ブラウザからWeb OSへ〜Web - TV連携事例からその可能性を探る〜
ブラウザからWeb OSへ〜Web - TV連携事例からその可能性を探る〜ブラウザからWeb OSへ〜Web - TV連携事例からその可能性を探る〜
ブラウザからWeb OSへ〜Web - TV連携事例からその可能性を探る〜Kensaku Komatsu
 
第2章アーキテクチャ
第2章アーキテクチャ第2章アーキテクチャ
第2章アーキテクチャKenta Hattori
 
SFUの話
SFUの話SFUの話
SFUの話tnoho
 
Lesson01
Lesson01Lesson01
Lesson01MRI
 
at+link サービスセミナー 20111209
at+link サービスセミナー 20111209at+link サービスセミナー 20111209
at+link サービスセミナー 20111209Hiroshi Bunya
 
今、本当に“オープン”が必要なそのワケ ブロケードが考えるNFVの今、SDNへの未来とは?
今、本当に“オープン”が必要なそのワケ ブロケードが考えるNFVの今、SDNへの未来とは?今、本当に“オープン”が必要なそのワケ ブロケードが考えるNFVの今、SDNへの未来とは?
今、本当に“オープン”が必要なそのワケ ブロケードが考えるNFVの今、SDNへの未来とは?Brocade
 
Armored core vのオンラインサービスにおけるクラウドサーバー活用事例
Armored core vのオンラインサービスにおけるクラウドサーバー活用事例Armored core vのオンラインサービスにおけるクラウドサーバー活用事例
Armored core vのオンラインサービスにおけるクラウドサーバー活用事例erakazu
 
Windows × ネットワーク! 更新プログラムの展開に使える ネットワークの最適化機能をマスターしよう
Windows × ネットワーク!  更新プログラムの展開に使える ネットワークの最適化機能をマスターしようWindows × ネットワーク!  更新プログラムの展開に使える ネットワークの最適化機能をマスターしよう
Windows × ネットワーク! 更新プログラムの展開に使える ネットワークの最適化機能をマスターしようTAKUYA OHTA
 
OpenStackやりたい人、必見!ネットワークから見たOpenStack導入のヒント
OpenStackやりたい人、必見!ネットワークから見たOpenStack導入のヒントOpenStackやりたい人、必見!ネットワークから見たOpenStack導入のヒント
OpenStackやりたい人、必見!ネットワークから見たOpenStack導入のヒントBrocade
 
クラウドサービスを使って作る動画サイト?
クラウドサービスを使って作る動画サイト?クラウドサービスを使って作る動画サイト?
クラウドサービスを使って作る動画サイト?Daichi Isami
 

Similar to WebRTC を利用したブラウザキャッシュ共有によるデータ配信システム (20)

websocket-survery
websocket-surverywebsocket-survery
websocket-survery
 
2012/6/10 Webのパフォーマンスを考える @ 【第三回】初心者向けホームページ勉強会
2012/6/10 Webのパフォーマンスを考える @ 【第三回】初心者向けホームページ勉強会2012/6/10 Webのパフォーマンスを考える @ 【第三回】初心者向けホームページ勉強会
2012/6/10 Webのパフォーマンスを考える @ 【第三回】初心者向けホームページ勉強会
 
KDL主催セミナー 20120215
KDL主催セミナー 20120215KDL主催セミナー 20120215
KDL主催セミナー 20120215
 
okuyama 勉強会 20110928
okuyama 勉強会 20110928okuyama 勉強会 20110928
okuyama 勉強会 20110928
 
これから利用拡大?WebSocket
これから利用拡大?WebSocketこれから利用拡大?WebSocket
これから利用拡大?WebSocket
 
Janogia20120921 yoshinotakeshi
Janogia20120921 yoshinotakeshiJanogia20120921 yoshinotakeshi
Janogia20120921 yoshinotakeshi
 
Webとは何か
Webとは何かWebとは何か
Webとは何か
 
ブラウザからWeb OSへ〜Web - TV連携事例からその可能性を探る〜
ブラウザからWeb OSへ〜Web - TV連携事例からその可能性を探る〜ブラウザからWeb OSへ〜Web - TV連携事例からその可能性を探る〜
ブラウザからWeb OSへ〜Web - TV連携事例からその可能性を探る〜
 
第2章アーキテクチャ
第2章アーキテクチャ第2章アーキテクチャ
第2章アーキテクチャ
 
SFUの話
SFUの話SFUの話
SFUの話
 
Lesson01
Lesson01Lesson01
Lesson01
 
Perl Ocean
Perl OceanPerl Ocean
Perl Ocean
 
at+link サービスセミナー 20111209
at+link サービスセミナー 20111209at+link サービスセミナー 20111209
at+link サービスセミナー 20111209
 
今、本当に“オープン”が必要なそのワケ ブロケードが考えるNFVの今、SDNへの未来とは?
今、本当に“オープン”が必要なそのワケ ブロケードが考えるNFVの今、SDNへの未来とは?今、本当に“オープン”が必要なそのワケ ブロケードが考えるNFVの今、SDNへの未来とは?
今、本当に“オープン”が必要なそのワケ ブロケードが考えるNFVの今、SDNへの未来とは?
 
OSC 2012 Fukuoka
OSC 2012 FukuokaOSC 2012 Fukuoka
OSC 2012 Fukuoka
 
Armored core vのオンラインサービスにおけるクラウドサーバー活用事例
Armored core vのオンラインサービスにおけるクラウドサーバー活用事例Armored core vのオンラインサービスにおけるクラウドサーバー活用事例
Armored core vのオンラインサービスにおけるクラウドサーバー活用事例
 
10th jan 2013_miyazaki
10th jan 2013_miyazaki10th jan 2013_miyazaki
10th jan 2013_miyazaki
 
Windows × ネットワーク! 更新プログラムの展開に使える ネットワークの最適化機能をマスターしよう
Windows × ネットワーク!  更新プログラムの展開に使える ネットワークの最適化機能をマスターしようWindows × ネットワーク!  更新プログラムの展開に使える ネットワークの最適化機能をマスターしよう
Windows × ネットワーク! 更新プログラムの展開に使える ネットワークの最適化機能をマスターしよう
 
OpenStackやりたい人、必見!ネットワークから見たOpenStack導入のヒント
OpenStackやりたい人、必見!ネットワークから見たOpenStack導入のヒントOpenStackやりたい人、必見!ネットワークから見たOpenStack導入のヒント
OpenStackやりたい人、必見!ネットワークから見たOpenStack導入のヒント
 
クラウドサービスを使って作る動画サイト?
クラウドサービスを使って作る動画サイト?クラウドサービスを使って作る動画サイト?
クラウドサービスを使って作る動画サイト?
 

WebRTC を利用したブラウザキャッシュ共有によるデータ配信システム