Suche senden
Hochladen
5分でわかるWebRTCの仕組み - html5minutes vol.01
•
17 gefällt mir
•
8,534 views
西畑 一馬
Folgen
html5minutes vol.01で発表したスライドです。
Weniger lesen
Mehr lesen
Technologie
Melden
Teilen
Melden
Teilen
1 von 38
Jetzt herunterladen
Downloaden Sie, um offline zu lesen
Empfohlen
CyberAgent における OSS の CI/CD 基盤開発 myshoes #CICD2021
CyberAgent における OSS の CI/CD 基盤開発 myshoes #CICD2021
whywaita
ソーシャルゲームのためのデータベース設計
ソーシャルゲームのためのデータベース設計
Yoshinori Matsunobu
【Unite Tokyo 2019】Understanding C# Struct All Things
【Unite Tokyo 2019】Understanding C# Struct All Things
UnityTechnologiesJapan002
【Unite Tokyo 2019】Unityだったら簡単!マルチプレイ用ゲームサーバ開発 ~実践編~
【Unite Tokyo 2019】Unityだったら簡単!マルチプレイ用ゲームサーバ開発 ~実践編~
UnityTechnologiesJapan002
Dockerからcontainerdへの移行
Dockerからcontainerdへの移行
Kohei Tokunaga
アプリ起動時間高速化 ~推測するな、計測せよ~
アプリ起動時間高速化 ~推測するな、計測せよ~
gree_tech
CEDEC2019 大規模モバイルゲーム運用におけるマスタデータ管理事例
CEDEC2019 大規模モバイルゲーム運用におけるマスタデータ管理事例
sairoutine
ネットワーク ゲームにおけるTCPとUDPの使い分け
ネットワーク ゲームにおけるTCPとUDPの使い分け
モノビット エンジン
Empfohlen
CyberAgent における OSS の CI/CD 基盤開発 myshoes #CICD2021
CyberAgent における OSS の CI/CD 基盤開発 myshoes #CICD2021
whywaita
ソーシャルゲームのためのデータベース設計
ソーシャルゲームのためのデータベース設計
Yoshinori Matsunobu
【Unite Tokyo 2019】Understanding C# Struct All Things
【Unite Tokyo 2019】Understanding C# Struct All Things
UnityTechnologiesJapan002
【Unite Tokyo 2019】Unityだったら簡単!マルチプレイ用ゲームサーバ開発 ~実践編~
【Unite Tokyo 2019】Unityだったら簡単!マルチプレイ用ゲームサーバ開発 ~実践編~
UnityTechnologiesJapan002
Dockerからcontainerdへの移行
Dockerからcontainerdへの移行
Kohei Tokunaga
アプリ起動時間高速化 ~推測するな、計測せよ~
アプリ起動時間高速化 ~推測するな、計測せよ~
gree_tech
CEDEC2019 大規模モバイルゲーム運用におけるマスタデータ管理事例
CEDEC2019 大規模モバイルゲーム運用におけるマスタデータ管理事例
sairoutine
ネットワーク ゲームにおけるTCPとUDPの使い分け
ネットワーク ゲームにおけるTCPとUDPの使い分け
モノビット エンジン
Glibc malloc internal
Glibc malloc internal
Motohiro KOSAKI
こわくない Git
こわくない Git
Kota Saito
Dockerイメージの理解とコンテナのライフサイクル
Dockerイメージの理解とコンテナのライフサイクル
Masahito Zembutsu
Grafana LokiではじめるKubernetesロギングハンズオン(NTT Tech Conference #4 ハンズオン資料)
Grafana LokiではじめるKubernetesロギングハンズオン(NTT Tech Conference #4 ハンズオン資料)
NTT DATA Technology & Innovation
Docker道場オンライン#1 Docker基礎概念と用語の理解
Docker道場オンライン#1 Docker基礎概念と用語の理解
Masahito Zembutsu
SPAセキュリティ入門~PHP Conference Japan 2021
SPAセキュリティ入門~PHP Conference Japan 2021
Hiroshi Tokumaru
新入社員のための大規模ゲーム開発入門 サーバサイド編
新入社員のための大規模ゲーム開発入門 サーバサイド編
infinite_loop
PostgreSQLをKubernetes上で活用するためのOperator紹介!(Cloud Native Database Meetup #3 発表資料)
PostgreSQLをKubernetes上で活用するためのOperator紹介!(Cloud Native Database Meetup #3 発表資料)
NTT DATA Technology & Innovation
コンテナの作り方「Dockerは裏方で何をしているのか?」
コンテナの作り方「Dockerは裏方で何をしているのか?」
Masahito Zembutsu
[CEDEC 2021] 運用中タイトルでも怖くない! 『メルクストーリア』におけるハイパフォーマンス・ローコストなリアルタイム通信技術の導入事例
[CEDEC 2021] 運用中タイトルでも怖くない! 『メルクストーリア』におけるハイパフォーマンス・ローコストなリアルタイム通信技術の導入事例
Naoya Kishimoto
Kubernetesのしくみ やさしく学ぶ 内部構造とアーキテクチャー
Kubernetesのしくみ やさしく学ぶ 内部構造とアーキテクチャー
Toru Makabe
スマホゲームのチート手法とその対策 [DeNA TechCon 2019]
スマホゲームのチート手法とその対策 [DeNA TechCon 2019]
DeNA
続・PFN のオンプレML基盤の取り組み / オンプレML基盤 on Kubernetes 〜PFN、ヤフー〜 #2
続・PFN のオンプレML基盤の取り組み / オンプレML基盤 on Kubernetes 〜PFN、ヤフー〜 #2
Preferred Networks
分散トレーシング技術について(Open tracingやjaeger)
分散トレーシング技術について(Open tracingやjaeger)
NTT Communications Technology Development
Redisの特徴と活用方法について
Redisの特徴と活用方法について
Yuji Otani
CEDEC 2018 最速のC#の書き方 - C#大統一理論へ向けて性能的課題を払拭する
CEDEC 2018 最速のC#の書き方 - C#大統一理論へ向けて性能的課題を払拭する
Yoshifumi Kawai
食べログのフロントエンドエンジニアってめっちゃ大変やねん・・・
食べログのフロントエンドエンジニアってめっちゃ大変やねん・・・
Yoshie Kaneno
CloudNativePGを動かしてみた! ~PostgreSQL on Kubernetes~(第34回PostgreSQLアンカンファレンス@オンライ...
CloudNativePGを動かしてみた! ~PostgreSQL on Kubernetes~(第34回PostgreSQLアンカンファレンス@オンライ...
NTT DATA Technology & Innovation
ゼロからはじめるKVM超入門
ゼロからはじめるKVM超入門
VirtualTech Japan Inc.
わかる!metadata.managedFields / Kubernetes Meetup Tokyo 48
わかる!metadata.managedFields / Kubernetes Meetup Tokyo 48
Preferred Networks
ビデオ通話・P2Pがコモディティ化する世界 WebRTCによるこれからを探る
ビデオ通話・P2Pがコモディティ化する世界 WebRTCによるこれからを探る
Kensaku Komatsu
ひとつひとつ組み上げてみていくビデオチャットアプリのアーキテクチャ
ひとつひとつ組み上げてみていくビデオチャットアプリのアーキテクチャ
Koki Kumagai
Weitere ähnliche Inhalte
Was ist angesagt?
Glibc malloc internal
Glibc malloc internal
Motohiro KOSAKI
こわくない Git
こわくない Git
Kota Saito
Dockerイメージの理解とコンテナのライフサイクル
Dockerイメージの理解とコンテナのライフサイクル
Masahito Zembutsu
Grafana LokiではじめるKubernetesロギングハンズオン(NTT Tech Conference #4 ハンズオン資料)
Grafana LokiではじめるKubernetesロギングハンズオン(NTT Tech Conference #4 ハンズオン資料)
NTT DATA Technology & Innovation
Docker道場オンライン#1 Docker基礎概念と用語の理解
Docker道場オンライン#1 Docker基礎概念と用語の理解
Masahito Zembutsu
SPAセキュリティ入門~PHP Conference Japan 2021
SPAセキュリティ入門~PHP Conference Japan 2021
Hiroshi Tokumaru
新入社員のための大規模ゲーム開発入門 サーバサイド編
新入社員のための大規模ゲーム開発入門 サーバサイド編
infinite_loop
PostgreSQLをKubernetes上で活用するためのOperator紹介!(Cloud Native Database Meetup #3 発表資料)
PostgreSQLをKubernetes上で活用するためのOperator紹介!(Cloud Native Database Meetup #3 発表資料)
NTT DATA Technology & Innovation
コンテナの作り方「Dockerは裏方で何をしているのか?」
コンテナの作り方「Dockerは裏方で何をしているのか?」
Masahito Zembutsu
[CEDEC 2021] 運用中タイトルでも怖くない! 『メルクストーリア』におけるハイパフォーマンス・ローコストなリアルタイム通信技術の導入事例
[CEDEC 2021] 運用中タイトルでも怖くない! 『メルクストーリア』におけるハイパフォーマンス・ローコストなリアルタイム通信技術の導入事例
Naoya Kishimoto
Kubernetesのしくみ やさしく学ぶ 内部構造とアーキテクチャー
Kubernetesのしくみ やさしく学ぶ 内部構造とアーキテクチャー
Toru Makabe
スマホゲームのチート手法とその対策 [DeNA TechCon 2019]
スマホゲームのチート手法とその対策 [DeNA TechCon 2019]
DeNA
続・PFN のオンプレML基盤の取り組み / オンプレML基盤 on Kubernetes 〜PFN、ヤフー〜 #2
続・PFN のオンプレML基盤の取り組み / オンプレML基盤 on Kubernetes 〜PFN、ヤフー〜 #2
Preferred Networks
分散トレーシング技術について(Open tracingやjaeger)
分散トレーシング技術について(Open tracingやjaeger)
NTT Communications Technology Development
Redisの特徴と活用方法について
Redisの特徴と活用方法について
Yuji Otani
CEDEC 2018 最速のC#の書き方 - C#大統一理論へ向けて性能的課題を払拭する
CEDEC 2018 最速のC#の書き方 - C#大統一理論へ向けて性能的課題を払拭する
Yoshifumi Kawai
食べログのフロントエンドエンジニアってめっちゃ大変やねん・・・
食べログのフロントエンドエンジニアってめっちゃ大変やねん・・・
Yoshie Kaneno
CloudNativePGを動かしてみた! ~PostgreSQL on Kubernetes~(第34回PostgreSQLアンカンファレンス@オンライ...
CloudNativePGを動かしてみた! ~PostgreSQL on Kubernetes~(第34回PostgreSQLアンカンファレンス@オンライ...
NTT DATA Technology & Innovation
ゼロからはじめるKVM超入門
ゼロからはじめるKVM超入門
VirtualTech Japan Inc.
わかる!metadata.managedFields / Kubernetes Meetup Tokyo 48
わかる!metadata.managedFields / Kubernetes Meetup Tokyo 48
Preferred Networks
Was ist angesagt?
(20)
Glibc malloc internal
Glibc malloc internal
こわくない Git
こわくない Git
Dockerイメージの理解とコンテナのライフサイクル
Dockerイメージの理解とコンテナのライフサイクル
Grafana LokiではじめるKubernetesロギングハンズオン(NTT Tech Conference #4 ハンズオン資料)
Grafana LokiではじめるKubernetesロギングハンズオン(NTT Tech Conference #4 ハンズオン資料)
Docker道場オンライン#1 Docker基礎概念と用語の理解
Docker道場オンライン#1 Docker基礎概念と用語の理解
SPAセキュリティ入門~PHP Conference Japan 2021
SPAセキュリティ入門~PHP Conference Japan 2021
新入社員のための大規模ゲーム開発入門 サーバサイド編
新入社員のための大規模ゲーム開発入門 サーバサイド編
PostgreSQLをKubernetes上で活用するためのOperator紹介!(Cloud Native Database Meetup #3 発表資料)
PostgreSQLをKubernetes上で活用するためのOperator紹介!(Cloud Native Database Meetup #3 発表資料)
コンテナの作り方「Dockerは裏方で何をしているのか?」
コンテナの作り方「Dockerは裏方で何をしているのか?」
[CEDEC 2021] 運用中タイトルでも怖くない! 『メルクストーリア』におけるハイパフォーマンス・ローコストなリアルタイム通信技術の導入事例
[CEDEC 2021] 運用中タイトルでも怖くない! 『メルクストーリア』におけるハイパフォーマンス・ローコストなリアルタイム通信技術の導入事例
Kubernetesのしくみ やさしく学ぶ 内部構造とアーキテクチャー
Kubernetesのしくみ やさしく学ぶ 内部構造とアーキテクチャー
スマホゲームのチート手法とその対策 [DeNA TechCon 2019]
スマホゲームのチート手法とその対策 [DeNA TechCon 2019]
続・PFN のオンプレML基盤の取り組み / オンプレML基盤 on Kubernetes 〜PFN、ヤフー〜 #2
続・PFN のオンプレML基盤の取り組み / オンプレML基盤 on Kubernetes 〜PFN、ヤフー〜 #2
分散トレーシング技術について(Open tracingやjaeger)
分散トレーシング技術について(Open tracingやjaeger)
Redisの特徴と活用方法について
Redisの特徴と活用方法について
CEDEC 2018 最速のC#の書き方 - C#大統一理論へ向けて性能的課題を払拭する
CEDEC 2018 最速のC#の書き方 - C#大統一理論へ向けて性能的課題を払拭する
食べログのフロントエンドエンジニアってめっちゃ大変やねん・・・
食べログのフロントエンドエンジニアってめっちゃ大変やねん・・・
CloudNativePGを動かしてみた! ~PostgreSQL on Kubernetes~(第34回PostgreSQLアンカンファレンス@オンライ...
CloudNativePGを動かしてみた! ~PostgreSQL on Kubernetes~(第34回PostgreSQLアンカンファレンス@オンライ...
ゼロからはじめるKVM超入門
ゼロからはじめるKVM超入門
わかる!metadata.managedFields / Kubernetes Meetup Tokyo 48
わかる!metadata.managedFields / Kubernetes Meetup Tokyo 48
Ähnlich wie 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
Ähnlich wie 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活用の可能性
Kürzlich hochgeladen
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NTT DATA Technology & Innovation
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Hiroshi Tomioka
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
CRI Japan, Inc.
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
CRI Japan, Inc.
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
Hiroshi Tomioka
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
Toru Tamaki
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
atsushi061452
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
Toru Tamaki
Kürzlich hochgeladen
(11)
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
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!!
Jetzt herunterladen