SlideShare a Scribd company logo
Copyright © NTT Communications Corporation. All right reserved.
HTML5 APIと組み合わせて作る
WebRTCアプリ
NTTコミュニケーションズ株式会社
技術開発部
Webコア Technical Unit
中原 (html5-ia@ntt.com)
2015年2月
Copyright © NTT Communications Corporation. All right reserved.
NTTコミュニケーションズ HTML5ラボ
2
Web
Speech API
Facebook
Graph API
Web MIDI
API ……
&
n  最先端Web技術の普及促進を目指し、WebRTCを簡単に使えるプラット
フォーム(SkyWay)やその上で動作するアプリケーションを開発している。
n  WebRTCは他のWeb系技術・サービスとの親和性が高いため、各種APIと
連携したアプリケーションも開発中。
http://html5lab.ntt.com/
Copyright © NTT Communications Corporation. All right reserved.
NAT
NAT
SkyWay
3
n  SkyWayは、WebRTC活用サービスの提供者向けのフレームワーク。
n  複雑なシグナリング処理を担うAPI群とライブラリで構成される。
n 2013年12月5日に提供開始
n 約1100名の開発者が利用
n 提供内容
•  シグナリングAPI
•  NAT越えAPI (=STUN・TURN)
•  ライブラリ(オープンソース)
STUN
API
Signaling
API
STUN
API
ライブラリ ライブラリ
開発者はPeer to
Peer通信のプログラ
ミングに専念できる
SkyWayが
シグナリングを
担うので、
Copyright © NTT Communications Corporation. All right reserved.
字幕付きボイスチャット (WebRTC & Web Speech API)
4
n  音声認識機能を組み合わせ、通話内容をテキストで表示。
n  聴力が衰えた方向け、電車や会議中等の通話できない環境、議事録の自動
作成、安全な歩きスマホ等に適用可能。
n  現在はGoogle Chromeの音声認識APIを利用。NTT研究所の音声認識技術
に移植中。
相手との通話内容が
吹き出し風に表示される
SkyWay
0.SkyWay
でシグナリング
4.テキストを送受信
音声認識
API
音声認識
API
2.音声を
テキスト化
3.音声を送受信
1.話す 5.音声を再生
テキストを表示
Copyright © NTT Communications Corporation. All right reserved.
テレプレゼンス・ロボット
5
n  ビデオ会議機能を備えた遠隔操作ロボット。
n  Double + iPadで、テレプレゼンス・ロボットを実現。WebRTC技術を採
用しているのでブラウザから操作できる。
0.シグナ
リング
1.映像と音声を
送受信
2.会話
2.会話
SkyWay
キーボード&マウスで
ブラウザから操作できる!
今日は、笛でDoubleを動かします
Copyright © NTT Communications Corporation. All right reserved.
MIDI & Wind Synthesizer
6
MIDI: Musical Instrument Digital Interface
電子楽器の演奏データを(音声でなく)メタデータで転送する規格
MIDI信号の例
0 1 0 1 0 0 0 00 0 1 1 1 1 0 01 0 0 1 0 0 0 0
ステータス情報
(例: Note ON)
Note番号
(例:真ん中の ド )
ベロシティ(強さ)
(例: メゾフォルテで)
Wireless Electronic Wind Synthesizer	

 EWI 5000
Copyright © NTT Communications Corporation. All right reserved.
Web MIDI API
7
従来のMIDI
MIDIデータ
Web MIDI API
n  Web MIDI APIは、ブラウザによるMIDIデータの取り扱いを実現する。
DTM: DeskTop Music
画像出典: Cakewalk Pro 9 公式サイト
n  MIDIコントローラからDTMアプリにデータを打ち込む
MIDIデータ
MIDIデータ
MIDIデータ
MIDIデータ
n  DTMアプリからMIDI音源にデータを送り、鳴らす
n  MIDIコントローラからMIDI音源にデータを送り、リアルタイム演奏
n  MIDIコントローラからブラウザにデータを入力
n  ブラウザからMIDI音源にデータを送り、鳴らす
今回はこれを
使います!
Copyright © NTT Communications Corporation. All right reserved.
笛でDouble制御 (WebRTC & Web MIDI API)
8
Media Channel (動画・音声)
Data Channel (Double制御信号)
MIDIデータを入力
MIDIデータの入力から、
音波合成・Double制御信号
生成を行う
n  Web MIDI APIを使ったブラウザによるMIDIデータ取得と、
WebRTCによるDoubleの制御を組み合わせる。
シグナリング
SkyWay

More Related Content

Similar to HTML5 APIと組み合わせて作るWebRTCアプリ

注目の最新技術「WebRTC」とは? -技術概要と事例紹介-
注目の最新技術「WebRTC」とは? -技術概要と事例紹介-注目の最新技術「WebRTC」とは? -技術概要と事例紹介-
注目の最新技術「WebRTC」とは? -技術概要と事例紹介-
Yusuke Naka
 
Web RTCにより拓かれるコミュニケーションサービスの形 「新たなバリュー創造へ。ntt comのチャレンジ」webアプリケーション エバンジェリスト ...
Web RTCにより拓かれるコミュニケーションサービスの形 「新たなバリュー創造へ。ntt comのチャレンジ」webアプリケーション エバンジェリスト ...Web RTCにより拓かれるコミュニケーションサービスの形 「新たなバリュー創造へ。ntt comのチャレンジ」webアプリケーション エバンジェリスト ...
Web RTCにより拓かれるコミュニケーションサービスの形 「新たなバリュー創造へ。ntt comのチャレンジ」webアプリケーション エバンジェリスト ...
Mickey Miki
 
エフサミ2014 web rtcの傾向と対策
エフサミ2014 web rtcの傾向と対策エフサミ2014 web rtcの傾向と対策
エフサミ2014 web rtcの傾向と対策
Kensaku Komatsu
 
Web of Thingsの現状とWebRTC活用の可能性
Web of Thingsの現状とWebRTC活用の可能性Web of Thingsの現状とWebRTC活用の可能性
Web of Thingsの現状とWebRTC活用の可能性
Kensaku Komatsu
 
WebRTC入門+最新動向
WebRTC入門+最新動向WebRTC入門+最新動向
WebRTC入門+最新動向
Ryosuke Otsuya
 
はじめてのWebRTC/ORTC
はじめてのWebRTC/ORTCはじめてのWebRTC/ORTC
はじめてのWebRTC/ORTC
Yusuke Naka
 
WebRTCで動かす“テレイグジスタンス”ロボット
WebRTCで動かす“テレイグジスタンス”ロボットWebRTCで動かす“テレイグジスタンス”ロボット
WebRTCで動かす“テレイグジスタンス”ロボット
NTT Communications Technology Development
 
iPhoneでなんちゃってWebRTC
iPhoneでなんちゃってWebRTCiPhoneでなんちゃってWebRTC
iPhoneでなんちゃってWebRTC
Kensaku Komatsu
 
14th apr2015 リックテレコ勉強会
14th apr2015 リックテレコ勉強会14th apr2015 リックテレコ勉強会
14th apr2015 リックテレコ勉強会
Kensaku Komatsu
 
SkyWay HandsOn
SkyWay HandsOnSkyWay HandsOn
SkyWay HandsOn
Yusuke Naka
 
WebRTC status and what to expect in 2015
WebRTC status and what to expect in 2015WebRTC status and what to expect in 2015
WebRTC status and what to expect in 2015
Alexandre Gouaillard
 
WebRTC の紹介
WebRTC の紹介WebRTC の紹介
WebRTC の紹介
Kensaku Komatsu
 
エンタープライズ環境におけるWebRTC活用のポイント
エンタープライズ環境におけるWebRTC活用のポイントエンタープライズ環境におけるWebRTC活用のポイント
エンタープライズ環境におけるWebRTC活用のポイント
WebRTCConferenceJapan
 
ビデオ通話・P2Pがコモディティ化する世界 WebRTCによるこれからを探る
ビデオ通話・P2Pがコモディティ化する世界 WebRTCによるこれからを探るビデオ通話・P2Pがコモディティ化する世界 WebRTCによるこれからを探る
ビデオ通話・P2Pがコモディティ化する世界 WebRTCによるこれからを探る
Kensaku Komatsu
 
SkyWay Vision & Mission
SkyWay Vision & MissionSkyWay Vision & Mission
SkyWay Vision & Mission
Yoshiki Mizushima
 
SkyWayとWebRTC開発者コミュニティ4年間の軌跡とCMC_Meetupで学んだこと、実践したこと
SkyWayとWebRTC開発者コミュニティ4年間の軌跡とCMC_Meetupで学んだこと、実践したことSkyWayとWebRTC開発者コミュニティ4年間の軌跡とCMC_Meetupで学んだこと、実践したこと
SkyWayとWebRTC開発者コミュニティ4年間の軌跡とCMC_Meetupで学んだこと、実践したこと
Yusuke Naka
 
SPAを実現するために必要な通信技術
SPAを実現するために必要な通信技術SPAを実現するために必要な通信技術
SPAを実現するために必要な通信技術
Yusuke Naka
 
究極のゲーム用通信プロトコルを探せ!
究極のゲーム用通信プロトコルを探せ!究極のゲーム用通信プロトコルを探せ!
究極のゲーム用通信プロトコルを探せ!
Ryosuke Otsuya
 
HTML5 Night 2014 Web x Network Technology ( WebRTC )
HTML5 Night 2014 Web x Network Technology ( WebRTC )HTML5 Night 2014 Web x Network Technology ( WebRTC )
HTML5 Night 2014 Web x Network Technology ( WebRTC )
Kensaku Komatsu
 

Similar to HTML5 APIと組み合わせて作るWebRTCアプリ (20)

注目の最新技術「WebRTC」とは? -技術概要と事例紹介-
注目の最新技術「WebRTC」とは? -技術概要と事例紹介-注目の最新技術「WebRTC」とは? -技術概要と事例紹介-
注目の最新技術「WebRTC」とは? -技術概要と事例紹介-
 
Web RTCにより拓かれるコミュニケーションサービスの形 「新たなバリュー創造へ。ntt comのチャレンジ」webアプリケーション エバンジェリスト ...
Web RTCにより拓かれるコミュニケーションサービスの形 「新たなバリュー創造へ。ntt comのチャレンジ」webアプリケーション エバンジェリスト ...Web RTCにより拓かれるコミュニケーションサービスの形 「新たなバリュー創造へ。ntt comのチャレンジ」webアプリケーション エバンジェリスト ...
Web RTCにより拓かれるコミュニケーションサービスの形 「新たなバリュー創造へ。ntt comのチャレンジ」webアプリケーション エバンジェリスト ...
 
エフサミ2014 web rtcの傾向と対策
エフサミ2014 web rtcの傾向と対策エフサミ2014 web rtcの傾向と対策
エフサミ2014 web rtcの傾向と対策
 
Web of Thingsの現状とWebRTC活用の可能性
Web of Thingsの現状とWebRTC活用の可能性Web of Thingsの現状とWebRTC活用の可能性
Web of Thingsの現状とWebRTC活用の可能性
 
WebRTC入門+最新動向
WebRTC入門+最新動向WebRTC入門+最新動向
WebRTC入門+最新動向
 
はじめてのWebRTC/ORTC
はじめてのWebRTC/ORTCはじめてのWebRTC/ORTC
はじめてのWebRTC/ORTC
 
Web rtcの使い方
Web rtcの使い方Web rtcの使い方
Web rtcの使い方
 
WebRTCで動かす“テレイグジスタンス”ロボット
WebRTCで動かす“テレイグジスタンス”ロボットWebRTCで動かす“テレイグジスタンス”ロボット
WebRTCで動かす“テレイグジスタンス”ロボット
 
iPhoneでなんちゃってWebRTC
iPhoneでなんちゃってWebRTCiPhoneでなんちゃってWebRTC
iPhoneでなんちゃってWebRTC
 
14th apr2015 リックテレコ勉強会
14th apr2015 リックテレコ勉強会14th apr2015 リックテレコ勉強会
14th apr2015 リックテレコ勉強会
 
SkyWay HandsOn
SkyWay HandsOnSkyWay HandsOn
SkyWay HandsOn
 
WebRTC status and what to expect in 2015
WebRTC status and what to expect in 2015WebRTC status and what to expect in 2015
WebRTC status and what to expect in 2015
 
WebRTC の紹介
WebRTC の紹介WebRTC の紹介
WebRTC の紹介
 
エンタープライズ環境におけるWebRTC活用のポイント
エンタープライズ環境におけるWebRTC活用のポイントエンタープライズ環境におけるWebRTC活用のポイント
エンタープライズ環境におけるWebRTC活用のポイント
 
ビデオ通話・P2Pがコモディティ化する世界 WebRTCによるこれからを探る
ビデオ通話・P2Pがコモディティ化する世界 WebRTCによるこれからを探るビデオ通話・P2Pがコモディティ化する世界 WebRTCによるこれからを探る
ビデオ通話・P2Pがコモディティ化する世界 WebRTCによるこれからを探る
 
SkyWay Vision & Mission
SkyWay Vision & MissionSkyWay Vision & Mission
SkyWay Vision & Mission
 
SkyWayとWebRTC開発者コミュニティ4年間の軌跡とCMC_Meetupで学んだこと、実践したこと
SkyWayとWebRTC開発者コミュニティ4年間の軌跡とCMC_Meetupで学んだこと、実践したことSkyWayとWebRTC開発者コミュニティ4年間の軌跡とCMC_Meetupで学んだこと、実践したこと
SkyWayとWebRTC開発者コミュニティ4年間の軌跡とCMC_Meetupで学んだこと、実践したこと
 
SPAを実現するために必要な通信技術
SPAを実現するために必要な通信技術SPAを実現するために必要な通信技術
SPAを実現するために必要な通信技術
 
究極のゲーム用通信プロトコルを探せ!
究極のゲーム用通信プロトコルを探せ!究極のゲーム用通信プロトコルを探せ!
究極のゲーム用通信プロトコルを探せ!
 
HTML5 Night 2014 Web x Network Technology ( WebRTC )
HTML5 Night 2014 Web x Network Technology ( WebRTC )HTML5 Night 2014 Web x Network Technology ( WebRTC )
HTML5 Night 2014 Web x Network Technology ( WebRTC )
 

More from WebRTCConferenceJapan

WebController for V-Sido Connect:WebRTCとWebGLで作る人型ロボット遠隔操縦システム(2)
WebController for V-Sido Connect:WebRTCとWebGLで作る人型ロボット遠隔操縦システム(2)WebController for V-Sido Connect:WebRTCとWebGLで作る人型ロボット遠隔操縦システム(2)
WebController for V-Sido Connect:WebRTCとWebGLで作る人型ロボット遠隔操縦システム(2)
WebRTCConferenceJapan
 
WebController for V-Sido Connect:WebRTCとWebGLで作る人型ロボット遠隔操縦システム(1)
WebController for V-Sido Connect:WebRTCとWebGLで作る人型ロボット遠隔操縦システム(1)WebController for V-Sido Connect:WebRTCとWebGLで作る人型ロボット遠隔操縦システム(1)
WebController for V-Sido Connect:WebRTCとWebGLで作る人型ロボット遠隔操縦システム(1)
WebRTCConferenceJapan
 
WebRTC on Native App
WebRTC on Native AppWebRTC on Native App
WebRTC on Native App
WebRTCConferenceJapan
 
The missing signalling layer for WebRTC
The missing signalling layer for WebRTCThe missing signalling layer for WebRTC
The missing signalling layer for WebRTC
WebRTCConferenceJapan
 
WebRTCが深めるお客様と企業のコミュニケーション
WebRTCが深めるお客様と企業のコミュニケーションWebRTCが深めるお客様と企業のコミュニケーション
WebRTCが深めるお客様と企業のコミュニケーション
WebRTCConferenceJapan
 
Global Step Academy のWebRTC活用事例
Global Step Academy のWebRTC活用事例Global Step Academy のWebRTC活用事例
Global Step Academy のWebRTC活用事例
WebRTCConferenceJapan
 
WebRTCで実現するオンライン英会話の未来
WebRTCで実現するオンライン英会話の未来WebRTCで実現するオンライン英会話の未来
WebRTCで実現するオンライン英会話の未来
WebRTCConferenceJapan
 
WebRTCが切り拓く2020年のIoT
WebRTCが切り拓く2020年のIoTWebRTCが切り拓く2020年のIoT
WebRTCが切り拓く2020年のIoT
WebRTCConferenceJapan
 
WebRTCとDialogicとの関わり
WebRTCとDialogicとの関わりWebRTCとDialogicとの関わり
WebRTCとDialogicとの関わり
WebRTCConferenceJapan
 
User Experience is Everything
User Experience is EverythingUser Experience is Everything
User Experience is Everything
WebRTCConferenceJapan
 
HTML5 APIと組み合わせて作るWebRTCアプリ
HTML5 APIと組み合わせて作るWebRTCアプリHTML5 APIと組み合わせて作るWebRTCアプリ
HTML5 APIと組み合わせて作るWebRTCアプリ
WebRTCConferenceJapan
 
WebRTC+オセロ
WebRTC+オセロWebRTC+オセロ
WebRTC+オセロ
WebRTCConferenceJapan
 
大学生により使いやすいIT環境
大学生により使いやすいIT環境大学生により使いやすいIT環境
大学生により使いやすいIT環境
WebRTCConferenceJapan
 
WebRTC関連技術の標準化動向
WebRTC関連技術の標準化動向WebRTC関連技術の標準化動向
WebRTC関連技術の標準化動向
WebRTCConferenceJapan
 
GENBAND – KANDY Web-enabled Communications
GENBAND – KANDY Web-enabled CommunicationsGENBAND – KANDY Web-enabled Communications
GENBAND – KANDY Web-enabled Communications
WebRTCConferenceJapan
 
The WebRTC Continuum - The Next Wave
The WebRTC Continuum - The Next WaveThe WebRTC Continuum - The Next Wave
The WebRTC Continuum - The Next Wave
WebRTCConferenceJapan
 

More from WebRTCConferenceJapan (16)

WebController for V-Sido Connect:WebRTCとWebGLで作る人型ロボット遠隔操縦システム(2)
WebController for V-Sido Connect:WebRTCとWebGLで作る人型ロボット遠隔操縦システム(2)WebController for V-Sido Connect:WebRTCとWebGLで作る人型ロボット遠隔操縦システム(2)
WebController for V-Sido Connect:WebRTCとWebGLで作る人型ロボット遠隔操縦システム(2)
 
WebController for V-Sido Connect:WebRTCとWebGLで作る人型ロボット遠隔操縦システム(1)
WebController for V-Sido Connect:WebRTCとWebGLで作る人型ロボット遠隔操縦システム(1)WebController for V-Sido Connect:WebRTCとWebGLで作る人型ロボット遠隔操縦システム(1)
WebController for V-Sido Connect:WebRTCとWebGLで作る人型ロボット遠隔操縦システム(1)
 
WebRTC on Native App
WebRTC on Native AppWebRTC on Native App
WebRTC on Native App
 
The missing signalling layer for WebRTC
The missing signalling layer for WebRTCThe missing signalling layer for WebRTC
The missing signalling layer for WebRTC
 
WebRTCが深めるお客様と企業のコミュニケーション
WebRTCが深めるお客様と企業のコミュニケーションWebRTCが深めるお客様と企業のコミュニケーション
WebRTCが深めるお客様と企業のコミュニケーション
 
Global Step Academy のWebRTC活用事例
Global Step Academy のWebRTC活用事例Global Step Academy のWebRTC活用事例
Global Step Academy のWebRTC活用事例
 
WebRTCで実現するオンライン英会話の未来
WebRTCで実現するオンライン英会話の未来WebRTCで実現するオンライン英会話の未来
WebRTCで実現するオンライン英会話の未来
 
WebRTCが切り拓く2020年のIoT
WebRTCが切り拓く2020年のIoTWebRTCが切り拓く2020年のIoT
WebRTCが切り拓く2020年のIoT
 
WebRTCとDialogicとの関わり
WebRTCとDialogicとの関わりWebRTCとDialogicとの関わり
WebRTCとDialogicとの関わり
 
User Experience is Everything
User Experience is EverythingUser Experience is Everything
User Experience is Everything
 
HTML5 APIと組み合わせて作るWebRTCアプリ
HTML5 APIと組み合わせて作るWebRTCアプリHTML5 APIと組み合わせて作るWebRTCアプリ
HTML5 APIと組み合わせて作るWebRTCアプリ
 
WebRTC+オセロ
WebRTC+オセロWebRTC+オセロ
WebRTC+オセロ
 
大学生により使いやすいIT環境
大学生により使いやすいIT環境大学生により使いやすいIT環境
大学生により使いやすいIT環境
 
WebRTC関連技術の標準化動向
WebRTC関連技術の標準化動向WebRTC関連技術の標準化動向
WebRTC関連技術の標準化動向
 
GENBAND – KANDY Web-enabled Communications
GENBAND – KANDY Web-enabled CommunicationsGENBAND – KANDY Web-enabled Communications
GENBAND – KANDY Web-enabled Communications
 
The WebRTC Continuum - The Next Wave
The WebRTC Continuum - The Next WaveThe WebRTC Continuum - The Next Wave
The WebRTC Continuum - The Next Wave
 

Recently uploaded

CS集会#13_なるほどわからん通信技術 発表資料
CS集会#13_なるほどわからん通信技術 発表資料CS集会#13_なるほどわからん通信技術 発表資料
CS集会#13_なるほどわからん通信技術 発表資料
Yuuitirou528 default
 
FIDO Alliance Osaka Seminar: CloudGate.pdf
FIDO Alliance Osaka Seminar: CloudGate.pdfFIDO Alliance Osaka Seminar: CloudGate.pdf
FIDO Alliance Osaka Seminar: CloudGate.pdf
FIDO Alliance
 
FIDO Alliance Osaka Seminar: PlayStation Passkey Deployment Case Study.pdf
FIDO Alliance Osaka Seminar: PlayStation Passkey Deployment Case Study.pdfFIDO Alliance Osaka Seminar: PlayStation Passkey Deployment Case Study.pdf
FIDO Alliance Osaka Seminar: PlayStation Passkey Deployment Case Study.pdf
FIDO Alliance
 
TaketoFujikawa_物語のコンセプトに基づく情報アクセス手法の基礎検討_JSAI2024
TaketoFujikawa_物語のコンセプトに基づく情報アクセス手法の基礎検討_JSAI2024TaketoFujikawa_物語のコンセプトに基づく情報アクセス手法の基礎検討_JSAI2024
TaketoFujikawa_物語のコンセプトに基づく情報アクセス手法の基礎検討_JSAI2024
Matsushita Laboratory
 
2024年度_サイバーエージェント_新卒研修「データベースの歴史」.pptx
2024年度_サイバーエージェント_新卒研修「データベースの歴史」.pptx2024年度_サイバーエージェント_新卒研修「データベースの歴史」.pptx
2024年度_サイバーエージェント_新卒研修「データベースの歴史」.pptx
yassun7010
 
FIDO Alliance Osaka Seminar: Welcome Slides.pdf
FIDO Alliance Osaka Seminar: Welcome Slides.pdfFIDO Alliance Osaka Seminar: Welcome Slides.pdf
FIDO Alliance Osaka Seminar: Welcome Slides.pdf
FIDO Alliance
 
単腕マニピュレータによる 複数物体の同時組み立ての 基礎的考察 / Basic Approach to Robotic Assembly of Multi...
単腕マニピュレータによる 複数物体の同時組み立ての 基礎的考察 / Basic Approach to Robotic Assembly of Multi...単腕マニピュレータによる 複数物体の同時組み立ての 基礎的考察 / Basic Approach to Robotic Assembly of Multi...
単腕マニピュレータによる 複数物体の同時組み立ての 基礎的考察 / Basic Approach to Robotic Assembly of Multi...
Fukuoka Institute of Technology
 
MPAなWebフレームワーク、Astroの紹介 (その2) 2024/05/24の勉強会で発表されたものです。
MPAなWebフレームワーク、Astroの紹介 (その2) 2024/05/24の勉強会で発表されたものです。MPAなWebフレームワーク、Astroの紹介 (その2) 2024/05/24の勉強会で発表されたものです。
MPAなWebフレームワーク、Astroの紹介 (その2) 2024/05/24の勉強会で発表されたものです。
iPride Co., Ltd.
 
【DLゼミ】XFeat: Accelerated Features for Lightweight Image Matching
【DLゼミ】XFeat: Accelerated Features for Lightweight Image Matching【DLゼミ】XFeat: Accelerated Features for Lightweight Image Matching
【DLゼミ】XFeat: Accelerated Features for Lightweight Image Matching
harmonylab
 
FIDO Alliance Osaka Seminar: NEC & Yubico Panel.pdf
FIDO Alliance Osaka Seminar: NEC & Yubico Panel.pdfFIDO Alliance Osaka Seminar: NEC & Yubico Panel.pdf
FIDO Alliance Osaka Seminar: NEC & Yubico Panel.pdf
FIDO Alliance
 
論文紹介:When Visual Prompt Tuning Meets Source-Free Domain Adaptive Semantic Seg...
論文紹介:When Visual Prompt Tuning Meets Source-Free Domain Adaptive Semantic Seg...論文紹介:When Visual Prompt Tuning Meets Source-Free Domain Adaptive Semantic Seg...
論文紹介:When Visual Prompt Tuning Meets Source-Free Domain Adaptive Semantic Seg...
Toru Tamaki
 
FIDO Alliance Osaka Seminar: LY-DOCOMO-KDDI-Mercari Panel.pdf
FIDO Alliance Osaka Seminar: LY-DOCOMO-KDDI-Mercari Panel.pdfFIDO Alliance Osaka Seminar: LY-DOCOMO-KDDI-Mercari Panel.pdf
FIDO Alliance Osaka Seminar: LY-DOCOMO-KDDI-Mercari Panel.pdf
FIDO Alliance
 
YugabyteDB適用に向けた取り組みと隠れた魅力 (DSS Asia 2024 発表資料)
YugabyteDB適用に向けた取り組みと隠れた魅力 (DSS Asia 2024 発表資料)YugabyteDB適用に向けた取り組みと隠れた魅力 (DSS Asia 2024 発表資料)
YugabyteDB適用に向けた取り組みと隠れた魅力 (DSS Asia 2024 発表資料)
NTT DATA Technology & Innovation
 
【AI論文解説】Consistency ModelとRectified Flow
【AI論文解説】Consistency ModelとRectified Flow【AI論文解説】Consistency ModelとRectified Flow
【AI論文解説】Consistency ModelとRectified Flow
Sony - Neural Network Libraries
 
LoRaWAN 4チャンネル電流センサー・コンバーター CS01-LBカタログ
LoRaWAN 4チャンネル電流センサー・コンバーター CS01-LBカタログLoRaWAN 4チャンネル電流センサー・コンバーター CS01-LBカタログ
LoRaWAN 4チャンネル電流センサー・コンバーター CS01-LBカタログ
CRI Japan, Inc.
 

Recently uploaded (15)

CS集会#13_なるほどわからん通信技術 発表資料
CS集会#13_なるほどわからん通信技術 発表資料CS集会#13_なるほどわからん通信技術 発表資料
CS集会#13_なるほどわからん通信技術 発表資料
 
FIDO Alliance Osaka Seminar: CloudGate.pdf
FIDO Alliance Osaka Seminar: CloudGate.pdfFIDO Alliance Osaka Seminar: CloudGate.pdf
FIDO Alliance Osaka Seminar: CloudGate.pdf
 
FIDO Alliance Osaka Seminar: PlayStation Passkey Deployment Case Study.pdf
FIDO Alliance Osaka Seminar: PlayStation Passkey Deployment Case Study.pdfFIDO Alliance Osaka Seminar: PlayStation Passkey Deployment Case Study.pdf
FIDO Alliance Osaka Seminar: PlayStation Passkey Deployment Case Study.pdf
 
TaketoFujikawa_物語のコンセプトに基づく情報アクセス手法の基礎検討_JSAI2024
TaketoFujikawa_物語のコンセプトに基づく情報アクセス手法の基礎検討_JSAI2024TaketoFujikawa_物語のコンセプトに基づく情報アクセス手法の基礎検討_JSAI2024
TaketoFujikawa_物語のコンセプトに基づく情報アクセス手法の基礎検討_JSAI2024
 
2024年度_サイバーエージェント_新卒研修「データベースの歴史」.pptx
2024年度_サイバーエージェント_新卒研修「データベースの歴史」.pptx2024年度_サイバーエージェント_新卒研修「データベースの歴史」.pptx
2024年度_サイバーエージェント_新卒研修「データベースの歴史」.pptx
 
FIDO Alliance Osaka Seminar: Welcome Slides.pdf
FIDO Alliance Osaka Seminar: Welcome Slides.pdfFIDO Alliance Osaka Seminar: Welcome Slides.pdf
FIDO Alliance Osaka Seminar: Welcome Slides.pdf
 
単腕マニピュレータによる 複数物体の同時組み立ての 基礎的考察 / Basic Approach to Robotic Assembly of Multi...
単腕マニピュレータによる 複数物体の同時組み立ての 基礎的考察 / Basic Approach to Robotic Assembly of Multi...単腕マニピュレータによる 複数物体の同時組み立ての 基礎的考察 / Basic Approach to Robotic Assembly of Multi...
単腕マニピュレータによる 複数物体の同時組み立ての 基礎的考察 / Basic Approach to Robotic Assembly of Multi...
 
MPAなWebフレームワーク、Astroの紹介 (その2) 2024/05/24の勉強会で発表されたものです。
MPAなWebフレームワーク、Astroの紹介 (その2) 2024/05/24の勉強会で発表されたものです。MPAなWebフレームワーク、Astroの紹介 (その2) 2024/05/24の勉強会で発表されたものです。
MPAなWebフレームワーク、Astroの紹介 (その2) 2024/05/24の勉強会で発表されたものです。
 
【DLゼミ】XFeat: Accelerated Features for Lightweight Image Matching
【DLゼミ】XFeat: Accelerated Features for Lightweight Image Matching【DLゼミ】XFeat: Accelerated Features for Lightweight Image Matching
【DLゼミ】XFeat: Accelerated Features for Lightweight Image Matching
 
FIDO Alliance Osaka Seminar: NEC & Yubico Panel.pdf
FIDO Alliance Osaka Seminar: NEC & Yubico Panel.pdfFIDO Alliance Osaka Seminar: NEC & Yubico Panel.pdf
FIDO Alliance Osaka Seminar: NEC & Yubico Panel.pdf
 
論文紹介:When Visual Prompt Tuning Meets Source-Free Domain Adaptive Semantic Seg...
論文紹介:When Visual Prompt Tuning Meets Source-Free Domain Adaptive Semantic Seg...論文紹介:When Visual Prompt Tuning Meets Source-Free Domain Adaptive Semantic Seg...
論文紹介:When Visual Prompt Tuning Meets Source-Free Domain Adaptive Semantic Seg...
 
FIDO Alliance Osaka Seminar: LY-DOCOMO-KDDI-Mercari Panel.pdf
FIDO Alliance Osaka Seminar: LY-DOCOMO-KDDI-Mercari Panel.pdfFIDO Alliance Osaka Seminar: LY-DOCOMO-KDDI-Mercari Panel.pdf
FIDO Alliance Osaka Seminar: LY-DOCOMO-KDDI-Mercari Panel.pdf
 
YugabyteDB適用に向けた取り組みと隠れた魅力 (DSS Asia 2024 発表資料)
YugabyteDB適用に向けた取り組みと隠れた魅力 (DSS Asia 2024 発表資料)YugabyteDB適用に向けた取り組みと隠れた魅力 (DSS Asia 2024 発表資料)
YugabyteDB適用に向けた取り組みと隠れた魅力 (DSS Asia 2024 発表資料)
 
【AI論文解説】Consistency ModelとRectified Flow
【AI論文解説】Consistency ModelとRectified Flow【AI論文解説】Consistency ModelとRectified Flow
【AI論文解説】Consistency ModelとRectified Flow
 
LoRaWAN 4チャンネル電流センサー・コンバーター CS01-LBカタログ
LoRaWAN 4チャンネル電流センサー・コンバーター CS01-LBカタログLoRaWAN 4チャンネル電流センサー・コンバーター CS01-LBカタログ
LoRaWAN 4チャンネル電流センサー・コンバーター CS01-LBカタログ
 

HTML5 APIと組み合わせて作るWebRTCアプリ

  • 1. Copyright © NTT Communications Corporation. All right reserved. HTML5 APIと組み合わせて作る WebRTCアプリ NTTコミュニケーションズ株式会社 技術開発部 Webコア Technical Unit 中原 (html5-ia@ntt.com) 2015年2月
  • 2. Copyright © NTT Communications Corporation. All right reserved. NTTコミュニケーションズ HTML5ラボ 2 Web Speech API Facebook Graph API Web MIDI API …… & n  最先端Web技術の普及促進を目指し、WebRTCを簡単に使えるプラット フォーム(SkyWay)やその上で動作するアプリケーションを開発している。 n  WebRTCは他のWeb系技術・サービスとの親和性が高いため、各種APIと 連携したアプリケーションも開発中。 http://html5lab.ntt.com/
  • 3. Copyright © NTT Communications Corporation. All right reserved. NAT NAT SkyWay 3 n  SkyWayは、WebRTC活用サービスの提供者向けのフレームワーク。 n  複雑なシグナリング処理を担うAPI群とライブラリで構成される。 n 2013年12月5日に提供開始 n 約1100名の開発者が利用 n 提供内容 •  シグナリングAPI •  NAT越えAPI (=STUN・TURN) •  ライブラリ(オープンソース) STUN API Signaling API STUN API ライブラリ ライブラリ 開発者はPeer to Peer通信のプログラ ミングに専念できる SkyWayが シグナリングを 担うので、
  • 4. Copyright © NTT Communications Corporation. All right reserved. 字幕付きボイスチャット (WebRTC & Web Speech API) 4 n  音声認識機能を組み合わせ、通話内容をテキストで表示。 n  聴力が衰えた方向け、電車や会議中等の通話できない環境、議事録の自動 作成、安全な歩きスマホ等に適用可能。 n  現在はGoogle Chromeの音声認識APIを利用。NTT研究所の音声認識技術 に移植中。 相手との通話内容が 吹き出し風に表示される SkyWay 0.SkyWay でシグナリング 4.テキストを送受信 音声認識 API 音声認識 API 2.音声を テキスト化 3.音声を送受信 1.話す 5.音声を再生 テキストを表示
  • 5. Copyright © NTT Communications Corporation. All right reserved. テレプレゼンス・ロボット 5 n  ビデオ会議機能を備えた遠隔操作ロボット。 n  Double + iPadで、テレプレゼンス・ロボットを実現。WebRTC技術を採 用しているのでブラウザから操作できる。 0.シグナ リング 1.映像と音声を 送受信 2.会話 2.会話 SkyWay キーボード&マウスで ブラウザから操作できる! 今日は、笛でDoubleを動かします
  • 6. Copyright © NTT Communications Corporation. All right reserved. MIDI & Wind Synthesizer 6 MIDI: Musical Instrument Digital Interface 電子楽器の演奏データを(音声でなく)メタデータで転送する規格 MIDI信号の例 0 1 0 1 0 0 0 00 0 1 1 1 1 0 01 0 0 1 0 0 0 0 ステータス情報 (例: Note ON) Note番号 (例:真ん中の ド ) ベロシティ(強さ) (例: メゾフォルテで) Wireless Electronic Wind Synthesizer  EWI 5000
  • 7. Copyright © NTT Communications Corporation. All right reserved. Web MIDI API 7 従来のMIDI MIDIデータ Web MIDI API n  Web MIDI APIは、ブラウザによるMIDIデータの取り扱いを実現する。 DTM: DeskTop Music 画像出典: Cakewalk Pro 9 公式サイト n  MIDIコントローラからDTMアプリにデータを打ち込む MIDIデータ MIDIデータ MIDIデータ MIDIデータ n  DTMアプリからMIDI音源にデータを送り、鳴らす n  MIDIコントローラからMIDI音源にデータを送り、リアルタイム演奏 n  MIDIコントローラからブラウザにデータを入力 n  ブラウザからMIDI音源にデータを送り、鳴らす 今回はこれを 使います!
  • 8. Copyright © NTT Communications Corporation. All right reserved. 笛でDouble制御 (WebRTC & Web MIDI API) 8 Media Channel (動画・音声) Data Channel (Double制御信号) MIDIデータを入力 MIDIデータの入力から、 音波合成・Double制御信号 生成を行う n  Web MIDI APIを使ったブラウザによるMIDIデータ取得と、 WebRTCによるDoubleの制御を組み合わせる。 シグナリング SkyWay