Enviar búsqueda
Cargar
はじめてのWebRTC/ORTC
•
8 recomendaciones
•
4,283 vistas
Yusuke Naka
Seguir
2017.02.13 追記 - P39 制限付きフルコーン☓シンメトリックの組み合わせはSTUNで通信できるため修正
Leer menos
Leer más
Denunciar
Compartir
Denunciar
Compartir
1 de 78
Descargar ahora
Descargar para leer sin conexión
Recomendados
WebRTC SFU mediasoup sample
WebRTC SFU mediasoup sample
mganeko
WebRTC/ORTCの最新動向まるわかり!
WebRTC/ORTCの最新動向まるわかり!
Yusuke Naka
WebブラウザでP2Pを実現する、WebRTCのAPIと周辺技術
WebブラウザでP2Pを実現する、WebRTCのAPIと周辺技術
Yoshiaki Sugimoto
WebRTC入門+最新動向
WebRTC入門+最新動向
Ryosuke Otsuya
注目の最新技術「WebRTC」とは? -技術概要と事例紹介-
注目の最新技術「WebRTC」とは? -技術概要と事例紹介-
Yusuke Naka
WebRTC Build MCU on browser
WebRTC Build MCU on browser
mganeko
WebRTCハンズオン
WebRTCハンズオン
Yusuke Naka
WebSocket / WebRTCの技術紹介
WebSocket / WebRTCの技術紹介
Yasuhiro Mawarimichi
Recomendados
WebRTC SFU mediasoup sample
WebRTC SFU mediasoup sample
mganeko
WebRTC/ORTCの最新動向まるわかり!
WebRTC/ORTCの最新動向まるわかり!
Yusuke Naka
WebブラウザでP2Pを実現する、WebRTCのAPIと周辺技術
WebブラウザでP2Pを実現する、WebRTCのAPIと周辺技術
Yoshiaki Sugimoto
WebRTC入門+最新動向
WebRTC入門+最新動向
Ryosuke Otsuya
注目の最新技術「WebRTC」とは? -技術概要と事例紹介-
注目の最新技術「WebRTC」とは? -技術概要と事例紹介-
Yusuke Naka
WebRTC Build MCU on browser
WebRTC Build MCU on browser
mganeko
WebRTCハンズオン
WebRTCハンズオン
Yusuke Naka
WebSocket / WebRTCの技術紹介
WebSocket / WebRTCの技術紹介
Yasuhiro Mawarimichi
5分でわかるWebRTC
5分でわかるWebRTC
Ryosuke Otsuya
Visual Studio Code で C# でのアプリ開発
Visual Studio Code で C# でのアプリ開発
m ishizaki
WebRTC SFU Mediasoup Sample update
WebRTC SFU Mediasoup Sample update
mganeko
Supabase Edge Functions と Netlify Edge Functions を使ってみる – 機能とその比較 –
Supabase Edge Functions と Netlify Edge Functions を使ってみる – 機能とその比較 –
虎の穴 開発室
WebRTCの技術解説 公開版
WebRTCの技術解説 公開版
Contest Ntt-west
WebRTC と Native とそれから、それから。
WebRTC と Native とそれから、それから。
tnoho
【基礎編】社内向けMySQL勉強会
【基礎編】社内向けMySQL勉強会
Yuji Otani
究極のゲーム用通信プロトコルを探せ!
究極のゲーム用通信プロトコルを探せ!
Ryosuke Otsuya
ラズパイでWebRTC ヾ(*´∀`*)ノキャッキャ uv4l-webrtc 軽くハックしてみたよ!
ラズパイでWebRTC ヾ(*´∀`*)ノキャッキャ uv4l-webrtc 軽くハックしてみたよ!
Kensaku Komatsu
WebRTC配信とハードウェアエンコーダ
WebRTC配信とハードウェアエンコーダ
tnoho
Skywayのビデオチャットを録画しよう。そう、ブラウザでね
Skywayのビデオチャットを録画しよう。そう、ブラウザでね
mganeko
WebRTC mediasoup on raspberrypi3
WebRTC mediasoup on raspberrypi3
mganeko
WebRTCとPeer.jsを使った実装
WebRTCとPeer.jsを使った実装
Yuta Suzuki
Building the Game Server both API and Realtime via c#
Building the Game Server both API and Realtime via c#
Yoshifumi Kawai
究極のゲーム用通信プロトコル “WebRTC”
究極のゲーム用通信プロトコル “WebRTC”
Ryosuke Otsuya
.NET 7 での ASP.NET Core Blazor の新機能ピックアップ
.NET 7 での ASP.NET Core Blazor の新機能ピックアップ
一希 大田
WebRTCの技術解説 第二版 公開版 完全版
WebRTCの技術解説 第二版 公開版 完全版
Contest Ntt-west
HTTPを理解する
HTTPを理解する
IIJ
mTCP使ってみた
mTCP使ってみた
Hajime Tazaki
WebRTCで動かす“テレイグジスタンス”ロボット
WebRTCで動かす“テレイグジスタンス”ロボット
NTT Communications Technology Development
SkyWay国内唯一のCPaaS
SkyWay国内唯一のCPaaS
Kensaku Komatsu
WebRTCが拓く新たなWebビジネスの世界
WebRTCが拓く新たなWebビジネスの世界
Kensaku Komatsu
Más contenido relacionado
La actualidad más candente
5分でわかるWebRTC
5分でわかるWebRTC
Ryosuke Otsuya
Visual Studio Code で C# でのアプリ開発
Visual Studio Code で C# でのアプリ開発
m ishizaki
WebRTC SFU Mediasoup Sample update
WebRTC SFU Mediasoup Sample update
mganeko
Supabase Edge Functions と Netlify Edge Functions を使ってみる – 機能とその比較 –
Supabase Edge Functions と Netlify Edge Functions を使ってみる – 機能とその比較 –
虎の穴 開発室
WebRTCの技術解説 公開版
WebRTCの技術解説 公開版
Contest Ntt-west
WebRTC と Native とそれから、それから。
WebRTC と Native とそれから、それから。
tnoho
【基礎編】社内向けMySQL勉強会
【基礎編】社内向けMySQL勉強会
Yuji Otani
究極のゲーム用通信プロトコルを探せ!
究極のゲーム用通信プロトコルを探せ!
Ryosuke Otsuya
ラズパイでWebRTC ヾ(*´∀`*)ノキャッキャ uv4l-webrtc 軽くハックしてみたよ!
ラズパイでWebRTC ヾ(*´∀`*)ノキャッキャ uv4l-webrtc 軽くハックしてみたよ!
Kensaku Komatsu
WebRTC配信とハードウェアエンコーダ
WebRTC配信とハードウェアエンコーダ
tnoho
Skywayのビデオチャットを録画しよう。そう、ブラウザでね
Skywayのビデオチャットを録画しよう。そう、ブラウザでね
mganeko
WebRTC mediasoup on raspberrypi3
WebRTC mediasoup on raspberrypi3
mganeko
WebRTCとPeer.jsを使った実装
WebRTCとPeer.jsを使った実装
Yuta Suzuki
Building the Game Server both API and Realtime via c#
Building the Game Server both API and Realtime via c#
Yoshifumi Kawai
究極のゲーム用通信プロトコル “WebRTC”
究極のゲーム用通信プロトコル “WebRTC”
Ryosuke Otsuya
.NET 7 での ASP.NET Core Blazor の新機能ピックアップ
.NET 7 での ASP.NET Core Blazor の新機能ピックアップ
一希 大田
WebRTCの技術解説 第二版 公開版 完全版
WebRTCの技術解説 第二版 公開版 完全版
Contest Ntt-west
HTTPを理解する
HTTPを理解する
IIJ
mTCP使ってみた
mTCP使ってみた
Hajime Tazaki
WebRTCで動かす“テレイグジスタンス”ロボット
WebRTCで動かす“テレイグジスタンス”ロボット
NTT Communications Technology Development
La actualidad más candente
(20)
5分でわかるWebRTC
5分でわかるWebRTC
Visual Studio Code で C# でのアプリ開発
Visual Studio Code で C# でのアプリ開発
WebRTC SFU Mediasoup Sample update
WebRTC SFU Mediasoup Sample update
Supabase Edge Functions と Netlify Edge Functions を使ってみる – 機能とその比較 –
Supabase Edge Functions と Netlify Edge Functions を使ってみる – 機能とその比較 –
WebRTCの技術解説 公開版
WebRTCの技術解説 公開版
WebRTC と Native とそれから、それから。
WebRTC と Native とそれから、それから。
【基礎編】社内向けMySQL勉強会
【基礎編】社内向けMySQL勉強会
究極のゲーム用通信プロトコルを探せ!
究極のゲーム用通信プロトコルを探せ!
ラズパイでWebRTC ヾ(*´∀`*)ノキャッキャ uv4l-webrtc 軽くハックしてみたよ!
ラズパイでWebRTC ヾ(*´∀`*)ノキャッキャ uv4l-webrtc 軽くハックしてみたよ!
WebRTC配信とハードウェアエンコーダ
WebRTC配信とハードウェアエンコーダ
Skywayのビデオチャットを録画しよう。そう、ブラウザでね
Skywayのビデオチャットを録画しよう。そう、ブラウザでね
WebRTC mediasoup on raspberrypi3
WebRTC mediasoup on raspberrypi3
WebRTCとPeer.jsを使った実装
WebRTCとPeer.jsを使った実装
Building the Game Server both API and Realtime via c#
Building the Game Server both API and Realtime via c#
究極のゲーム用通信プロトコル “WebRTC”
究極のゲーム用通信プロトコル “WebRTC”
.NET 7 での ASP.NET Core Blazor の新機能ピックアップ
.NET 7 での ASP.NET Core Blazor の新機能ピックアップ
WebRTCの技術解説 第二版 公開版 完全版
WebRTCの技術解説 第二版 公開版 完全版
HTTPを理解する
HTTPを理解する
mTCP使ってみた
mTCP使ってみた
WebRTCで動かす“テレイグジスタンス”ロボット
WebRTCで動かす“テレイグジスタンス”ロボット
Similar a はじめてのWebRTC/ORTC
SkyWay国内唯一のCPaaS
SkyWay国内唯一のCPaaS
Kensaku Komatsu
WebRTCが拓く新たなWebビジネスの世界
WebRTCが拓く新たなWebビジネスの世界
Kensaku Komatsu
WebRTC の紹介
WebRTC の紹介
Kensaku Komatsu
エフサミ2014 web rtcの傾向と対策
エフサミ2014 web rtcの傾向と対策
Kensaku Komatsu
iPhoneでなんちゃってWebRTC
iPhoneでなんちゃってWebRTC
Kensaku Komatsu
SkyWay HandsOn
SkyWay HandsOn
Yusuke Naka
14th apr2015 リックテレコ勉強会
14th apr2015 リックテレコ勉強会
Kensaku Komatsu
WebRTC入門 ~沖縄編~
WebRTC入門 ~沖縄編~
Ryosuke Otsuya
02172016 web rtc_conf_komasshu
02172016 web rtc_conf_komasshu
Kensaku Komatsu
Web rtcの使い方
Web rtcの使い方
Kensaku Komatsu
WebRTCにより可視化されるリアルタイムクラウド。求められるAPI
WebRTCにより可視化されるリアルタイムクラウド。求められるAPI
Kensaku Komatsu
Web of Thingsの現状とWebRTC活用の可能性
Web of Thingsの現状とWebRTC活用の可能性
Kensaku Komatsu
【初心者向け】WebRTCとボディソニックデバイスを使ったサイクリング体験のリアルタイム共有
【初心者向け】WebRTCとボディソニックデバイスを使ったサイクリング体験のリアルタイム共有
Yuichi MAKI
Web RTCにより拓かれるコミュニケーションサービスの形 「新たなバリュー創造へ。ntt comのチャレンジ」webアプリケーション エバンジェリスト ...
Web RTCにより拓かれるコミュニケーションサービスの形 「新たなバリュー創造へ。ntt comのチャレンジ」webアプリケーション エバンジェリスト ...
Mickey Miki
SkyWayとWebRTC開発者コミュニティ4年間の軌跡とCMC_Meetupで学んだこと、実践したこと
SkyWayとWebRTC開発者コミュニティ4年間の軌跡とCMC_Meetupで学んだこと、実践したこと
Yusuke Naka
WebRTCを始めよう! HTML5fun 第一回勉強会
WebRTCを始めよう! HTML5fun 第一回勉強会
Yusuke Naka
Software is eating the world
Software is eating the world
Osaka University
HTML5 APIと組み合わせて作るWebRTCアプリ
HTML5 APIと組み合わせて作るWebRTCアプリ
WebRTCConferenceJapan
HTML5 APIと組み合わせて作るWebRTCアプリ
HTML5 APIと組み合わせて作るWebRTCアプリ
WebRTCConferenceJapan
⼤企業で実現するイマドキの内製開発
⼤企業で実現するイマドキの内製開発
NTT Communications Technology Development
Similar a はじめてのWebRTC/ORTC
(20)
SkyWay国内唯一のCPaaS
SkyWay国内唯一のCPaaS
WebRTCが拓く新たなWebビジネスの世界
WebRTCが拓く新たなWebビジネスの世界
WebRTC の紹介
WebRTC の紹介
エフサミ2014 web rtcの傾向と対策
エフサミ2014 web rtcの傾向と対策
iPhoneでなんちゃってWebRTC
iPhoneでなんちゃってWebRTC
SkyWay HandsOn
SkyWay HandsOn
14th apr2015 リックテレコ勉強会
14th apr2015 リックテレコ勉強会
WebRTC入門 ~沖縄編~
WebRTC入門 ~沖縄編~
02172016 web rtc_conf_komasshu
02172016 web rtc_conf_komasshu
Web rtcの使い方
Web rtcの使い方
WebRTCにより可視化されるリアルタイムクラウド。求められるAPI
WebRTCにより可視化されるリアルタイムクラウド。求められるAPI
Web of Thingsの現状とWebRTC活用の可能性
Web of Thingsの現状とWebRTC活用の可能性
【初心者向け】WebRTCとボディソニックデバイスを使ったサイクリング体験のリアルタイム共有
【初心者向け】WebRTCとボディソニックデバイスを使ったサイクリング体験のリアルタイム共有
Web RTCにより拓かれるコミュニケーションサービスの形 「新たなバリュー創造へ。ntt comのチャレンジ」webアプリケーション エバンジェリスト ...
Web RTCにより拓かれるコミュニケーションサービスの形 「新たなバリュー創造へ。ntt comのチャレンジ」webアプリケーション エバンジェリスト ...
SkyWayとWebRTC開発者コミュニティ4年間の軌跡とCMC_Meetupで学んだこと、実践したこと
SkyWayとWebRTC開発者コミュニティ4年間の軌跡とCMC_Meetupで学んだこと、実践したこと
WebRTCを始めよう! HTML5fun 第一回勉強会
WebRTCを始めよう! HTML5fun 第一回勉強会
Software is eating the world
Software is eating the world
HTML5 APIと組み合わせて作るWebRTCアプリ
HTML5 APIと組み合わせて作るWebRTCアプリ
HTML5 APIと組み合わせて作るWebRTCアプリ
HTML5 APIと組み合わせて作るWebRTCアプリ
⼤企業で実現するイマドキの内製開発
⼤企業で実現するイマドキの内製開発
Más de Yusuke Naka
SkyWayを使いこなすために How to use SkyWay -SkyWay UG Kansai #1 スペシャルバージョン-
SkyWayを使いこなすために How to use SkyWay -SkyWay UG Kansai #1 スペシャルバージョン-
Yusuke Naka
SkyWay UG Kansai #1 Kickoff
SkyWay UG Kansai #1 Kickoff
Yusuke Naka
SkyWay UG Tokyo #1 Kickoff
SkyWay UG Tokyo #1 Kickoff
Yusuke Naka
実践 WebRTC 〜最新事例と開発ノウハウの紹介〜
実践 WebRTC 〜最新事例と開発ノウハウの紹介〜
Yusuke Naka
NTTコミュニケーションズがちょっと変わったメディアを作ったわけ
NTTコミュニケーションズがちょっと変わったメディアを作ったわけ
Yusuke Naka
WebRTC NextVersion時代のJavaScript開発
WebRTC NextVersion時代のJavaScript開発
Yusuke Naka
HTML5 Experts.jp パフォーマンス・チューニング
HTML5 Experts.jp パフォーマンス・チューニング
Yusuke Naka
WebRTC開発者向けプラットフォーム SkyWayの裏側
WebRTC開発者向けプラットフォーム SkyWayの裏側
Yusuke Naka
TypeScriptをオススメする理由
TypeScriptをオススメする理由
Yusuke Naka
getUserMedia
getUserMedia
Yusuke Naka
FuelPHP活用事例
FuelPHP活用事例
Yusuke Naka
Chrome Extensionでスクリーンシェアをやってみる
Chrome Extensionでスクリーンシェアをやってみる
Yusuke Naka
ORTCの仕様書をざっくり斜め読みする
ORTCの仕様書をざっくり斜め読みする
Yusuke Naka
5分で分るWebRTCコーデックウォーズ
5分で分るWebRTCコーデックウォーズ
Yusuke Naka
第72回読書するエンジニアの会(テーマ:変人)
第72回読書するエンジニアの会(テーマ:変人)
Yusuke Naka
5jCup WebRTC賞
5jCup WebRTC賞
Yusuke Naka
Webrtc最新動向
Webrtc最新動向
Yusuke Naka
SPAを実現するために必要な通信技術
SPAを実現するために必要な通信技術
Yusuke Naka
Más de Yusuke Naka
(18)
SkyWayを使いこなすために How to use SkyWay -SkyWay UG Kansai #1 スペシャルバージョン-
SkyWayを使いこなすために How to use SkyWay -SkyWay UG Kansai #1 スペシャルバージョン-
SkyWay UG Kansai #1 Kickoff
SkyWay UG Kansai #1 Kickoff
SkyWay UG Tokyo #1 Kickoff
SkyWay UG Tokyo #1 Kickoff
実践 WebRTC 〜最新事例と開発ノウハウの紹介〜
実践 WebRTC 〜最新事例と開発ノウハウの紹介〜
NTTコミュニケーションズがちょっと変わったメディアを作ったわけ
NTTコミュニケーションズがちょっと変わったメディアを作ったわけ
WebRTC NextVersion時代のJavaScript開発
WebRTC NextVersion時代のJavaScript開発
HTML5 Experts.jp パフォーマンス・チューニング
HTML5 Experts.jp パフォーマンス・チューニング
WebRTC開発者向けプラットフォーム SkyWayの裏側
WebRTC開発者向けプラットフォーム SkyWayの裏側
TypeScriptをオススメする理由
TypeScriptをオススメする理由
getUserMedia
getUserMedia
FuelPHP活用事例
FuelPHP活用事例
Chrome Extensionでスクリーンシェアをやってみる
Chrome Extensionでスクリーンシェアをやってみる
ORTCの仕様書をざっくり斜め読みする
ORTCの仕様書をざっくり斜め読みする
5分で分るWebRTCコーデックウォーズ
5分で分るWebRTCコーデックウォーズ
第72回読書するエンジニアの会(テーマ:変人)
第72回読書するエンジニアの会(テーマ:変人)
5jCup WebRTC賞
5jCup WebRTC賞
Webrtc最新動向
Webrtc最新動向
SPAを実現するために必要な通信技術
SPAを実現するために必要な通信技術
はじめてのWebRTC/ORTC
1.
Copyright © NTT
Communications Corporation. All rights reserved. HTML5 Conference 2015 in ⿅児島 はじめてのWebRTC/ORTC NTTコミュニケーションズ株式会社 技術開発部 仲 裕介
2.
Copyright © NTT
Communications Corporation. All rights reserved. ⾃⼰紹介 1 uなかゆうすけ(@Tukimikage) l NTTコミュニケーションズ 技術開発部 所属 Ø 主にWebエンジニア l コミュニティ活動 Ø WebRTC Meetup Tokyo主催 http://webrtcjp.info/
3.
Copyright © NTT
Communications Corporation. All rights reserved. ⾃⼰紹介 2 u 仕事その1 WebRTC開発者向けプラットフォームSkyWayの開発・運営 ・2013年12⽉5⽇に提供開始 ・詳しくは後ほど! https://skyway.io
4.
Copyright © NTT
Communications Corporation. All rights reserved. ⾃⼰紹介 3 u 仕事その2 HTML5 Experts.jpの運営 ・HTML5に特化した Web技術者向け情報メディア ・⽇本最⾼峰のWebエキスパート、 コントリビューターによる情報発信 ・コントリビューター(寄稿者)募集! https://html5experts.jp/
5.
Copyright © NTT
Communications Corporation. All rights reserved. 今⽇のセッションのゴール 4 • 最新Web技術として注⽬を集めている WebRTC/ORTCに興味を持ってもらう。 • WebRTCは様々なシーンで活⽤できそうだという期待 感を持ってもらう。
6.
Copyright © NTT
Communications Corporation. All rights reserved. 想定聴者 • WebRTC/ORTCは初⽿な⽅ • WebRTCを利⽤したアプリ開発をやってみたいと考え ている、もしくはやっている⼈ • WebRTCについてはかなり深い部分まで理解してる 5
7.
Copyright © NTT
Communications Corporation. All rights reserved. 本⽇のアジェンダ 6 • はじめてのWebRTC/ORTC • WebRTCとは • 活⽤事例、デモンストレーション • WebRTCで使われている技術要素の紹介 • 最新標準化動向 • SkyWayをつかって開発してみよう を紹介
8.
Copyright © NTT
Communications Corporation. All rights reserved. 7 HTML5の全体像 HTML5が提供する機能は多岐にわたる。WebRTCはその⼀つの技術。 引⽤元:http://www.slideshare.net/dynamis/web-standards-infographics
9.
Copyright © NTT
Communications Corporation. All rights reserved. 8 WebRTCとは(概要) ひとことで⾔うと「ブラウザでテレビ電話を実現する技術」 ブラウザだけで、プラグインのインストール無しに、Web会議、 ボイスチャット、テキストチャット、ファイル転送、電話との連 携等が実現可能。 従来のWeb WebRTC カメラやマイ クを利⽤可 リアルタイ ムに送受信 ブラウザ間 の直接通信 サーバ⇔ク ライアント 間の通信 リクエストと レスポンスの 繰り返し カメラやマイ クの利⽤不可 サーバ サーバ
10.
Copyright © NTT
Communications Corporation. All rights reserved. 9 WebRTCとは(技術⾯) 技術的には2つの側⾯がある。 1.⾳声、映像、データのリアルタイム・コミュニケーションのオープン標準 l 従来のサービス(WebEx、Skype等)は互換性がなく、独⾃技術を含む。 WebRTCは相互接続が保証され、ライセンス使⽤料が不要。 1.ブラウザとネイティブアプリの両⽅で利⽤できる l 例えば、オープンソースのC++のコードを利⽤しコンパイルすれば、ネイティ ブアプリにWebRTC機能を組み込むこともできる。
11.
Copyright © NTT
Communications Corporation. All rights reserved. WebRTCのクライアント対応状況 10 対応状況 OS アプリ 備考(2015/7/4現在) ✔ Windows Chrome ✔ Windows Firefox テレビ電話機能も搭載 ✔ Windows IE プラグインが必要 ✘ Windows Edge 2014年10⽉に開発着⼿を発表 ORTCが実装される予定 2015年7⽉段階では⼀部機能の み実装(getUserMedia) ✔ Windows ネイティブ 要コンパイル ✔ Mac Chrome ✔ Mac Firefox テレビ電話機能も搭載 ✔ Mac Safari プラグインが必要 ✔ Mac ネイティブ 要コンパイル ✔ Android Chrome ✔ Android Firefox ✔ Android 標準ブラウザ Android 5.0で対応 ✔ Android ネイティブ 要コンパイル ✘ iOS Chrome ✘ iOS Safari ✔ iOS ネイティブ 要コンパイル
12.
Copyright © NTT
Communications Corporation. All rights reserved. 本⽇のアジェンダ 11 • はじめてのWebRTC/ORTC • WebRTCとは • 活⽤事例、デモンストレーション • WebRTCで使われている技術要素の紹介 • 最新標準化動向 • SkyWayをつかって開発してみよう を紹介
13.
Copyright © NTT
Communications Corporation. All rights reserved. コンシューマ向けWeb会議 12 • インストール不要、認証も不要、URLにアクセスするだけで開始。 • ビデオの場合は8⼈まで、オーディオのみの場合は 20⼈までの、グループチャットに対応。 SkyWaySkyWayで シグナリング WebRTCでメッシュ状に接続し、 マイク⾳声、カメラ映像を すべての相⼿に送信 WebRTC Chat on SkyWay https://chat.skyway.io デモ有
14.
Copyright © NTT
Communications Corporation. All rights reserved. 13 • 資料共有機能も簡単 (利⽤時はプラグイン/エクステンション導⼊が必要) スクリーンシェア デモ有
15.
Copyright © NTT
Communications Corporation. All rights reserved. Click to Call 14 • ゲートウェイでWebRTC⇔VoIPを変換することにより、ブラウザからコンタクト センタに電話がかけられる。 • 電話をかける前の、ログイン情報、ページ遷移、⼊⼒情報などをオペレータのWebブラウザで確認 できる。(IVRの⾼度化) • 通話中や通話終了後に、テキストや画像のやりとりができる。 ゲートウェイ WebRTCと VoIPを変換 WebRTC ブラウザ SIP+RTP IP電話網 固定電話網 電話 回線 コンタクトセンタ 電話機 (既存) ブラウザ Internet等 データ中継サーバ カスタマ ブラウザの 情報を中継
16.
Copyright © NTT
Communications Corporation. All rights reserved. 1click.io : カスタマサポートの新規チャネル 15 • ウェブサイトのカスタマサポートの⼿段として、 お客様が閲覧中に1クリックでカスタマサポートへ接続する • (前⾴の4の例) https://1click.io/
17.
Copyright © NTT
Communications Corporation. All rights reserved. 字幕付きボイスチャット 16 • ⾳声認識機能を組み合わせ、通話内容をテキストで表⽰。 • 電⾞や会議中等の通話できない環境、議事録の⾃動作成、安全な歩きスマホ等に適⽤ 可能。 • ⾳声⇛テキスト変換はGoogle Chromeの⾳声認識APIを利⽤。 字幕付きボイスチャット 相⼿との通話内容が吹き出し⾵に表⽰される https://skyway.io/example /caption-phone/ SkyWay 0.SkyWay でシグナリング 4.テキストを送受信 ⾳声認識 API ⾳声認識 API 2.⾳声を テキスト化 3.⾳声を送受信 1.話す 5.⾳声を再⽣ テキストを表⽰ デモ有
18.
Copyright © NTT
Communications Corporation. All rights reserved. テレプレゼンス・ロボット 17 • ビデオ会議機能を備えた遠隔操作ロボット。 • Double Robotics社、Romotive社のロボットは、WebRTC技術を採⽤。 • 難病で登校できない⼦供が、学校に配備されたロボットを利⽤するなどの事例もある 。(VGo社) 0.シグナ リング 1.映像と⾳声を 送受信 2.会話 2.会話 SkyWay Romo by Romotive www.romotive.jp ¥15,660 ロボット側はiPhoneを利⽤。 操作側はiOSアプリか ブラウザを利⽤。 Double by Double Robotics www.doublerobotics.com $2,499 ロボット側はiPadを利⽤。 操作側はiOSアプリか ブラウザを利⽤。
19.
Copyright © NTT
Communications Corporation. All rights reserved. ROMO TURISMO 18 https://www.youtube.com/watch?v=oO-WjCKX9LY
20.
Copyright © NTT
Communications Corporation. All rights reserved. Skype for Web 19 • Skype for Webのβ版が 2015/6/15 から提供開始(そのうちORTCに?) • SkypeもNativeクライアントが不要になった https://web.skype.com/ja/
21.
Copyright © NTT
Communications Corporation. All rights reserved. Facebook ビデオチャット 20 • FacebookにもWebRTCを利⽤したビデオチャット機能が実装されている デモ有
22.
Copyright © NTT
Communications Corporation. All rights reserved. Zoen:オンライン⾳楽レッスンサービス 21 • 先⽣〜⽣徒間の⾳声映像通信をWebRTCで実現 https://www.thezoen.com/
23.
Copyright © NTT
Communications Corporation. All rights reserved. iCam: WebRTCの監視カメラ 22 • WebRTC機能を備えた監視カメラ • WebRTCを利⽤できる機器なら何でも遠隔で閲覧できる http://www.amaryllo.eu/
24.
Copyright © NTT
Communications Corporation. All rights reserved. スマホで撮った多数の映像を表⽰ 23 • 2000⼈規模のカンファレンス(HTML Conference 2013)会場で スマホで撮った約150名の来場者の顔を、壇上のスクリーンに表⽰した。 SkyWay SkyWayで シグナリング カメラの映像を WebRTCで送信 HTML5 JUMBOTRON jt.skyway.io デモ有
25.
Copyright © NTT
Communications Corporation. All rights reserved. スマホで撮った多数の映像を表⽰ 24 • 2000⼈規模のカンファレンス(HTML Conference 2013)会場で スマホで撮った約150名の来場者の顔を、壇上のスクリーンに表⽰した。 デモ有 http://is.gd/html5jt#0100 Chrome、Firefox(PC・Android限定)でアクセス!
26.
Copyright © NTT
Communications Corporation. All rights reserved. MistCDN 25 ・ブラウザ間でコンテンツをシェアするCDNサービス ・WebRTCのdata channelを利⽤している https://www.mist-t.co.jp/#demo デモ有
27.
Copyright © NTT
Communications Corporation. All rights reserved. 本⽇のアジェンダ 26 • はじめてのWebRTC/ORTC • WebRTCとは • 活⽤事例、デモンストレーション • WebRTCで使われている技術要素の紹介 • 最新標準化動向 • SkyWayをつかって開発してみよう を紹介
28.
Copyright © NTT
Communications Corporation. All rights reserved. WebRTC技術の全容 27 https://www.flickr.com/photos/noaaphotolib/5041457573
29.
Copyright © NTT
Communications Corporation. All rights reserved. WebRTC技術の全容 28 まずは、海の上に出ている部分を理解 しましょう。
30.
Copyright © NTT
Communications Corporation. All rights reserved. WebRTCの技術要素 29 WebRTCには様々な技術が使われています。 これから使⽤されている技術要素を順番に紹介します。 1.ICE 2.シグナリング 3.P2Pによるセキュアなリアルタイム通信 4.⾳声、映像処理
31.
Copyright © NTT
Communications Corporation. All rights reserved. ICE(Interactive Connectivity Establishment) 3030 NAT NAT STUN サーバ Signaling サーバ STUN サーバ WebRTC Cli WebRTC Cli WebRTCクライアント同⼠がP2Pでネットワークを介してつながるために 必要な仕組みを提供する STUN ・⾃分のグローバルIP、 ポート番号を知る ・UDPホールパンチングという 仕組みでNATに⽳を開ける TURN ・どうしてもNATに⽳を開けら れない場合に、データ通信を 中継する仕組み ・WebRTCコネクション全体の 8〜9%はTURNが必要と ⾔われている(⽇本はもっと多いかも) TURN サーバ
32.
Copyright © NTT
Communications Corporation. All rights reserved. UDPホールパンチング 31 NAT STUN NAT ※後述するNAT Typeにより挙動が変わります
33.
Copyright © NTT
Communications Corporation. All rights reserved. UDPホールパンチング 32 俺のグローバル IPとポート番号 教えて 111.111.111.111 50000番やで NAT STUN NAT ※後述するNAT Typeにより挙動が変わります
34.
Copyright © NTT
Communications Corporation. All rights reserved. UDPホールパンチング 33 俺のグローバル IPとポート番号 教えて 222.222.222.222 20000番やで NAT STUN NAT IP:111.111.111.111 PORT:10000番 ※後述するNAT Typeにより挙動が変わります
35.
Copyright © NTT
Communications Corporation. All rights reserved. UDPホールパンチング 34 NAT STUN NAT IP:111.111.111.111 PORT:10000番 IP:222.222.222.222 PORT:20000番 互いのIPとPORTを 何らかの⼿段で交換 (シグナリング) ※後述するNAT Typeにより挙動が変わります
36.
Copyright © NTT
Communications Corporation. All rights reserved. UDPホールパンチング 35 NAT STUN NAT IP:222.222.222.222 PORT:20000番 IP:111.111.111.111 PORT:10000番 アクセスさせ てー! だめー。 ⽳開いた! ※後述するNAT Typeにより挙動が変わります
37.
Copyright © NTT
Communications Corporation. All rights reserved. UDPホールパンチング 36 NAT STUN NAT IP:222.222.222.222 PORT:20000番 IP:111.111.111.111 PORT:10000番 通れる!! アクセスさせてー。 ⽳開いた! ※後述するNAT Typeにより挙動が変わります
38.
Copyright © NTT
Communications Corporation. All rights reserved. UDPホールパンチング 37 NAT STUN NAT IP:222.222.222.222 PORT:20000番 IP:111.111.111.111 PORT:10000番 もしかして! 通れる! ※後述するNAT Typeにより挙動が変わります
39.
Copyright © NTT
Communications Corporation. All rights reserved. TURNの使いどころ 38 どうしてもNATに⽳があかない場合はTURNを利⽤する 互いのNAT Type フルコーン 制限付きフ ルコーン ポート制限 付きフル コーン シンメト リック フルコーン STUN STUN STUN STUN 制限付きフ ルコーン STUN STUN STUN STUN ポート制限 付きフル コーン STUN STUN STUN TURN シンメト リック STUN STUN TURN TURN ※NAT Typeは厳密に細分化すると9パターンあります。 よ り セ キ ュ ア よりセキュア ※もっと詳しく知りたい⽅はこちら。 http://www.slideshare.net/iwashi86/webrtcnat-a-talk-on-nat-behind-webrtc
40.
Copyright © NTT
Communications Corporation. All rights reserved. TURNリレー 39 シンメトリック NAT TURN シンメトリック NAT IP:222.222.222.222 PORT:20000番 IP:111.111.111.111 PORT:10000番 TURNサーバを中継する (中継するだけなので通信の中⾝はわからない) クライアントはP2Pのつもり IP:11.11.11.11 PORT:3478 IP:11.11.11.11 PORT:3478
41.
Copyright © NTT
Communications Corporation. All rights reserved. TURNリレー 40 シンメトリック NAT TURN シンメトリック NAT IP:222.222.222.222 PORT:20000番 IP:111.111.111.111 PORT:10000番 TURNサーバを中継する (中継するだけなので通信の中⾝はわからない) IP:11.11.11.11 PORT:443 IP:11.11.11.11 PORT:443 TCPで通信可能TCPで通信可能 FW FW TCP443か、怪しくないな!
42.
Copyright © NTT
Communications Corporation. All rights reserved. TURNを使っても通らない場合がある 41 シンメトリック NAT TURN シンメトリック NAT IP:222.222.222.222 PORT:20000番 IP:111.111.111.111 PORT:10000番 IP:11.11.11.11 PORT:443 IP:11.11.11.11 PORT:443 Proxy Proxy おいおい、中⾝が怪しいぞ! 例えば、マイン・ザ・ミドル可能なProxyが存在する おいおい、中⾝が怪しいぞ!
43.
Copyright © NTT
Communications Corporation. All rights reserved. WebRTCの技術要素 42 WebRTCには様々な技術が使われています。 これから使⽤されている技術要素を順番に紹介します。 1.ICE 2.シグナリング 3.P2Pによるセキュアなリアルタイム通信 4.⾳声、映像処理
44.
Copyright © NTT
Communications Corporation. All rights reserved. シグナリング 43 NAT NAT STUN サーバ Signaling サーバ STUN サーバ WebRTC Cli WebRTC Cli ICEの仕組み等を利⽤して取得した情報を、互いに交換する仕組み ・どのような仕組みを⽤いても良い ・WebSocket(主流) ・XHRロングポーリング ・情報はSDPを⽤いて情報交換する ・テキストベースのプロトコル ・IPアドレス、ポート番号、 映像、⾳声コーデック情報 などを記載して交換する ・めちゃくちゃ難解
45.
Copyright © NTT
Communications Corporation. All rights reserved. WebRTCの技術要素 44 WebRTCには様々な技術が使われています。 これから使⽤されている技術要素を順番に紹介します。 1.ICE 2.シグナリング 3.P2Pによるセキュアなリアルタイム通信 4.⾳声、映像処理
46.
Copyright © NTT
Communications Corporation. All rights reserved. P2Pによるセキュアなリアルタイム通信 4545 すべての準備が整うとP2Pによる、セ キュアな通信を開始 ・映像・⾳声 ・セキュアなリアルタイム通信(SRTP) ・AES(共通鍵暗号化) ・鍵交換にDTLSを⽤いる(DTLS-SRTP) ・データ ・TCP同様の信頼性、到達順序性、 フロー制御、輻輳制御をUDP上で実現 ・セキュアなDTLS上で動作する ・DTLS ・通信経路暗号化 ・データ整合性の保証 ・認証⾏為は⾏わない(オレオレ証明書) NAT NAT STUN サーバ Signaling サーバ STUN サーバ WebRTC Cli WebRTC Cli IP UDP SCTPSRTP DTLS ⾳声・映像 データ
47.
Copyright © NTT
Communications Corporation. All rights reserved. P2Pだけじゃない・・多対多の通信 WebRTCはP2Pの通信が前提だが、ユースケースとしては多対多も 求められている。 46 フルメッシュでやる⽅法もあるが、端末への負荷がかかる チューニングしても同時8つぐらいが限界
48.
Copyright © NTT
Communications Corporation. All rights reserved. P2Pだけじゃない・・多対多の通信 MCU(Multipoint Control Unit)を利⽤する。 メディアを集約、ミキシングし各デバイスに流す。 クライアント側の負荷が⼩さい。 サーバ側の負荷はエンコード、デコード処理が⼊るため負荷が⾼い。 47 MCU
49.
Copyright © NTT
Communications Corporation. All rights reserved. P2Pだけじゃない・・多対多の通信 SFU(Selective Forwarding Unit)を利⽤する。 クライアントからのストリームを必要なエンドポイントに転送する。 サーバ側の負荷は⼩さい。 48 SFU
50.
Copyright © NTT
Communications Corporation. All rights reserved. WebRTCの技術要素 49 WebRTCには様々な技術が使われています。 これから使⽤されている技術要素を順番に紹介します。 1.ICE 2.シグナリング 3.P2Pによるセキュアなリアルタイム通信 4.⾳声、映像処理
51.
Copyright © NTT
Communications Corporation. All rights reserved. ⾳声・動画処理 50 WebRTCクライアントはPCやデバイスの⾳声映像ストリームにアクセスでき る(以下、Webブラウザの場合) ・getUserMedia(WebAPI) プラットフォーム上の ⾳声、映像ストリームを取得できる W3Cによって規定されたAPI ・ブラウザに実装された エンジンによって、 エンコード、デコード処理がなされる ・コーデック ・Video:VP8、H.264 ・Audio:Opus、G.711 PCMA & PCMU デバイスハードウェア ⾳声処理エンジン コーデック ジッタ/パケロス補正 エコー除去 ノイズリダクション 映像処理エンジン コーデック ジッタ/パケロス補正 ⾳声・動画同期 画像補正 ⾳声キャプチャ 動画キャプチャ 内部WebRTC API WebAPI(W3C) 引⽤元:オライリー・ジャパン 「ハイパフォーマンスブラウザネットワーキング」 P.301
52.
Copyright © NTT
Communications Corporation. All rights reserved. 本⽇のアジェンダ 51 • はじめてのWebRTC/ORTC • WebRTCとは • 活⽤事例、デモンストレーション • WebRTCで使われている技術要素の紹介 • 最新標準化動向 • SkyWayをつかって開発してみよう を紹介
53.
Copyright © NTT
Communications Corporation. All rights reserved. WebRTCに関する標準化動向 52 WebRTCとIETFによって標準化が進められている。 •W3C • Web Real-Time Communications Working Group • http://www.w3.org/2011/04/webrtc/ • Webブラウザに実装するAPIの標準化を担当する •IETF • Real-Time Communication in WEB-browsers Working Group • http://tools.ietf.org/wg/rtcweb/ • プロトコルレベルでの標準化を担当する • オーディオやビデオのコーデック、セキュリティ、JSEP、ICE、データ通信プロトコル等 の標準化を担当する 今回はW3Cの話をします
54.
Copyright © NTT
Communications Corporation. All rights reserved. W3Cによる標準化ロードマップ 53 Media Capture and Streams WebRTC 1.0 RTC Between Browsers MediaStream Recording MediaStream Image Capture MediaStream Depth Stream Extensions Identifiers for WebRTC’s Statistics API ※W3C公式のWorking draftになっているものだけ記載 2013/9/3 ●WD 2013 2013/9/10 ●WD 2013/2/5 ●WD 2013/7/9 ●WD 2015.3Q 2015.4Q 2016.1Q 2016.2Q 2016.3Q 2016.4Q2014 ●CR ●PR WD:Working Doraft / 草案 CR :Candidate Recomendation / 勧告候補 PR:Proposed Recommendation / 勧告案 Rec:Recommendation / 勧告 1Q : 1⽉〜3⽉ 2Q:4⽉〜6⽉ 3Q:7⽉〜9⽉ 4Q:10⽉〜12⽉ ●Rec ●CR ●PR 2017/1Q ●Rec 2017 2018 2017/1Q ●Rec ●CR ●PR 3Q ●Rec ●CR 2017/2Q ●PR 3Q ●Rec ●CR 2017/2Q ●PR ●CR ●PR 2017/1Q ●Rec 出展:http://www.w3.org/2015/06/webrtc-charter.html 2014/10/7 ●WD 2014/10/21 ●WD
55.
Copyright © NTT
Communications Corporation. All rights reserved. W3Cによる標準化ロードマップ 54 Audio Oputpu Devices API Screen Capture WebRTC Next Version ※W3C公式のWorking draftになっているものだけ記載 2013 2015.3Q 2015.4Q 2016.1Q 2016.2Q 2016.3Q 2016.4Q2014 ●PR ●Rec 2017 Media Capture from DOM Elements ●CR ●PR ●Rec WD:Working Doraft / 草案 CR :Candidate Recomendation / 勧告候補 PR:Proposed Recommendation / 勧告案 Rec:Recommendation / 勧告 1Q : 1⽉〜3⽉ 2Q:4⽉〜6⽉ 3Q:7⽉〜9⽉ 4Q:10⽉〜12⽉ 出展:http://www.w3.org/2015/06/webrtc-charter.html ●CR ●CR ●PR ●Rec 2016/1Q ●WD 2017/2Q ●CR 2017/4Q ●PR 2018/1Q ●Rec 2018 2015/2/10 ●WD 2015/2/10 ●WD 2015/2/19 ●WD
56.
Copyright © NTT
Communications Corporation. All rights reserved. W3Cによる標準化ロードマップ 55 Media Capture and Streams WebRTC 1.0 RTC Between Browsers MediaStream Recording MediaStream Image Capture MediaStream Depth Stream Extensions Identifiers for WebRTC’s Statistics API ※W3C公式のWorking draftになっているものだけ記載 2013/9/3 ●WD 2013 2013/9/10 ●WD 2013/2/5 ●WD 2013/7/9 ●WD 2015.3Q 2015.4Q 2016.1Q 2016.2Q 2016.3Q 2016.4Q2014 ●CR ●PR WD:Working Doraft / 草案 CR :Candidate Recomendation / 勧告候補 PR:Proposed Recommendation / 勧告案 Rec:Recommendation / 勧告 1Q : 1⽉〜3⽉ 2Q:4⽉〜6⽉ 3Q:7⽉〜9⽉ 4Q:10⽉〜12⽉ ●Rec ●CR ●PR 2017/1Q ●Rec 2017 2018 2017/1Q ●Rec ●CR ●PR 3Q ●Rec ●CR 2017/2Q ●PR 3Q ●Rec ●CR 2017/2Q ●PR ●CR ●PR 2017/1Q ●Rec 出展:http://www.w3.org/2015/06/webrtc-charter.html 2014/10/7 ●WD 2014/10/21 ●WD getUserMediaとか P2Pを⾏うための通 信系のAPI 認証とか、統計情 報取得のためのAPI メディアストリー ムを録⾳/録画す るためのAPI
57.
Copyright © NTT
Communications Corporation. All rights reserved. W3Cによる標準化ロードマップ 56 Audio Oputpu Devices API Screen Capture WebRTC Next Version ※W3C公式のWorking draftになっているものだけ記載 2013 2015.3Q 2015.4Q 2016.1Q 2016.2Q 2016.3Q 2016.4Q2014 ●PR ●Rec 2017 Media Capture from DOM Elements ●CR ●PR ●Rec WD:Working Doraft / 草案 CR :Candidate Recomendation / 勧告候補 PR:Proposed Recommendation / 勧告案 Rec:Recommendation / 勧告 1Q : 1⽉〜3⽉ 2Q:4⽉〜6⽉ 3Q:7⽉〜9⽉ 4Q:10⽉〜12⽉ 出展:http://www.w3.org/2015/06/webrtc-charter.html ●CR ●CR ●PR ●Rec 2016/1Q ●WD 2017/2Q ●CR 2017/4Q ●PR 2018/1Q ●Rec 2018 2015/2/10 ●WD 2015/2/10 ●WD 2015/2/19 ●WD スクリーンキャプ チャAPI
58.
Copyright © NTT
Communications Corporation. All rights reserved. ここまで聞いて、皆さん、思いますよね? 57 注⽬されてるとか⾔ってるけど、まだまだ先やんかー。
59.
Copyright © NTT
Communications Corporation. All rights reserved. その通りです! 58 WebRTCはGoogleやMozillaの実装ドリブンで検討が進んでいるの で、仕様化は⼆の次・三の次。 ブラウザで実装してみる ↓ ここが使いにくいな・・等、フィードバック ↓ ある程度実装がFIXしたので仕様書に落とそう
60.
Copyright © NTT
Communications Corporation. All rights reserved. WebRTCの今後 59 WebRTCのロードマップの中にNext Versionというものあります WebRTC 1.1または2.0と⾔われてますが、次のバージョンを語る 上で外せないのが、ORTCという兄弟仕様の存在。 WebRTC Next Version 2013 2015.3Q 2015.4Q 2016.1Q 2016.2Q 2016.3Q 2016.4Q2014 2017 2016/1Q ●WD 2017/2Q ●CR 2017/4Q ●PR 2018/1Q ●Rec 2018
61.
Copyright © NTT
Communications Corporation. All rights reserved. ORTC ORTCとはなにか? • 現⾏のWebRTC1.0のイケてない点を改善すべく提 案されたもう⼀つのRTC API どこで議論されているのか? • ORTC(Object Real-time Communications) Community Group https://www.w3.org/community/ortc/ • 最新Draft:2015/6/23 http://ortc.org/wp- content/uploads/2015/06/ortc.html 60
62.
Copyright © NTT
Communications Corporation. All rights reserved. ORTCの特徴 61 • 仕様⾯(今のWebRTCの不便な点を克服) • SDPを直接JavaScriptで操作しない • ステートレスにリアルタイム通信を⾏うためのAPI設計 • H.264/SVCなどのモバイルにやさしいコーデックを推奨する • 実装⾯(実は今のWebRTCでは規定されていない) • モバイル・アプリケーションとの互換性を担保(SDKを⽤意) • キャリアスケールオペレーションに必要な監視、診断機能を⽤意 • サーバサイドのORTC Client実装をリファレンス提供 • STUN/TURNの認証管理の仕組みを提供 • オーディオ、ビデオのミキシングの仕組みをリファレンス提供 等
63.
Copyright © NTT
Communications Corporation. All rights reserved. ORTCはマイクロソフトがやる気です 62 http://dev.modern.ie/platform/status/multicolumnfullsupport?filter=f3f0000bf&search=RTC • Microsoft Edgeでサポートされることはほぼ確定路線
64.
Copyright © NTT
Communications Corporation. All rights reserved. 本⽇のアジェンダ 63 • はじめてのWebRTC/ORTC • WebRTCとは • 活⽤事例、デモンストレーション • WebRTCで使われている技術要素の紹介 • 最新標準化動向 • SkyWayをつかって開発してみよう を紹介
65.
Copyright © NTT
Communications Corporation. All rights reserved. 64 WebRTCはWeb開発者にとってちょっと難しい 64 ブラウザ間で直接通信する前に、サーバ経由で「シグナリング」を ⾏う必要があり、実装にはネットワークの知識が必要。 64ようやく直接通信できる これらの通信が 完了してから…
66.
Copyright © NTT
Communications Corporation. All rights reserved. そこで登場、SkyWay! 65 n WebRTC利⽤アプリを簡単に開発できるクラウド基盤 2013年12⽉5⽇に提供開始 無料! 提供内容 シグナリングAPI STUN/TURN API JavaScriptライブラリ(PeerJS互換) iOS/Androidライブラリ サンプルアプリ ⽇本語ドキュメント https://skyway.io
67.
Copyright © NTT
Communications Corporation. All rights reserved. 66 SkyWayの特徴 SkyWayのシグナリングAPIとライブラリが複雑な処理を担うので 、開発者は簡単にWebRTC利⽤アプリを開発できる。 STUN API Signaling API STUN API ライブラリ ライブラリ APIとライブ ラリが複雑な 処理を担う TURN API
68.
Copyright © NTT
Communications Corporation. All rights reserved. 67 開発者登録を⾏う まずはアクセス → https://skyway.io ここをクリック
69.
Copyright © NTT
Communications Corporation. All rights reserved. 68 APIキーの申請にはドメインが必要 n APIキーの申請に必要なもの n お名前 n 連絡先メールアドレス n SkyWayを利⽤するドメイン n SkyWayを利⽤するドメイン APIキーの不正利⽤を防ぐ⽬的のドメ イン認証 n 例えば・・・ n ローカルで動かしたい n 127.0.0.1 n localhost n 開発サーバで動かしたい n dev.domain.jp n 本番サーバで動かしたい n www.domain.jp n iOSとAndroidは独⾃に設定
70.
Copyright © NTT
Communications Corporation. All rights reserved. 69 開発してみる(JavaScriptの場合) n STEP0 - ライブラリの読み込み <script src="https://skyway.io/dist/0.3/peer.js"></script> n STEP1 - Peerオブジェクトの⽣成 var APIKEY = '6165842a-5c0d-11e3-b514-75d3313b9d05’; var peer = new Peer({ key: APIKEY});
71.
Copyright © NTT
Communications Corporation. All rights reserved. 70 開発してみる(JavaScriptの場合) n STEP2 - 相⼿からの着信イベントを処理するハンドラーを設置 peer.on('open', function(){ //⾃分のPeerID(いわゆる電話番号)が⽣成されたら発⽕する }); peer.on('call', function(call){ //相⼿からの着信があった場合に応答する call.answer(window.localStream); }); peer.on('error', function(err){ //何らかのエラーが発⽣した場合に発⽕する console.log(err.message); });
72.
Copyright © NTT
Communications Corporation. All rights reserved. 71 n STEP3 - ⾃分⾃⾝のオーディオ、ビデオストリームを取得 navigator.getUserMedia({audio: true, video: true}, function(stream){ //⾃分のVideoタグに表⽰ $('#my-video').prop('src', URL.createObjectURL(stream)); //相⼿に送るために保存 window.localStream = stream; }, function(err){ //エラー処理は必須 console.log(err); }); ※getUserMediaにはブラウザごとにベンダープレフィックスがあります 開発してみる(JavaScriptの場合)
73.
Copyright © NTT
Communications Corporation. All rights reserved. 72 開発してみる(JavaScriptの場合) n STEP4 - 相⼿に発信&発信後のイベントを処理するハンドラを設置 var call = peer.call(PeerId, window.localStream); call.on('stream', function(stream){ //相⼿のオーディオ、ビデオストリームをVideoタグに表⽰ $('#their-video').prop('src', URL.createObjectURL(stream)); }); call.on('close’,function(){ //相⼿が切断した場合に切断処理を⾏う }); ※PeerIDの受け渡しは開発者が独⾃に実装する必要あり peer.listAllPeers()というメソッドも⽤意しています
74.
Copyright © NTT
Communications Corporation. All rights reserved. 73 開発に必要な情報を提供 ⽇本語ドキュメントを公開中 http://nttcom.github.io/skyway/docs/
75.
Copyright © NTT
Communications Corporation. All rights reserved. 74 開発に必要な情報を提供 サンプルアプリはGitHub上にてオープンソースで公開中 https://github.com/nttcom/
76.
Copyright © NTT
Communications Corporation. All rights reserved. 75 開発に必要な情報を提供 開発者向けフォーラムを⽤意 SkyWay Technical Forum • だれでも参加可能! • 中の⼈が懇切丁寧に開発者の疑問質問にお答え! • WebRTCに関す⽇本語での情報交換に活⽤してください http://goo.gl/enBkcF
77.
Copyright © NTT
Communications Corporation. All rights reserved. まとめ 76 • はじめてのWebRTC/ORTC • WebRTCとは • 活⽤事例、デモンストレーション • WebRTCで使われている技術要素の紹介 • 最新標準化動向 • SkyWayをつかって開発してみよう を紹介
78.
Copyright © NTT
Communications Corporation. All rights reserved. 77 ご清聴ありがとうございました!
Descargar ahora