Enviar búsqueda
Cargar
WebRTC研修
•
7 recomendaciones
•
6,320 vistas
株
株式会社 NTTテクノクロス
Seguir
WebRTCに関する基本的な説明から、実装方法に関する研修テキストで、実際の研修ではスマホとPCをWebRTCで接続したビデオチャットの実習にチャレンジします
Leer menos
Leer más
Tecnología
Denunciar
Compartir
Denunciar
Compartir
1 de 56
Descargar ahora
Descargar para leer sin conexión
Recomendados
Amazon Kinesis Video Streams WebRTC 使ってみた
Amazon Kinesis Video Streams WebRTC 使ってみた
mganeko
WebRTCの技術解説 公開版
WebRTCの技術解説 公開版
Contest Ntt-west
20200930 AWS Black Belt Online Seminar Amazon Kinesis Video Streams
20200930 AWS Black Belt Online Seminar Amazon Kinesis Video Streams
Amazon Web Services Japan
WebSocket / WebRTCの技術紹介
WebSocket / WebRTCの技術紹介
Yasuhiro Mawarimichi
コンテナ未経験新人が学ぶコンテナ技術入門
コンテナ未経験新人が学ぶコンテナ技術入門
Kohei Tokunaga
SFUの話
SFUの話
tnoho
「Diameter勉強会 3」講義用スライド配布用 20141020
「Diameter勉強会 3」講義用スライド配布用 20141020
マジセミ by (株)オープンソース活用研究所
UnboundとNSDの紹介 BIND9との比較編
UnboundとNSDの紹介 BIND9との比較編
hdais
Recomendados
Amazon Kinesis Video Streams WebRTC 使ってみた
Amazon Kinesis Video Streams WebRTC 使ってみた
mganeko
WebRTCの技術解説 公開版
WebRTCの技術解説 公開版
Contest Ntt-west
20200930 AWS Black Belt Online Seminar Amazon Kinesis Video Streams
20200930 AWS Black Belt Online Seminar Amazon Kinesis Video Streams
Amazon Web Services Japan
WebSocket / WebRTCの技術紹介
WebSocket / WebRTCの技術紹介
Yasuhiro Mawarimichi
コンテナ未経験新人が学ぶコンテナ技術入門
コンテナ未経験新人が学ぶコンテナ技術入門
Kohei Tokunaga
SFUの話
SFUの話
tnoho
「Diameter勉強会 3」講義用スライド配布用 20141020
「Diameter勉強会 3」講義用スライド配布用 20141020
マジセミ by (株)オープンソース活用研究所
UnboundとNSDの紹介 BIND9との比較編
UnboundとNSDの紹介 BIND9との比較編
hdais
データセンターネットワークでのPrometheus活用事例
データセンターネットワークでのPrometheus活用事例
Yahoo!デベロッパーネットワーク
DockerからKubernetesへのシフト
DockerからKubernetesへのシフト
masaki nakayama
20191112 AWS Black Belt Online Seminar AWS Media Services で始めるライブ動画配信
20191112 AWS Black Belt Online Seminar AWS Media Services で始めるライブ動画配信
Amazon Web Services Japan
OpenStack超入門シリーズ いまさら聞けないSwiftの使い方
OpenStack超入門シリーズ いまさら聞けないSwiftの使い方
Toru Makabe
Docker と ECS と WebSocket で最強のマルチプレイ・ゲームサーバを構築
Docker と ECS と WebSocket で最強のマルチプレイ・ゲームサーバを構築
gree_tech
PCI DSSにおける認証認可 インフラ編
PCI DSSにおける認証認可 インフラ編
Nobuhiro Nakayama
スマホ(Android・iPhone)でWebRTC
スマホ(Android・iPhone)でWebRTC
Natsuki Yamanaka
Kubernetesでの性能解析 ~なんとなく遅いからの脱却~(Kubernetes Meetup Tokyo #33 発表資料)
Kubernetesでの性能解析 ~なんとなく遅いからの脱却~(Kubernetes Meetup Tokyo #33 発表資料)
NTT DATA Technology & Innovation
nginx入門
nginx入門
Takashi Takizawa
ATSC 3.0, MMT, Multicast
ATSC 3.0, MMT, Multicast
Masaaki Nabeshima
Istioサービスメッシュ入門
Istioサービスメッシュ入門
Yoichi Kawasaki
WebRTCの技術解説 第二版 公開版 本編
WebRTCの技術解説 第二版 公開版 本編
Contest Ntt-west
[社内勉強会]ELBとALBと数万スパイク負荷テスト
[社内勉強会]ELBとALBと数万スパイク負荷テスト
Takahiro Moteki
Web api開発をするなら ドキュメントは自動生成にしておこう__ph_per_kaigi2021_
Web api開発をするなら ドキュメントは自動生成にしておこう__ph_per_kaigi2021_
Akito Tsukahara
私にとってのテスト
私にとってのテスト
Takuto Wada
自宅k8s/vSphere入門
自宅k8s/vSphere入門
富士通クラウドテクノロジーズ株式会社
Docker Compose 徹底解説
Docker Compose 徹底解説
Masahito Zembutsu
Infrastructure as Code (IaC) 談義 2022
Infrastructure as Code (IaC) 談義 2022
Amazon Web Services Japan
IoT用途で簡単に使えるWebRTC Engineを作った話
IoT用途で簡単に使えるWebRTC Engineを作った話
ToshiyaNakakura1
実践!OpenTelemetry と OSS を使った Observability 基盤の構築(CloudNative Days Tokyo 2022 発...
実践!OpenTelemetry と OSS を使った Observability 基盤の構築(CloudNative Days Tokyo 2022 発...
NTT DATA Technology & Innovation
Open stack界でのコンテナの現状
Open stack界でのコンテナの現状
株式会社 NTTテクノクロス
OpenStack入門 2016/06/10
OpenStack入門 2016/06/10
株式会社 NTTテクノクロス
Más contenido relacionado
La actualidad más candente
データセンターネットワークでのPrometheus活用事例
データセンターネットワークでのPrometheus活用事例
Yahoo!デベロッパーネットワーク
DockerからKubernetesへのシフト
DockerからKubernetesへのシフト
masaki nakayama
20191112 AWS Black Belt Online Seminar AWS Media Services で始めるライブ動画配信
20191112 AWS Black Belt Online Seminar AWS Media Services で始めるライブ動画配信
Amazon Web Services Japan
OpenStack超入門シリーズ いまさら聞けないSwiftの使い方
OpenStack超入門シリーズ いまさら聞けないSwiftの使い方
Toru Makabe
Docker と ECS と WebSocket で最強のマルチプレイ・ゲームサーバを構築
Docker と ECS と WebSocket で最強のマルチプレイ・ゲームサーバを構築
gree_tech
PCI DSSにおける認証認可 インフラ編
PCI DSSにおける認証認可 インフラ編
Nobuhiro Nakayama
スマホ(Android・iPhone)でWebRTC
スマホ(Android・iPhone)でWebRTC
Natsuki Yamanaka
Kubernetesでの性能解析 ~なんとなく遅いからの脱却~(Kubernetes Meetup Tokyo #33 発表資料)
Kubernetesでの性能解析 ~なんとなく遅いからの脱却~(Kubernetes Meetup Tokyo #33 発表資料)
NTT DATA Technology & Innovation
nginx入門
nginx入門
Takashi Takizawa
ATSC 3.0, MMT, Multicast
ATSC 3.0, MMT, Multicast
Masaaki Nabeshima
Istioサービスメッシュ入門
Istioサービスメッシュ入門
Yoichi Kawasaki
WebRTCの技術解説 第二版 公開版 本編
WebRTCの技術解説 第二版 公開版 本編
Contest Ntt-west
[社内勉強会]ELBとALBと数万スパイク負荷テスト
[社内勉強会]ELBとALBと数万スパイク負荷テスト
Takahiro Moteki
Web api開発をするなら ドキュメントは自動生成にしておこう__ph_per_kaigi2021_
Web api開発をするなら ドキュメントは自動生成にしておこう__ph_per_kaigi2021_
Akito Tsukahara
私にとってのテスト
私にとってのテスト
Takuto Wada
自宅k8s/vSphere入門
自宅k8s/vSphere入門
富士通クラウドテクノロジーズ株式会社
Docker Compose 徹底解説
Docker Compose 徹底解説
Masahito Zembutsu
Infrastructure as Code (IaC) 談義 2022
Infrastructure as Code (IaC) 談義 2022
Amazon Web Services Japan
IoT用途で簡単に使えるWebRTC Engineを作った話
IoT用途で簡単に使えるWebRTC Engineを作った話
ToshiyaNakakura1
実践!OpenTelemetry と OSS を使った Observability 基盤の構築(CloudNative Days Tokyo 2022 発...
実践!OpenTelemetry と OSS を使った Observability 基盤の構築(CloudNative Days Tokyo 2022 発...
NTT DATA Technology & Innovation
La actualidad más candente
(20)
データセンターネットワークでのPrometheus活用事例
データセンターネットワークでのPrometheus活用事例
DockerからKubernetesへのシフト
DockerからKubernetesへのシフト
20191112 AWS Black Belt Online Seminar AWS Media Services で始めるライブ動画配信
20191112 AWS Black Belt Online Seminar AWS Media Services で始めるライブ動画配信
OpenStack超入門シリーズ いまさら聞けないSwiftの使い方
OpenStack超入門シリーズ いまさら聞けないSwiftの使い方
Docker と ECS と WebSocket で最強のマルチプレイ・ゲームサーバを構築
Docker と ECS と WebSocket で最強のマルチプレイ・ゲームサーバを構築
PCI DSSにおける認証認可 インフラ編
PCI DSSにおける認証認可 インフラ編
スマホ(Android・iPhone)でWebRTC
スマホ(Android・iPhone)でWebRTC
Kubernetesでの性能解析 ~なんとなく遅いからの脱却~(Kubernetes Meetup Tokyo #33 発表資料)
Kubernetesでの性能解析 ~なんとなく遅いからの脱却~(Kubernetes Meetup Tokyo #33 発表資料)
nginx入門
nginx入門
ATSC 3.0, MMT, Multicast
ATSC 3.0, MMT, Multicast
Istioサービスメッシュ入門
Istioサービスメッシュ入門
WebRTCの技術解説 第二版 公開版 本編
WebRTCの技術解説 第二版 公開版 本編
[社内勉強会]ELBとALBと数万スパイク負荷テスト
[社内勉強会]ELBとALBと数万スパイク負荷テスト
Web api開発をするなら ドキュメントは自動生成にしておこう__ph_per_kaigi2021_
Web api開発をするなら ドキュメントは自動生成にしておこう__ph_per_kaigi2021_
私にとってのテスト
私にとってのテスト
自宅k8s/vSphere入門
自宅k8s/vSphere入門
Docker Compose 徹底解説
Docker Compose 徹底解説
Infrastructure as Code (IaC) 談義 2022
Infrastructure as Code (IaC) 談義 2022
IoT用途で簡単に使えるWebRTC Engineを作った話
IoT用途で簡単に使えるWebRTC Engineを作った話
実践!OpenTelemetry と OSS を使った Observability 基盤の構築(CloudNative Days Tokyo 2022 発...
実践!OpenTelemetry と OSS を使った Observability 基盤の構築(CloudNative Days Tokyo 2022 発...
Destacado
Open stack界でのコンテナの現状
Open stack界でのコンテナの現状
株式会社 NTTテクノクロス
OpenStack入門 2016/06/10
OpenStack入門 2016/06/10
株式会社 NTTテクノクロス
ネットワークスイッチ構築実践 2.STP・RSTP・PortSecurity・StormControl・SPAN・Stacking編
ネットワークスイッチ構築実践 2.STP・RSTP・PortSecurity・StormControl・SPAN・Stacking編
株式会社 NTTテクノクロス
OpenStack入門 2016/06/27
OpenStack入門 2016/06/27
株式会社 NTTテクノクロス
OpenStack Trove 技術解説
OpenStack Trove 技術解説
Toru Makabe
ネットワークエンジニアはどこでウデマエをみがくのか?
ネットワークエンジニアはどこでウデマエをみがくのか?
Yuya Rin
ISPネットワーク運用で覗いてるもの
ISPネットワーク運用で覗いてるもの
Taiji Tsuchiya
構成情報データベースをGitで管理したいネットワーク運用者の憂鬱
構成情報データベースをGitで管理したいネットワーク運用者の憂鬱
Yuya Rin
VtigerCRMのasterisk連携
VtigerCRMのasterisk連携
Shuichi Menrai
WebRTCでアプリやIoT機器にリアルタイム・コミュニケーションを追加しよう
WebRTCでアプリやIoT機器にリアルタイム・コミュニケーションを追加しよう
Ryosuke Otsuya
インタークラウドにおけるAsteriskの活用
インタークラウドにおけるAsteriskの活用
Shuichi Menrai
AtCoderで始めるテスト駆動開発
AtCoderで始めるテスト駆動開発
YujiSoftware
Remotty - リモートワークのためのバーチャルオフィス
Remotty - リモートワークのためのバーチャルオフィス
Yoshihito Kuranuki
共通番号を活用した「資格確認システム構築」事業
共通番号を活用した「資格確認システム構築」事業
jump-slide
第一回VtigerCRM勉強会
第一回VtigerCRM勉強会
Shuichi Menrai
Running Asterisk on virtualized environments
Running Asterisk on virtualized environments
Saúl Ibarra Corretgé
OpenStackとTerraformで作る Phoenix Environments
OpenStackとTerraformで作る Phoenix Environments
Toru Makabe
OpenStack超入門シリーズ いまさら聞けないNeutronの使い方
OpenStack超入門シリーズ いまさら聞けないNeutronの使い方
Toru Makabe
Javaでマサカリ投げてみた
Javaでマサカリ投げてみた
YujiSoftware
OpenStack超入門シリーズ Novaのディスク周りあれこれ
OpenStack超入門シリーズ Novaのディスク周りあれこれ
Toru Makabe
Destacado
(20)
Open stack界でのコンテナの現状
Open stack界でのコンテナの現状
OpenStack入門 2016/06/10
OpenStack入門 2016/06/10
ネットワークスイッチ構築実践 2.STP・RSTP・PortSecurity・StormControl・SPAN・Stacking編
ネットワークスイッチ構築実践 2.STP・RSTP・PortSecurity・StormControl・SPAN・Stacking編
OpenStack入門 2016/06/27
OpenStack入門 2016/06/27
OpenStack Trove 技術解説
OpenStack Trove 技術解説
ネットワークエンジニアはどこでウデマエをみがくのか?
ネットワークエンジニアはどこでウデマエをみがくのか?
ISPネットワーク運用で覗いてるもの
ISPネットワーク運用で覗いてるもの
構成情報データベースをGitで管理したいネットワーク運用者の憂鬱
構成情報データベースをGitで管理したいネットワーク運用者の憂鬱
VtigerCRMのasterisk連携
VtigerCRMのasterisk連携
WebRTCでアプリやIoT機器にリアルタイム・コミュニケーションを追加しよう
WebRTCでアプリやIoT機器にリアルタイム・コミュニケーションを追加しよう
インタークラウドにおけるAsteriskの活用
インタークラウドにおけるAsteriskの活用
AtCoderで始めるテスト駆動開発
AtCoderで始めるテスト駆動開発
Remotty - リモートワークのためのバーチャルオフィス
Remotty - リモートワークのためのバーチャルオフィス
共通番号を活用した「資格確認システム構築」事業
共通番号を活用した「資格確認システム構築」事業
第一回VtigerCRM勉強会
第一回VtigerCRM勉強会
Running Asterisk on virtualized environments
Running Asterisk on virtualized environments
OpenStackとTerraformで作る Phoenix Environments
OpenStackとTerraformで作る Phoenix Environments
OpenStack超入門シリーズ いまさら聞けないNeutronの使い方
OpenStack超入門シリーズ いまさら聞けないNeutronの使い方
Javaでマサカリ投げてみた
Javaでマサカリ投げてみた
OpenStack超入門シリーズ Novaのディスク周りあれこれ
OpenStack超入門シリーズ Novaのディスク周りあれこれ
Similar a WebRTC研修
ネットワーク構築訓練 入門
ネットワーク構築訓練 入門
株式会社 NTTテクノクロス
ROBOMECH2023 RTミドルウェア講習会 第1部
ROBOMECH2023 RTミドルウェア講習会 第1部
openrtm
CBA様_全通話録音の新基準VoIP Trek
CBA様_全通話録音の新基準VoIP Trek
FUSION COMMUNICATIONS CORPORATION
Jap1
Jap1
Naveen N
WebRTC/ORTCの最新動向まるわかり!
WebRTC/ORTCの最新動向まるわかり!
Yusuke Naka
セキュリティオペレーション自動化に向けた、基盤技術と共通インターフェースの構築 [ISOC-JP workshop, 2016/05/20]
セキュリティオペレーション自動化に向けた、基盤技術と共通インターフェースの構築 [ISOC-JP workshop, 2016/05/20]
Takeshi Takahashi
2015 0227 OSC-Spring Tokyo NETMF
2015 0227 OSC-Spring Tokyo NETMF
Atomu Hidaka
Microsoft Intelligent Edge Technologies
Microsoft Intelligent Edge Technologies
Takeshi Fukuhara
Nedo講座・rtmセミナー
Nedo講座・rtmセミナー
openrtm
Lpicl304セミナー資料20140727
Lpicl304セミナー資料20140727
Takahiro Kujirai
IETF89 HTTP関連WG報告 #isocjp
IETF89 HTTP関連WG報告 #isocjp
Kaoru Maeda
Cisco Connect Japan 2014: シスコ ビデオ テクノロジー最前線
Cisco Connect Japan 2014: シスコ ビデオ テクノロジー最前線
シスコシステムズ合同会社
Cisco Connect Japan 2014: シスコ ビデオ テクノロジー最前線
Cisco Connect Japan 2014: シスコ ビデオ テクノロジー最前線
シスコシステムズ合同会社
Lpicl304Seminar Presentations on 20150118
Lpicl304Seminar Presentations on 20150118
Takahiro Kujirai
[Oracle Innovation Summit Tokyo 2018] Fn Project: Next Generation Serverless ...
[Oracle Innovation Summit Tokyo 2018] Fn Project: Next Generation Serverless ...
オラクルエンジニア通信
.NET GadgeteerでプロトタイピングするEnOceanエネルギーハーベスティングシステム
.NET GadgeteerでプロトタイピングするEnOceanエネルギーハーベスティングシステム
Atomu Hidaka
130522 01
130522 01
openrtm
2014 1018 OSC-Fall Tokyo NETMF
2014 1018 OSC-Fall Tokyo NETMF
Atomu Hidaka
Dockerコミュニティ近況
Dockerコミュニティ近況
Akihiro Suda
1.コース概要
1.コース概要
openrtm
Similar a WebRTC研修
(20)
ネットワーク構築訓練 入門
ネットワーク構築訓練 入門
ROBOMECH2023 RTミドルウェア講習会 第1部
ROBOMECH2023 RTミドルウェア講習会 第1部
CBA様_全通話録音の新基準VoIP Trek
CBA様_全通話録音の新基準VoIP Trek
Jap1
Jap1
WebRTC/ORTCの最新動向まるわかり!
WebRTC/ORTCの最新動向まるわかり!
セキュリティオペレーション自動化に向けた、基盤技術と共通インターフェースの構築 [ISOC-JP workshop, 2016/05/20]
セキュリティオペレーション自動化に向けた、基盤技術と共通インターフェースの構築 [ISOC-JP workshop, 2016/05/20]
2015 0227 OSC-Spring Tokyo NETMF
2015 0227 OSC-Spring Tokyo NETMF
Microsoft Intelligent Edge Technologies
Microsoft Intelligent Edge Technologies
Nedo講座・rtmセミナー
Nedo講座・rtmセミナー
Lpicl304セミナー資料20140727
Lpicl304セミナー資料20140727
IETF89 HTTP関連WG報告 #isocjp
IETF89 HTTP関連WG報告 #isocjp
Cisco Connect Japan 2014: シスコ ビデオ テクノロジー最前線
Cisco Connect Japan 2014: シスコ ビデオ テクノロジー最前線
Cisco Connect Japan 2014: シスコ ビデオ テクノロジー最前線
Cisco Connect Japan 2014: シスコ ビデオ テクノロジー最前線
Lpicl304Seminar Presentations on 20150118
Lpicl304Seminar Presentations on 20150118
[Oracle Innovation Summit Tokyo 2018] Fn Project: Next Generation Serverless ...
[Oracle Innovation Summit Tokyo 2018] Fn Project: Next Generation Serverless ...
.NET GadgeteerでプロトタイピングするEnOceanエネルギーハーベスティングシステム
.NET GadgeteerでプロトタイピングするEnOceanエネルギーハーベスティングシステム
130522 01
130522 01
2014 1018 OSC-Fall Tokyo NETMF
2014 1018 OSC-Fall Tokyo NETMF
Dockerコミュニティ近況
Dockerコミュニティ近況
1.コース概要
1.コース概要
Más de 株式会社 NTTテクノクロス
ブロックチェーン活用事例
ブロックチェーン活用事例
株式会社 NTTテクノクロス
ネットワークスイッチ構築実践 1.VLAN・LinkAggregation編
ネットワークスイッチ構築実践 1.VLAN・LinkAggregation編
株式会社 NTTテクノクロス
Androidテスティング実践3 ユニットテスト・CI編
Androidテスティング実践3 ユニットテスト・CI編
株式会社 NTTテクノクロス
Androidテスティング実践2 システムテスト編
Androidテスティング実践2 システムテスト編
株式会社 NTTテクノクロス
Androidテスティング実践 基礎編
Androidテスティング実践 基礎編
株式会社 NTTテクノクロス
Androidアプリケーション開発中級研修 後編
Androidアプリケーション開発中級研修 後編
株式会社 NTTテクノクロス
Androidアプリケーション開発中級研修 前編
Androidアプリケーション開発中級研修 前編
株式会社 NTTテクノクロス
Más de 株式会社 NTTテクノクロス
(7)
ブロックチェーン活用事例
ブロックチェーン活用事例
ネットワークスイッチ構築実践 1.VLAN・LinkAggregation編
ネットワークスイッチ構築実践 1.VLAN・LinkAggregation編
Androidテスティング実践3 ユニットテスト・CI編
Androidテスティング実践3 ユニットテスト・CI編
Androidテスティング実践2 システムテスト編
Androidテスティング実践2 システムテスト編
Androidテスティング実践 基礎編
Androidテスティング実践 基礎編
Androidアプリケーション開発中級研修 後編
Androidアプリケーション開発中級研修 後編
Androidアプリケーション開発中級研修 前編
Androidアプリケーション開発中級研修 前編
WebRTC研修
1.
WebRTC研修(講義)
2.
2 本スライドは、NTTソフトウェア社内技術者育成研修(ソフト道場研修)テキストです。 【著作権・免責事項】 • 本セミナーコースの内容、本資料のすべての著作権は、NTTソフトウェア株式会社に帰属します。 • 無断での本資料の複写、複製、再利用、転載、転用を禁じます。 •
本資料と演習等で利用するすべての教材は、NTTソフトウェア株式会社からの保証なしに提供されます。 • 本書に記載されている会社名および製品名は、一般に各社の商標または登録商標です。 WebRTC研修 Copyright© 2016 NTT Software Corporation
3.
3 目次(1/2) 1 WebRTC概説 1.1 WebRTCとは 1.2
WebRTCの特徴 1.3 対応ブラウザ、プラットフォーム 2 IP電話について 2.1 IP電話はそもそもどうやってつながるか? 2.2 SIP/SDP 2.3 音声コーデック(PCMU/Opus)、映像コーデック(VP8)の概要説明 2.4 P2P vs B2BUA 2.5 NAT問題 2.6 NAT越え技術(STUN,TURN,ICE) WebRTC研修 Copyright© 2016 NTT Software Corporation
4.
4 目次(2/2) 3 WebRTC詳細 3.1 アーキテクチャ図 3.2
処理の流れ 3.3 WebSocket 3.4 getUserMedia 3.5 RTCPeerConnection 3.5.1 createOffer(RTCPeerConnectionのメソッド) 3.5.2 createAnswercreateOffer(RTCPeerConnectionのメソッド) 3.5.3 setLocalDescriptioncreateOffer(RTCPeerConnectionのメソッド) 3.5.4 setRemoteDescriptioncreateOffer(RTCPeerConnectionのメソッド) 3.6 SRTP 4 参考情報 4.1 DataChannelについて 4.2 画面共有について 4.3 ORTC 4.4 Stats API 4.5 sipML5 Asteriskを利用した実装例 4.6 WebRTCをサポートした当社の製品 4.7 その他有用なリンク WebRTC研修 Copyright© 2016 NTT Software Corporation
5.
5 1.WebRTC概説 WebRTC研修 Copyright© 2016
NTT Software Corporation
6.
1.WebRTCは「Web Real-Time
Communication」の略称。「Webの世界でプラ グインなしでリアルタイムコミュニケーションを実現するための技術」。W3C (World Wide Web Consorthium)で規定するこの機能に関連したブラウザのAPI をWebRTC APIと呼ぶ。(WebRTCといった場合にAPIのことを指す場合とこのA PIを利用して実現できる技術の総称を指す場合がある。) 2.これまでは、ブラウザそのものが音声通話・ビデオ通話を実現する能力はもっ てなかった(これまではプラグインをインストール)が、プラグインなしで実現できる 3.上記により、ブラウザが「電話」になる! 6 1.1 WebRTCとは WebRTC研修 Copyright© 2016 NTT Software Corporation
7.
7 【参考】インターネットでアクセス可能なサービス例 BizMee(Web会議) https://bizmee.net/ FaceKat http://shinydemos.com/facekat/ Skyway
http://nttcom.github.io/skyway/ WebRTC研修 Copyright© 2016 NTT Software Corporation
8.
8 1.2 WebRTCの特徴 クライアント側はインストールレス
ブラウザがあればよい。(アプリケーションのインストールやブラウザへのプ ラグインのインストールは不要)。呼処理ロジックは、サーバからJavaScript としてダウンロードします。このため、機能追加にはサーバ側が対応すれば よい。(クライアントの変更不要。クライアントプログラムの開発費の低減) オープンな仕様 標準化予定の技術であるため、特定のベンダの製品に囲い込まれる可能 性は低い。 番号計画は自由 電話番号(0ABJ)がなくても、相手との接続が可能。既存の番号を利用する ことも可能。 SRTPサポート 強固なセキュリティ NAT越えをサポート データチャネル/画面共有 Webコンテンツとの融合 ブラウザがあれば、主要なコミュニケーション(音声・ビデオ・チャット・プレゼ ンス)が可能 ネットゲームへの音声・ビデオ通信の拡張 キネクトのような処理が可能(ビデオカメラ入力をインプットとしブラウザにダ ウンロードしたJavaScriptで画像を処理することが可能) WebRTC研修 Copyright© 2016 NTT Software Corporation
9.
9 1.使えるか使えないかはブラウザの実装次第 IE, iOSが使えないのが痛い。。 (IEについてはORTCとして実装中) インストールが不要であるため、低リテラシーな利用者(年配の方、子供等)に 向けては、よい技術であるはずだが、動作するプラットフォームに縛りがある のはキビシイ 2.明日うごかなくなる可能性 ブラウザのWebRTC機能は安定しているとはいえ、動きがいきなり変わります。 主には、W3C仕様の変更によりブラウザのインタフェース名が変更になる、 HTTPでうごいていたものが、HTTPSでないと動かなくなる #事前に開発版で先行リリースされているので、十分検証する必要有り 3.保守が案外大変 1つのブラウザだけでもバージョンにより動作が変わる。ブラウザ同士でも 実装のスピードが異なる。ブラウザの組み合わせ、バージョンの組み合わせ。。 4.WebRTCでつながる、というだけでは売れない フリーのプラットフォームも、多く、ただWebRTCでつながります、というだけでは 売り物にならない。具体的なサービス(WebRTCを使って、どう便利になるか)まで を求められる状況 1.2 WebRTCの特徴(マイナス面) WebRTC研修
Copyright© 2016 NTT Software Corporation
10.
10 1.3 対応ブラウザ、プラットフォーム 標準化活動
W3C ブラウザ上のプログラミングAPIを規定 WebRTC 1.0 (Editor’s Draft) IETF 通信プロトコルを規定 議論は継続中 クライアント(ブラウザ) Googleが強いリーダシップを発揮し、ブラウザ側での実装を推進しています Google ビデオ通信可能(Android版でも動作) FireFox ビデオ通信可能(Android版でも動作) Opera ビデオ通信可能(Android版でも動作) Internet Explorer ORTC(後述)として実装を開始 Safari 実装の動きなし 注:Operaはバージョン15以降でレンダリングエンジンとしてWebKit/Blinkを採用。このため基本 的な機能がChromeと同じものとなっている。 サーバ PRISM (TROPO社) Asterisk (Digium社) Asterisk11でサポート済み(SIP over websocket) SkyWay(NTT Com) PeerJS(OSS) 他多数 WebRTC研修 Copyright© 2016 NTT Software Corporation
11.
11 2.IP電話について WebRTC研修 Copyright© 2016
NTT Software Corporation
12.
12 2.1 IP電話はそもそもどうやってつながるか? 従来、固定電話などに代表されるように「電話」は専用のサーバ(電話交換機) や専用の通信網(電話網)、専用の端末(電話機)を用いて提供される特殊なサービスで あった。専用のものを利用するため、開発・運用コストは高かった。 (通信については過去はアナログ信号が使われていたが、ISDNによりデジタル化が 図られていたが、IPベースではなかった) 20世紀末のインターネット革命により、IP通信が普及するにつれて、電話網についても IP化の波が到来し、「IP電話」が登場した(2002年から番号割り当て開始。0ABJ番号を もたないVoIPサービスはそれ以前からも存在。)。 次ページに従来の電話網とIP電話の一つであるNGNについて比較している。 WebRTC研修 Copyright©
2016 NTT Software Corporation
13.
13 http://itpro.nikkeibp.co.jp/article/COLUMN/20070123/259321/ から引用 2.1 IP電話はそもそもどうやってつながるか?(続き) WebRTC研修
Copyright© 2016 NTT Software Corporation
14.
14 2.2 SIP/SDP IP電話を実現するためのプロトコルとしてはH.323, MGCP,
Megacoなど、歴史的に 様々なプロトコルが存在しているが、現在広く使われているのはIETFが策定した SIP(Session Initiation Protocol)である(SIPは基本プロトコルの容易さ、高い拡張性 という観点で他のプロトコルよりも優れていた。現状SIPの拡張仕様は多岐にわたる ため、これらを複数組みあわせた場合にトータルとして仕様自体は複雑となっている 場合がある)。 SIP (Session Initiation Protocol): 基本となるプロトコル仕様はRFC3261で規定される。 端末(SIP UA)のSIPネットワークへの登録(REGISTER)や他UAとの通信の確立 (INVITE)・終了(BYE)などの信号・手順を規定する。音声・映像のみならずプレゼ ンスやIMの拡張が可能であり、他のRFCで規定が行われている。 本プロトコルはあくまでの通信(セッション)の開始・終了などを規定するのみであり、 実際の通信の内容(音声であるか映像であるか、通信コーデックや通信ポート等) については規定しない。(この部分はSDPに記述される) ⇒WebRTCでは呼制御プロトコルは規定がないので、SIPを利用してもよいし別の プロトコルを利用してもよい。 SDP (Session Description Protocol): RFC4566で規定している。通信(セッション)でUA同士がやりとりする際の方式 (メディアの種類、コーデック、通信ポート番号、IPアドレス等)を交換する。 ⇒WebRTCでもピア間のやりとりで利用する。 WebRTC研修 Copyright© 2016 NTT Software Corporation
15.
15 SIPメッセージ(INVITE) RFC3261から抜粋 INVITE sip:bob@biloxi.com
SIP/2.0 Via: SIP/2.0/UDP pc33.atlanta.com;branch=z9hG4bK776asdhds Max-Forwards: 70 To: Bob <sip:bob@biloxi.com> From: Alice <sip:alice@atlanta.com>;tag=1928301774 Call-ID: a84b4c76e66710@pc33.atlanta.com CSeq: 314159 INVITE Contact: <sip:alice@pc33.atlanta.com> Content-Type: application/sdp Content-Length: 142 【参考】SIPメッセージの例、SDPメッセージの例 SDPメッセージ例 RFC4566から抜粋 v=0 o=jdoe 2890844526 2890842807 IN IP4 10.47.16.5 s=SDP Seminar i=A Seminar on the session description protocol u=http://www.example.com/seminars/sdp.pdf e=j.doe@example.com (Jane Doe) c=IN IP4 224.2.17.12/127 t=2873397496 2873404696 a=recvonly m=audio 49170 RTP/AVP 0 m=video 51372 RTP/AVP 99 a=rtpmap:99 h263-1998/90000 WebRTC研修 Copyright© 2016 NTT Software Corporation
16.
16 Alice SIPサーバ Bob 【参考】
SIPシーケンス(NAT越えや認証・セキュリティ、B2BUAなどを除いたシンプル例) RTP REGISTER 200 OK REGISTER 200 OK INVITE(with SDP(Offer)) INVITE 180 Ringing 180 Ringing 200 OK (with SDP (Answer)) 200 OK ACK WebRTC研修 Copyright© 2016 NTT Software Corporation
17.
17 2.3 音声コーデック(PCMA/PCMU/Opus)映像コーデック(VP8)の概要説明 ドラフトバージョンのRTCWeb仕様(IETF)では、音声について以下をサポートすることが 必須となっている。 ・PCMA/PCMU(ITU-T G.711
alaw/ulaw) 非常に普及しているコーデック(特にulaw)。 ・Opus (RFC 6716) 最新の音声コーデック。低遅延 ・DTMF(RFC 4733) 音声信号でプッシュ信号(0~9、*, #)を送受信するフォーマット WebRTCをサポートするブラウザ同士では、少なくとも上記のような音声コーデック を利用した音声通信は可能である。(Chrome/FireFoxは使える) ビデオコーデックについては、IETF91でVP8とH.264の両方を実装することと決定された。 ⇒Chromeは現状、VP8のみ実装、FireFoxはVP8/H.264の両方を実装 既存の電話網の映像通信についてはH.264が利用されている場合が多いため、電話網とのビデオ を利用した相互接続時には、FireFoxの方が有利といえる。 WebRTC研修 Copyright© 2016 NTT Software Corporation
18.
2.4 P2P vs
B2BUA SIPで異なるピア間で通信を行う場合に、ピア同士が直接メディアをやりとりする方式 をP2P(Peer to Peer)と呼びます。これとは対照的に、メディアパスにサーバが介在する 方式も存在します。この場合、サーバはB2BUA(Back to Back User Agent)と呼ばれる 方式で動作します。 例えば、2つのSIPのネットワークがあり、SIPプロトコルやコーデックに差分がある場合 にB2BUAで変換処理を行うことにより、端末に影響・変更を与えずに2つのピア間での 通信を実現することができます。このような使い方をする際にこのSIPサーバはSIP-GW あるいはSBC(Session Border Controller)と呼ばれます。 18WebRTC研修 Copyright© 2016 NTT Software Corporation
19.
19 2.5 NAT問題 SIPを利用したP2P接続では、SIPサーバを介して通話者(例.AliceとBob)同士がSDPを 使ってアドレスを交換した後に、直接メディア通信(音声/ビデオ/音声+ビデオ)を行う。 通話者同士が同一のLAN内に属していれば、互いに通信が可能であるが、NATルータが 2者間に存在していると、通信ができない(NAT問題)。 WebRTC研修 Copyright©
2016 NTT Software Corporation
20.
20 2.5 NAT問題(補足) メディア接続の際にはSIP-UAはSDPに記述されたIPアドレスを使って 相手との接続を行おうとする。 ただし、通常、SIP-UAを動かしているデバイスはローカルなアドレスしか意識しないため SDPの中にはローカルのIPアドレスを設定する(NATの外のアドレスは通常は知りようが ないし設定しない)。 WebRTC研修 Copyright©
2016 NTT Software Corporation
21.
21 2.6 NAT越え技術(STUN,TURN,ICE) 192.168.1.100 192.168.1.101 SIPサーバ NATルーター 10.10.10.1 STUNを用いてNAT越えする場合 前述の問題を回避するためには、SIP-UAがデバイスのローカルのアドレスのみでなく NATの外のアドレスを意識してSDPに含める必要がある。このときに、利用するのがSTUN サーバである。 NATルーター 20.20.20.1 Publicな STUNサーバ NATルーター 10.10.10.1 192.168.1.100 Publicな STUNサーバ ①STUN binding request NATの外の アドレスを 教えてください。 ②STUN binding response NATの外の アドレスは 10.10.10.1 ですよ。 STUNの動作原理 WebRTC研修
Copyright© 2016 NTT Software Corporation
22.
22 2.6 NAT越え技術(STUN,TURN,ICE) (続き) 192.168.1.100
192.168.1.101 SIPサーバ NATルーター 10.10.10.1 TURNサーバを用いたNAT越え 前ページのSTUNサーバを利用したNAT越えは有効な解決策であるが、ある種類の構成で はNATを越えられない場合がある。このような場合にはメディアをリレーするTURN サーバをもちいる場合がある。ただし、TURNサーバを利用すると一般的に遅延が増加する ことやサーバの運用費がますことに注意が必要である。 NATルーター 20.20.20.1 TURNサーバ WebRTC研修 Copyright© 2016 NTT Software Corporation
23.
23 3.WebRTC詳細 WebRTC研修 Copyright© 2016
NTT Software Corporation
24.
24 WebRTCはHTML5で規定されるaudio要素、video要素を実現する技術の名称であり、以下の3 つの機能から成り立ちます。 ①getUserMedia機能(PCローカルなカメラ、マイク、スピーカデバイスアクセス) ②PeerConnection機能(他ブラウザと①のデータをU-planeで通信する機能) ③DataChannel機能(ピア間でのセキュアなデータ通信機能) これらの機能はWebRTCを実装するブラウザにプラグインなしで実装されます。上記の機能はブラ ウザがAPIとして公開しており、アプリケーション部から呼び出しが可能です。C-plane処理はアプ リケーション部で実行されます。アプリケーション部はJavaScriptとしてサーバからのダウンロード が可能です。 Webブラウザ (HTML5クライアント) WebRTC アプリケーション部 (Javascript) プログラミング可能 Webブラウザ (HTML5クライアント) WebRTC アプリケーション部 (Javascript) プログラミング可能 RTC-Web サーバ U-plane処理(ICE、SRTP) (②PeerConnection機能) C-plane処理(SIP over websocket他) PCローカルのカメラ/マイクへのアクセス (①getUserMedia機能) データ通信機能 (③DataChannel機能) 3.1
アーキテクチャ 以降では、①②について中心にのべます。 ③は参考。 APIAPI 24WebRTC研修 Copyright© 2016 NTT Software Corporation
25.
25 以下に大まかな処理の流れを述べます(ICE処理は割愛)。 1.画面ロードあるいはボタン押下などをトリガに、getUserMediaを呼び出しローカルのカメラ・マイクへのアクセ スを取得し、自画面に表示します。 2.PeerConnectionオブジェクトを生成し、メディア情報(Offer SDP)を作成します。ローカルSDPに本情報をセッ トします。 3.2で作成したメディア情報(Offer SDP)をRTC-Webサーバ経由で相手に送ります。 4.Offerを受信したら、PeerConnectionを生成します。受信したSDPをリモートSDPにセットしたあとで、Answer SDPを生成してRTC-Webサーバを使って相手に送ります。Answer
SDPはローカルSDPにセットします。 5.受信したAnswerをリモートSDPにセットします。 Webブラウザ (HTML5クライアント) アリス WebRTC アプリケーション部 (Javascript) プログラミング可能 Webブラウザ (HTML5クライアント) ボブ WebRTC アプリケーション部 (Javascript) プログラミング可能 RTC-Web サーバ U-plane処理(ICE、SRTP) (②PeerConnection機能) C-plane処理(SIP over websocket他) PCローカルのカメラ/マイク へのアクセス(①getUserMedia機能) 3.2 処理の流れ Offer Ans wer 25WebRTC研修 Copyright© 2016 NTT Software Corporation
26.
午後はWebRTCのサンプル構築を3つのステップ(演習1、演習2、演習3)に分けて進めます。 演習1では、SDP情報を運ぶために利用するWebSocketの仕組み(SDPはのせません。まずは 純粋なトランスポートとしての利用方法について学びます) 演習2では、ローカルメディアへのアクセス(getUserMedia) 演習3では、演習1で利用したWebSocketにSDP(Offer,Answer)をのせて実際にWebRTCの動作 を行います。 演習の予告(演習1、演習2) 26 Webブラウザ (HTML5クライアント) WebRTC アプリケーション部 (Javascript) プログラミング可能 Webブラウザ (HTML5クライアント) WebRTC アプリケーション部 (Javascript) プログラミング可能 RTC-Web サーバ U-plane処理(ICE、SRTP) (②PeerConnection機能) C-plane処理(SIP over websocket他) PCローカルのカメラ/マイクへのアクセス (①getUserMedia機能) データ通信機能 (③DataChannel機能) APIAPI 演習1の範囲 演習2の範囲
26WebRTC研修 Copyright© 2016 NTT Software Corporation
27.
27 3.3 WebSocket 概要 HTTPを拡張したWebSocketプロトコルを用いることで、Web上での双方向通信 や高速通信を可能とするAPI。 TCPソケット通信に類似のコーディングを行うことが可能。 何ができるか? ・ブラウザ上で双方向通信を行うことができる。 例:チャット、ネットワークゲームなど ※従来のブラウザでの双方向通信の問題を解消。 - 通信するたびに不要なHTTPヘッダの付加 -
サーバからの応答が返ってこないと次のデータを送信できない WebRTC研修 Copyright© 2016 NTT Software Corporation
28.
28 双方向通信 Web サーバ チャットアプリの例 メッセージ「Hello」 メッセージ「Hello」 WebSocket開始 メッセージ「Hi」 メッセージ「Hi」 コネクション維持 3.3 WebSocket(続き) WebRTC研修 Copyright©
2016 NTT Software Corporation
29.
29 ・プロトコルバージョンにより仕様が異なる。 特にWebSocketドラフト版に対応しているブラウザ・サーバは 組み合わせによっては動作しない可能性がある。 ※最新のバージョンは、Sec-WebSocket-Version:13 (RFC 6455) ・HTTPと異なる独自プロトコルを用いるため、WebSocketに対応した サーバが必要 対応サーバには、Tomct
7.0、Jetty 8.0、socket.io(node.js)などが存在する。 ※Server-Sent Eventsは既存のHTTPサーバが利用可能 ・サーバ側コードもWebSocketに合わせた実装が必要 利用上の注意点 3.3 WebSocket(続き) WebRTC研修 Copyright© 2016 NTT Software Corporation
30.
30 // WebSocketの初期化(localhost:8124はWebSocket配置するサーバに合わせて修正) var ws
= new WebSocket("ws://localhost:8124/"); // サーバへデータ送信 ws.send(data); // サーバからデータ受信したときの処理 ws.onmessage = function(e) { // e.data でサーバから受信したデータを取得可能 var res = e.data; // 以降、任意の処理 使用例 ※サーバ側のWebSocketプログラミングの説明は、本研修では省略します。 ※一部抜粋 3.3 WebSocket(続き) No. API 概要 1 WebSocket(URL) 接続先URLを指定してWebSocketを初期化 2 send(data) 指定されたdata(文字列、バイナリ)を送信。 3 onmessage(callback) サーバからデータ受信した際の処理を定義。 callbackに受信時の関数を指定。 4 close() サーバとの接続を切断。 WebRTC研修 Copyright© 2016 NTT Software Corporation
31.
31 3.4 getUserMedia <input type="button"
value="Start" onclick="start()" id="startBtn"> <script> var startBtn = document.getElementById('startBtn'); function start() { navigator.getUserMedia({audio:true, video:true}, gotStream, logError); startBtn.disabled = true; } function gotStream(stream) { stream.onended = function () { startBtn.disabled = false; }; } function logError(error) { log(error.name + ": " + error.message); } </script> 使用例 No. API 概要 1 getUserMedia(MediaStreamConstraints constraints, NavigatorUserMediaSuccessCallback successCallback, NavigatorUserMediaErrorCallback errorCallback) ブラウザが音声入力デバイス(マイク)、映像入力 デバイス(カメラ)にアクセスし、そこから取得でき るストリーム。 第1引数:音声、映像の指定 第2引数:アクセス成功時のcallback 第3引数:アクセス失敗時のcallback WebRTC研修 Copyright© 2016 NTT Software Corporation
32.
32 セキュリティの観点から、最新のChromeではhttpsスキームでダウンロードした JavaScriptからでなければgetUserMediaを呼び出せなくなっています。 (不正なサイトにアクセスし、そこからダウンロードしたJavaScriptが、カメラ・マイクに アクセスできるようになると、セキュリティ上、問題となる可能性があります。) 今回の演習も元々、HTTPSで動作するように作っていたため、JavaScript含めて、 大きく書き直しています。 3.4 getUserMedia(続き) WebRTC研修 Copyright©
2016 NTT Software Corporation
33.
33 3.5 RTCPeerConnection RTCPeerConnectionでは複数のメソッドを定義しているが、この中で特に重要なものについて本 研修(講義および演習)で扱う。 No. API
概要 1 RTCPeerConnection オブジェクトコンストラクタ 2 createOffer Offerの生成 3 createAnswer Answerの生成 4 setLocalDescription ローカルSDPの設定 5 setRemoteDescription リモートSDPの設定 6 updateIce ICE/TURNサーバ情報の更新 7 addIceCandidate 相手から通知されたICE candidateをブラウザに通知 8 getConfiguration PeerConnectionの設定を取得 9 getLocalStreams PeerConnectionを使って相手に送っているストリーム(映像・ 音声)を取得 10 getRemoteStreams PeerConnectionを使って相手に送っているストリーム(映像・ 音声)を取得 11 getStreamById IDで指定されたストリームを取得 WebRTC研修 Copyright© 2016 NTT Software Corporation
34.
34 No. API 概要 12
addStream 指定したストリームをPeerConnectionに追加 (典型的な例はgetUserMediaで取得したストリームを PeerConnectionに追加する) 13 removeStream 指定したストリームをPeerConnectionから削除する 14 close 相手とのP2P通信を終了する 15 localDescription (読み取り専用)ローカルのSDP情報 16 remoteDescription (読み取り専用)リモートのSDP情報 17 signalingState (読み取り専用)通話状態 18 iceGatheringState (読み取り専用)ICEの情報収集状態 19 iceConnectionState (読み取り専用)ICEの接続状態 20 onnegotiationneeded 21 onicecandidate ICE candidateが取得できた場合のcallback 22 onsignalingstatechange 通話状態が変化した場合のcallback 3.5 RTCPeerConnection(続き) WebRTC研修 Copyright© 2016 NTT Software Corporation
35.
35 No. API 概要 23
onaddstream リモートピアがストリームを追加した場合のcallback 24 onremovestream リモートピアがストリームを削除した場合のcallback 25 oniceconnectionstatechange ICE状態が変化した場合のcallback 3.5 RTCPeerConnection(続き) WebRTC研修 Copyright© 2016 NTT Software Corporation
36.
36 No. API 概要 1
RTCPeerConnection(RTCConfiguration pc_config) PeerConnectionオブジェクトのコンストラクタ 第1引数:RTC設定(ICE/TURNサーバの指定、 ICEトランスポートの指定、ピア名の指定) 3.5 RTCPeerConnection(続き) WebRTC研修 Copyright© 2016 NTT Software Corporation
37.
37 No. API 概要 1
createOffer(RTCSessionDescriptionCallback successCallback, RTCPeerConnectionErrorCallback failureCallback, RTCOfferOptions options) Offer SDPの生成を行う 第1引数:成功時のコールバック 第2引数:失敗時のコールバック 第3引数:Offer生成時のオプション指定(音声 受信、ビデオ受信の有無など) 3.5.1 createOffer (RTCPeerConnectionのメソッド) WebRTC研修 Copyright© 2016 NTT Software Corporation
38.
38 No. API 概要 1
createAnswer (RTCSessionDescriptionCallback successCallback, RTCPeerConnectionErrorCallback failureCallback); Answer SDPの生成を行う。 第1引数:アクセス成功時のcallback 第2引数:アクセス失敗時のcallback 3.5.2 createAnswer (RTCPeerConnectionのメソッド) WebRTC研修 Copyright© 2016 NTT Software Corporation
39.
39 No. API 概要 1
setLocalDescription (RTCSessionDescription description, VoidFunction successCallback, RTCPeerConnectionErrorCallback failureCallback) ブラウザに自マシン(すなわちローカル)のSDP をセットする。 第1引数:セットするSDP 第2引数:アクセス成功時のcallback 第3引数:アクセス失敗時のcallback 典型的な例では発信者はcreateOfferで生成し たSDPを本APIで設定し、受信者は createAnswerで生成したSDPを本APIで設定 する 3.5.3 setLocalDescription (RTCPeerConnectionのメソッド) WebRTC研修 Copyright© 2016 NTT Software Corporation
40.
40 No. API 概要 1
setRemoteDescription (RTCSessionDescription description, VoidFunction successCallback, RTCPeerConnectionErrorCallback failureCallback); ブラウザに相手マシン(すなわちリモート)の SDPをセットする。 第1引数:セットするSDP 第2引数:アクセス成功時のcallback 第3引数:アクセス失敗時のcallback 典型的な例では発信者は相手が createAnswerで生成して送ってきたSDPを本 APIで設定し、受信者は相手がcreateOfferで 生成して送ってきたSDPを本APIで設定する 3.5.4 setRemoteDescription (RTCPeerConnectionのメソッド) WebRTC研修 Copyright© 2016 NTT Software Corporation
41.
41 【参考】 処理の流れ(発信者、受信者 APIの呼び出し方の大まかな流れ) 発信者
受信者 1.webSocket確立 1.webSocket確立 Webソケットサーバ 2.ユーザからの発呼トリガ 3.PeerConnectionオブジェクト 生成 4.getUserMedia 5.addStream() 6.createOffer() 7.setLocalDescription 8.SDP Offerを相手に送信 2.PeerConnectionオブジェクト生成 3.setRemoteDescription 4.getUserMedia 5.addStream() 6.createAnswer() 7.setLocalDescription 8.SDP Answerを相手に送信9.setRemoteDescription 注:順序は例。一部前後してもよいWebRTC研修 Copyright© 2016 NTT Software Corporation
42.
42 【参考】 APIに関する注記 今回の演習ではChromeを利用します。 getUserMedia, RTCPeerConnection利用時には以下のベンダプレフィックスをつけた 形で呼び出しを行ってください。 getUserMedia
-> navigator.webkitGetUserMedia RTCPeerConnection -> new webkitRTCPeerConnection WebRTC研修 Copyright© 2016 NTT Software Corporation
43.
43 3.6 SRTP WebRTCでは従来の電話網(あるいはIP電話網)とは異なり、RTPで運ばれる メディアデータ(音声orビデオ)がインターネット上を流れる可能性がある。このため RTPについてセキュリティを高めるためにSRTP(Secure RTP)を利用することが 必須となっている。 (G.711
ulawなどの代表的なコーデックでエンコードされたRTPパケットは暗号化 なしで送ると盗聴された場合に、容易に通話内容を再生することが可能となっている) SRTPでは、セッション開始時にピア間で交換した共通鍵を利用して、 音声データの暗号化等を行う。鍵交換の方式にはDTLS(UDP用のTLS。メディアパスを 利用して鍵交換)を利用する。 WebRTC研修 Copyright© 2016 NTT Software Corporation
44.
44 4.参考情報 WebRTC研修 Copyright© 2016
NTT Software Corporation
45.
45 4.1 DataChannelについて WebRTCでは音声・ビデオ以外の汎用的なデータについてもセキュアに2者間で 通信する仕組みが用意されています。これをWebRTCではData channelと呼んでいます。 Data
channelはSCTP(Stream Control Transmission Protocol)を利用しているため 順序保証/到達確認を可能にしています。また、通信はDTLSを利用して暗号化されるため セキュアな通信が保証されます。Data channelによる通信は音声・ビデオ通信とは独立して いるため、どちらか一方だけ利用することも両方を使うことも可能となっています。 192.168.1.100 192.168.1.101 RTCWebサーバ Data channel機能と音声・ビデオ通信機能の関係 音声・ビデオ通信 データ通信 WebRTC研修 Copyright© 2016 NTT Software Corporation
46.
46 4.2 画面共有 現状、Chrome/FireFoxでは、カメラ・マイクデバイス以外に、デスクトップや特定の アプリケーション画面、ブラウザのタブを、他のブラウザと共有することが可能となって います。 注1)Chromeの場合には、Chrome Extensionをインストールする必要がある (以前は、インストール無しで実行可能であったが、セキュリティ的によくないため、 現状のような仕組みとなっている) FireFoxの場合には、Nightly版で開発フラグをたてれば動く 動作原理としては、ビデオ画面のWebRTCと同様であり、カメラからの入力映像のかわり にPC上の画面をビデオとして相手に送ります。 このため、例えばリモートサポートのような「相手のPCの遠隔操作(支援)」的なものは これ単体ではできません。 #それでも特定の用途には非常に有用だと考えます。 WebRTC研修
Copyright© 2016 NTT Software Corporation
47.
47 4.3 ORTCについて ORTC (Object
RTC)という新しいAPI仕様がW3Cで議論されています。 ORTC特徴: ・SDPを直接操作しなくてよくなる(SDPの理解はWebディベロッパには難解) ・メディア操作をAPIを介して提供する ・Internet Explorerで実装される予定 ・既存のWebRTCの上位互換APIとして共存する可能性がある WebRTC研修 Copyright© 2016 NTT Software Corporation
48.
48 4.4 Stats APIについて WebRTCの統計情報について取得するAPIとしてStats
API(Statistics API) がW3Cで議論されています。(一部ブラウザでは実装済み) Identifiers for WebRTC's Statistics API(Working Draft) http://www.w3.org/TR/webrtc-stats/ ⇒インターネット上で通信することが前提であるWebRTCでメディア情報やNAT超え(ICE) の統計情報が取得できる。 パケットロス、遅延、ジッタなどの統計情報がブラウザ上で取得できるため、たとえば 映像品質が悪い場合に自動的に音声のみに切り替えを行う等の処理が期待できる WebRTC研修 Copyright© 2016 NTT Software Corporation
49.
WebRTCでリアルタイム通信を実現できることにより、WebRTCをサポートしたブラウザとSIPクライ アント間での相互接続の実現性も検討されている。 以下に、WebRTCサーバを拡張する場合(①)、ブラウザベースのSIPクライアントを利用する場合 (②)のアーキテクチャを示す。 ②で示したブラウザベースのSIPクライアントとして、オープンソースで公開されているのが、 sipML5である。 Web SIP/IMS Network SIP クライアント RTC-Web サーバ SIP 拡張 ROAP over HTTP、他 Web SIP/IMS
Network SIP クライアント SIPsipML5 サーバ SIP over WebSocket Web ブラウザ WebRTC Web ブラウザ WebRTC sipクライアント WebRTC サーバの拡張 ブラウザベースの SIPクライアント ① ② sipML5 SIP サーバ SIP SIP SIP サーバ SIP 4.5 sipML5 Asteriskに関する解説(SIPとWebRTCの相互接続実現方法) 49WebRTC研修 Copyright© 2016 NTT Software Corporation
50.
50 sipML5とは、Doubango Telecomが2012年5月に発表したブラウザベースのSIPクライアントである。 WebRTCをサポートしているHTML5仕様のブラウザにsipML5を導入することで、SIP/IMSネット ワークに接続しているクライアントとの音声/ビデオ通信、インスタントメッセージング等をブラウザ上 で動作させることが可能となる。 Web SIP/IMS Network SIP クライアント sipML5 サーバ SIP
over WebSocket Webブラウザ (HTML5クライアント) WebRTC Javascript SIP Javascript SDP SIP Proxy sipML5 ※動作させるためには、 webrtc2sip(Doubango プロダクト)が必要 (詳細後述) ブラウザ-SIP端末間で音声/ビデオ 通信やインスタントメッセージング等 のコミュニケーションが可能 SIP SIP サーバ SIP サポートされる機能 ・Audio / Video call ・Instant messaging ・Presence ・Call Hold / Resume ・Explicit Call transfer ・Multi-line and multi- account ・Dual-tone multi- frequency signaling (DTMF) using SIP INFO 4.5 sipML5 Asteriskに関する解説(sipML5とは) 50WebRTC研修 Copyright© 2016 NTT Software Corporation
51.
【参考】 sipML5の動作(呼確立シーケンス) -
アーキテクチャ②に対応 51 Chrome (Alice) SipML5 server (webrtc2sip ) SIPクライアン ト(Carry) 1. HTTP GET 3. REGISTER 0. JavaScript download(SIPロジック) SIP server 2. 101 Response (upgrade to SIP) 4. REGISTER 6. 200 OK 5. 200 OK 7. INVITE 8. INVITE 9. INVITE 10. INVITE SRTP 通常のSIP IVITEシーケンス +U-Plane処理(ICEのConnectivity check含む) サーバとのサブプロトコルネゴシェーション (S)RTP 51WebRTC研修 Copyright© 2016 NTT Software Corporation
52.
52 Asteriskとは米Digium社が開発したオープンソースのPBXである。 SIP, IAX, H.323など複数の呼処理プロトコルに対応している。 Asterisk
バージョン11からSIP over websocketをサポートすることによりwebRTC対応のブラウザを 端末として利用することを可能にしている。 4.5 sipML5 Asteriskに関する解説(Asteriskとは) 52WebRTC研修 Copyright© 2016 NTT Software Corporation
53.
53 Chrome (Alice) Asterisk SIPクライアン ト(Carry) 1. HTTP GET 3.
REGISTER 2. 101 Response (upgrade to SIP) 4. 200 OK 5. INVITE 10. INVITE SRTP 通常のSIP IVITEシーケンス +U-Plane処理(ICEのConnectivity check含む) サーバとのサブプロトコルネゴシェーション (S)RTP 【参考】 sipML5の動作(呼確立シーケンス) - Asteriskを利用した場合 53WebRTC研修 Copyright© 2016 NTT Software Corporation
54.
54 4.6 WebRTCをサポートした当社の製品 弊社でもAsteriskをベースとしたWebRTC製品を製造しており、NTT研究所様の 「アトリエN」施策でご利用いただいております。 https://developer.api-trial.jp/ja/apis/crossway/document (図はNTT研究所様のHPからの抜粋) WebRTC研修 Copyright©
2016 NTT Software Corporation
55.
55 http://peerconnection-video- chat.herokuapp.com/webrtc_report/webrtc_summary.html 4.7 その他有用なリンク http://blog.wnotes.net/blog/article/webrtc-beginning http://tjun.org/blog/2013/12/webrtc_p2p/ WebRTCに使われるP2Pの技術 WebRTCを仕組みから実装までやってみる WebRTC GetUserMediaとPeerConnectionについて http://dev.w3.org/2011/webrtc/editor/archives/20140704/webrtc.html W3C
WebRTC 1.0: Real-time Communication Between Browsers WebRTC研修 Copyright© 2016 NTT Software Corporation
56.
https://www.ntts.co.jp/products/soft_dojyo/index.html
Descargar ahora