Submit Search
Upload
5分でわかるWebRTCの仕組み - html5minutes vol.01
•
17 likes
•
8,534 views
西畑 一馬
Follow
html5minutes vol.01で発表したスライドです。
Read less
Read more
Technology
Report
Share
Report
Share
1 of 38
Download now
Download to read offline
Recommended
コンテナ未経験新人が学ぶコンテナ技術入門
コンテナ未経験新人が学ぶコンテナ技術入門
Kohei Tokunaga
SPAセキュリティ入門~PHP Conference Japan 2021
SPAセキュリティ入門~PHP Conference Japan 2021
Hiroshi Tokumaru
分散システムについて語らせてくれ
分散システムについて語らせてくれ
Kumazaki Hiroki
Spannerに関する技術メモ
Spannerに関する技術メモ
Etsuji Nakai
ネットワーク ゲームにおけるTCPとUDPの使い分け
ネットワーク ゲームにおけるTCPとUDPの使い分け
モノビット エンジン
Dockerからcontainerdへの移行
Dockerからcontainerdへの移行
Kohei Tokunaga
開発速度が速い #とは(LayerX社内資料)
開発速度が速い #とは(LayerX社内資料)
mosa siru
Dockerからcontainerdへの移行
Dockerからcontainerdへの移行
Akihiro Suda
Recommended
コンテナ未経験新人が学ぶコンテナ技術入門
コンテナ未経験新人が学ぶコンテナ技術入門
Kohei Tokunaga
SPAセキュリティ入門~PHP Conference Japan 2021
SPAセキュリティ入門~PHP Conference Japan 2021
Hiroshi Tokumaru
分散システムについて語らせてくれ
分散システムについて語らせてくれ
Kumazaki Hiroki
Spannerに関する技術メモ
Spannerに関する技術メモ
Etsuji Nakai
ネットワーク ゲームにおけるTCPとUDPの使い分け
ネットワーク ゲームにおけるTCPとUDPの使い分け
モノビット エンジン
Dockerからcontainerdへの移行
Dockerからcontainerdへの移行
Kohei Tokunaga
開発速度が速い #とは(LayerX社内資料)
開発速度が速い #とは(LayerX社内資料)
mosa siru
Dockerからcontainerdへの移行
Dockerからcontainerdへの移行
Akihiro Suda
root権限無しでKubernetesを動かす
root権限無しでKubernetesを動かす
Akihiro Suda
WebSocketでカメラの映像を共有してみた
WebSocketでカメラの映像を共有してみた
onozaty
[C16] インメモリ分散KVSの弱点。一貫性が崩れる原因と、それを克服する技術とは? by Taichi Umeda
[C16] インメモリ分散KVSの弱点。一貫性が崩れる原因と、それを克服する技術とは? by Taichi Umeda
Insight Technology, Inc.
20分でわかるgVisor入門
20分でわかるgVisor入門
Shuji Yamada
At least onceってぶっちゃけ問題の先送りだったよね #kafkajp
At least onceってぶっちゃけ問題の先送りだったよね #kafkajp
Yahoo!デベロッパーネットワーク
Cloud runのオートスケールを検証してみる
Cloud runのオートスケールを検証してみる
虎の穴 開発室
WebSocket / WebRTCの技術紹介
WebSocket / WebRTCの技術紹介
Yasuhiro Mawarimichi
Docker Tokyo
Docker Tokyo
cyberblack28 Ichikawa
マイクロにしすぎた結果がこれだよ!
マイクロにしすぎた結果がこれだよ!
mosa siru
バイトコードって言葉をよく目にするけど一体何なんだろう?(JJUG CCC 2022 Spring 発表資料)
バイトコードって言葉をよく目にするけど一体何なんだろう?(JJUG CCC 2022 Spring 発表資料)
NTT DATA Technology & Innovation
乗っ取れコンテナ!!開発者から見たコンテナセキュリティの考え方(CloudNative Days Tokyo 2021 発表資料)
乗っ取れコンテナ!!開発者から見たコンテナセキュリティの考え方(CloudNative Days Tokyo 2021 発表資料)
NTT DATA Technology & Innovation
WFSにおけるCloud SpannerとGKEを中心としたGCP導入事例の紹介
WFSにおけるCloud SpannerとGKEを中心としたGCP導入事例の紹介
gree_tech
Dockerイメージの理解とコンテナのライフサイクル
Dockerイメージの理解とコンテナのライフサイクル
Masahito Zembutsu
AWSのログ管理ベストプラクティス
AWSのログ管理ベストプラクティス
Akihiro Kuwano
コンテナを突き破れ!! ~コンテナセキュリティ入門基礎の基礎~(Kubernetes Novice Tokyo #11 発表資料)
コンテナを突き破れ!! ~コンテナセキュリティ入門基礎の基礎~(Kubernetes Novice Tokyo #11 発表資料)
NTT DATA Technology & Innovation
katagaitai CTF勉強会 #5 Crypto
katagaitai CTF勉強会 #5 Crypto
trmr
並行処理初心者のためのAkka入門
並行処理初心者のためのAkka入門
Yoshimura Soichiro
GitHubの機能を活用したGitHub Flowによる開発の進め方
GitHubの機能を活用したGitHub Flowによる開発の進め方
Takeshi Mikami
CSI Driverを開発し自社プライベートクラウドにより適した安全なKubernetes Secrets管理を実現した話
CSI Driverを開発し自社プライベートクラウドにより適した安全なKubernetes Secrets管理を実現した話
Katsuya Yamaguchi
コンテナにおけるパフォーマンス調査でハマった話
コンテナにおけるパフォーマンス調査でハマった話
Yuta Shimada
ビデオ通話・P2Pがコモディティ化する世界 WebRTCによるこれからを探る
ビデオ通話・P2Pがコモディティ化する世界 WebRTCによるこれからを探る
Kensaku Komatsu
ひとつひとつ組み上げてみていくビデオチャットアプリのアーキテクチャ
ひとつひとつ組み上げてみていくビデオチャットアプリのアーキテクチャ
Koki Kumagai
More Related Content
What's hot
root権限無しでKubernetesを動かす
root権限無しでKubernetesを動かす
Akihiro Suda
WebSocketでカメラの映像を共有してみた
WebSocketでカメラの映像を共有してみた
onozaty
[C16] インメモリ分散KVSの弱点。一貫性が崩れる原因と、それを克服する技術とは? by Taichi Umeda
[C16] インメモリ分散KVSの弱点。一貫性が崩れる原因と、それを克服する技術とは? by Taichi Umeda
Insight Technology, Inc.
20分でわかるgVisor入門
20分でわかるgVisor入門
Shuji Yamada
At least onceってぶっちゃけ問題の先送りだったよね #kafkajp
At least onceってぶっちゃけ問題の先送りだったよね #kafkajp
Yahoo!デベロッパーネットワーク
Cloud runのオートスケールを検証してみる
Cloud runのオートスケールを検証してみる
虎の穴 開発室
WebSocket / WebRTCの技術紹介
WebSocket / WebRTCの技術紹介
Yasuhiro Mawarimichi
Docker Tokyo
Docker Tokyo
cyberblack28 Ichikawa
マイクロにしすぎた結果がこれだよ!
マイクロにしすぎた結果がこれだよ!
mosa siru
バイトコードって言葉をよく目にするけど一体何なんだろう?(JJUG CCC 2022 Spring 発表資料)
バイトコードって言葉をよく目にするけど一体何なんだろう?(JJUG CCC 2022 Spring 発表資料)
NTT DATA Technology & Innovation
乗っ取れコンテナ!!開発者から見たコンテナセキュリティの考え方(CloudNative Days Tokyo 2021 発表資料)
乗っ取れコンテナ!!開発者から見たコンテナセキュリティの考え方(CloudNative Days Tokyo 2021 発表資料)
NTT DATA Technology & Innovation
WFSにおけるCloud SpannerとGKEを中心としたGCP導入事例の紹介
WFSにおけるCloud SpannerとGKEを中心としたGCP導入事例の紹介
gree_tech
Dockerイメージの理解とコンテナのライフサイクル
Dockerイメージの理解とコンテナのライフサイクル
Masahito Zembutsu
AWSのログ管理ベストプラクティス
AWSのログ管理ベストプラクティス
Akihiro Kuwano
コンテナを突き破れ!! ~コンテナセキュリティ入門基礎の基礎~(Kubernetes Novice Tokyo #11 発表資料)
コンテナを突き破れ!! ~コンテナセキュリティ入門基礎の基礎~(Kubernetes Novice Tokyo #11 発表資料)
NTT DATA Technology & Innovation
katagaitai CTF勉強会 #5 Crypto
katagaitai CTF勉強会 #5 Crypto
trmr
並行処理初心者のためのAkka入門
並行処理初心者のためのAkka入門
Yoshimura Soichiro
GitHubの機能を活用したGitHub Flowによる開発の進め方
GitHubの機能を活用したGitHub Flowによる開発の進め方
Takeshi Mikami
CSI Driverを開発し自社プライベートクラウドにより適した安全なKubernetes Secrets管理を実現した話
CSI Driverを開発し自社プライベートクラウドにより適した安全なKubernetes Secrets管理を実現した話
Katsuya Yamaguchi
コンテナにおけるパフォーマンス調査でハマった話
コンテナにおけるパフォーマンス調査でハマった話
Yuta Shimada
What's hot
(20)
root権限無しでKubernetesを動かす
root権限無しでKubernetesを動かす
WebSocketでカメラの映像を共有してみた
WebSocketでカメラの映像を共有してみた
[C16] インメモリ分散KVSの弱点。一貫性が崩れる原因と、それを克服する技術とは? by Taichi Umeda
[C16] インメモリ分散KVSの弱点。一貫性が崩れる原因と、それを克服する技術とは? by Taichi Umeda
20分でわかるgVisor入門
20分でわかるgVisor入門
At least onceってぶっちゃけ問題の先送りだったよね #kafkajp
At least onceってぶっちゃけ問題の先送りだったよね #kafkajp
Cloud runのオートスケールを検証してみる
Cloud runのオートスケールを検証してみる
WebSocket / WebRTCの技術紹介
WebSocket / WebRTCの技術紹介
Docker Tokyo
Docker Tokyo
マイクロにしすぎた結果がこれだよ!
マイクロにしすぎた結果がこれだよ!
バイトコードって言葉をよく目にするけど一体何なんだろう?(JJUG CCC 2022 Spring 発表資料)
バイトコードって言葉をよく目にするけど一体何なんだろう?(JJUG CCC 2022 Spring 発表資料)
乗っ取れコンテナ!!開発者から見たコンテナセキュリティの考え方(CloudNative Days Tokyo 2021 発表資料)
乗っ取れコンテナ!!開発者から見たコンテナセキュリティの考え方(CloudNative Days Tokyo 2021 発表資料)
WFSにおけるCloud SpannerとGKEを中心としたGCP導入事例の紹介
WFSにおけるCloud SpannerとGKEを中心としたGCP導入事例の紹介
Dockerイメージの理解とコンテナのライフサイクル
Dockerイメージの理解とコンテナのライフサイクル
AWSのログ管理ベストプラクティス
AWSのログ管理ベストプラクティス
コンテナを突き破れ!! ~コンテナセキュリティ入門基礎の基礎~(Kubernetes Novice Tokyo #11 発表資料)
コンテナを突き破れ!! ~コンテナセキュリティ入門基礎の基礎~(Kubernetes Novice Tokyo #11 発表資料)
katagaitai CTF勉強会 #5 Crypto
katagaitai CTF勉強会 #5 Crypto
並行処理初心者のためのAkka入門
並行処理初心者のためのAkka入門
GitHubの機能を活用したGitHub Flowによる開発の進め方
GitHubの機能を活用したGitHub Flowによる開発の進め方
CSI Driverを開発し自社プライベートクラウドにより適した安全なKubernetes Secrets管理を実現した話
CSI Driverを開発し自社プライベートクラウドにより適した安全なKubernetes Secrets管理を実現した話
コンテナにおけるパフォーマンス調査でハマった話
コンテナにおけるパフォーマンス調査でハマった話
Similar to 5分でわかるWebRTCの仕組み - html5minutes vol.01
ビデオ通話・P2Pがコモディティ化する世界 WebRTCによるこれからを探る
ビデオ通話・P2Pがコモディティ化する世界 WebRTCによるこれからを探る
Kensaku Komatsu
ひとつひとつ組み上げてみていくビデオチャットアプリのアーキテクチャ
ひとつひとつ組み上げてみていくビデオチャットアプリのアーキテクチャ
Koki Kumagai
5分で分るWebRTCコーデックウォーズ
5分で分るWebRTCコーデックウォーズ
Yusuke Naka
レポート
レポート
xin song
WebRTC Boot Camp (WebRTC Conference Japan 2016) 事前公開版
WebRTC Boot Camp (WebRTC Conference Japan 2016) 事前公開版
You_Kinjoh
Infocom webrtc conference japan
Infocom webrtc conference japan
mganeko
WebRTC概説(P2P)
WebRTC概説(P2P)
goforbroke
レポート
レポート
xin song
WebRTCとPeer.jsを使った実装
WebRTCとPeer.jsを使った実装
Yuta Suzuki
WebRTCについてざっと
WebRTCについてざっと
Fumiyasu Sumiya
2013 WebRTC 概説 & ワークショップ
2013 WebRTC 概説 & ワークショップ
mganeko
HTML5によるリアルタイムコミュニケーション WebRTCの概説
HTML5によるリアルタイムコミュニケーション WebRTCの概説
You_Kinjoh
Magic Leap で WebRTC 触ってみた
Magic Leap で WebRTC 触ってみた
NishoMatsusita
Vuzix Developer Conference
Vuzix Developer Conference
Keiji Ariyama
Chromebook 「だけ」で WebRTCを動かそう
Chromebook 「だけ」で WebRTCを動かそう
mganeko
WebRTCとORTCについて整理しておこう
WebRTCとORTCについて整理しておこう
彰 村地
HTML5 Japan Cup (5jCup) WebRTC賞
HTML5 Japan Cup (5jCup) WebRTC賞
Ryosuke Otsuya
WebRTCについて
WebRTCについて
BeMarble
getUserMedia
getUserMedia
Yusuke Naka
Web of Thingsの現状とWebRTC活用の可能性
Web of Thingsの現状とWebRTC活用の可能性
Kensaku Komatsu
Similar to 5分でわかるWebRTCの仕組み - html5minutes vol.01
(20)
ビデオ通話・P2Pがコモディティ化する世界 WebRTCによるこれからを探る
ビデオ通話・P2Pがコモディティ化する世界 WebRTCによるこれからを探る
ひとつひとつ組み上げてみていくビデオチャットアプリのアーキテクチャ
ひとつひとつ組み上げてみていくビデオチャットアプリのアーキテクチャ
5分で分るWebRTCコーデックウォーズ
5分で分るWebRTCコーデックウォーズ
レポート
レポート
WebRTC Boot Camp (WebRTC Conference Japan 2016) 事前公開版
WebRTC Boot Camp (WebRTC Conference Japan 2016) 事前公開版
Infocom webrtc conference japan
Infocom webrtc conference japan
WebRTC概説(P2P)
WebRTC概説(P2P)
レポート
レポート
WebRTCとPeer.jsを使った実装
WebRTCとPeer.jsを使った実装
WebRTCについてざっと
WebRTCについてざっと
2013 WebRTC 概説 & ワークショップ
2013 WebRTC 概説 & ワークショップ
HTML5によるリアルタイムコミュニケーション WebRTCの概説
HTML5によるリアルタイムコミュニケーション WebRTCの概説
Magic Leap で WebRTC 触ってみた
Magic Leap で WebRTC 触ってみた
Vuzix Developer Conference
Vuzix Developer Conference
Chromebook 「だけ」で WebRTCを動かそう
Chromebook 「だけ」で WebRTCを動かそう
WebRTCとORTCについて整理しておこう
WebRTCとORTCについて整理しておこう
HTML5 Japan Cup (5jCup) WebRTC賞
HTML5 Japan Cup (5jCup) WebRTC賞
WebRTCについて
WebRTCについて
getUserMedia
getUserMedia
Web of Thingsの現状とWebRTC活用の可能性
Web of Thingsの現状とWebRTC活用の可能性
Recently uploaded
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
Hiroshi Tomioka
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
UEHARA, Tetsutaro
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
FumieNakayama
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
博三 太田
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
Yuki Kikuchi
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
akihisamiyanaga1
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NTT DATA Technology & Innovation
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
FumieNakayama
Recently uploaded
(8)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
5分でわかるWebRTCの仕組み - html5minutes vol.01
1.
5分でわかる WebRTCの仕組み HTML5minutes!! vol.01 西畑一馬
2.
最初に
3.
5分でわかるほど WebRTCは簡単じゃない
4.
WebRTCを取り巻くHTML5技術 WebSocket Web Audio RTCPeerConnection video/audio API getUserMedia
API Media Stream
5.
WebRTCを取り巻くHTML5技術 WebSocket Web Audio RTCPeerConnection video/audio API getUserMedia
API Media Stream とわ本日あたえられた時間は5分しかない
6.
WebRTCを取り巻くHTML5技術 WebSocket Web Audio video/audio API getUserMedia
API Media Streamとわ RTCPeerConnection 重要なコレに絞って解説
7.
そもそもWebRTCって??
8.
WebRTC Web Real-Time Communication
9.
離れた2台以上のPCで通信する技術
10.
ウェブカムの映像や
11.
音声やデータなど
12.
これまでのビデオチャットは仲介サーバー必要
13.
WebRTCはP2PでPC同士が通信を行う
14.
WebRTC通信に必要な4つのステップ
15.
Step 1 自分のストリームデータを取得
16.
getUserMedia getUserMedia( { video:true, audio:true }, function(stream) { localStream =
stream; }, function(error) { alert("メディアを取得できませんでした"); } );
17.
Step 2 お互いのPCのSDPを交換する
18.
SDP Session Description Protocol
19.
PeerConnectionオブジェクトを生成 peer = new
RTCPeerConnection({ "iceServers": [ { "url": "stun:stun.l.google.com:19302" } ] }); peer.addStream(localStream); peer.createOffer(function(sdp) { peer.setLocalDescription(sdp, function() { socket.emit('sendOffer',{ "sdp": sdp }); }); });
20.
先ほど取得したストリームデータをセット peer = new
RTCPeerConnection({ "iceServers": [ { "url": "stun:stun.l.google.com:19302" } ] }); peer.addStream(localStream); peer.createOffer(function(sdp) { peer.setLocalDescription(sdp, function() { socket.emit('sendOffer',{ "sdp": sdp }); }); });
21.
接続元から接続先にオファーを送る
22.
接続元から接続先にオファーを送る
23.
シグナリングサーバー
24.
SDPをWebSocketで送信 peer = new
RTCPeerConnection({ "iceServers": [ { "url": "stun:stun.l.google.com:19302" } ] }); peer.addStream(localStream); peer.createOffer(function(sdp) { peer.setLocalDescription(sdp, function() { socket.emit('sendOffer',{ "sdp": sdp }); }); });
25.
接続先はアンサーを返信
26.
受け取ったオファーからSDPを作成して返信 socket.on('reciveOffer',function(data){ var sdp =
new RTCSessionDescription(data.sdp); peer.setRemoteDescription(sdp, function() { peer.createAnswer(function(sdp) { peer.setLocalDescription(sdp, function() { socket.emit('sendAnswer',{ "sdp": sdp }); }); }); }); });
27.
接続先から返信を受け取ったらそれをセット socket.on('reciveAnswer',function(data){ var sdp =
new RTCSessionDescription(data.sdp); peer.setRemoteDescription(sdp); });
28.
Step 3 お互いのネットワークのICE情報を交換する
29.
ICE Interactive Connectivity Establishment
30.
IPアドレスやポート番号を 交換しないと通信できない
31.
STUNサーバー
32.
STUNサーバーは RTCPeerConnectionオブジェクト生成時に指定済み peer = new
RTCPeerConnection({ "iceServers": [ { "url": "stun:stun.l.google.com:19302" } ] }); peer.addStream(localStream); peer.createOffer(function(sdp) { peer.setLocalDescription(sdp, function() { socket.emit('sendOffer',{ "sdp": sdp }); }); });
33.
icecandidateイベントで取得できるので WebSocketで相手に送信 peer.onicecandidate = function
(evt) { if ( evt.candidate ) { socket.emit('sendCdi',{ "ice": evt.candidate }); } }
34.
socket.on('reciveCdi',function(data){ var ice =
new RTCIceCandidate(data.ice); peer.addIceCandidate(ice); }); ice情報を受け取ったらセット
35.
Step 4 video要素にremoteStreamを設置
36.
peer.addEventListener("addstream", function(event){ var
targetVideo = document.getElementById("remoteVideo"); targetVideo.src = URL.createObjectURL(event.stream); targetVideo.play(); }, false); あとは受け取ったストリームデータを video要素に突っ込むだけ
37.
WebRTCの課題 • 対応ブラウザがChrome/OperaとFirefoxのみ • ルーターやFirewallで通信できないことも •
CPU使用率が半端ない • ドライバレベルの不具合を引き起こすことも • 不安定、とにかく不安定
38.
HTML5minutes!! vol.01 西畑一馬 Thank you!!
Download now