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

Copyright © NTT Communications Corporation. All right reserved.
HTML5 APIと組み合わせて作る
WebRTCアプリ
NTTコミュニケーションズ株式会社
技術開発部
Webコア Technical Unit
中原 (html5-ia@ntt.com)
2015年2月

NTTコミュニケーションズ HTML5ラボ
2
Web
Speech API
Facebook
Graph API
Web MIDI
API ……
＆
n  最先端Web技術の普及促進を目指し、WebRTCを簡単に使えるプラット
フォーム(SkyWay)やその上で動作するアプリケーションを開発している。
n  WebRTCは他のWeb系技術・サービスとの親和性が高いため、各種APIと
連携したアプリケーションも開発中。
http://html5lab.ntt.com/

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が
シグナリングを
担うので、

字幕付きボイスチャット (WebRTC & Web Speech API)
4
n  音声認識機能を組み合わせ、通話内容をテキストで表示。
n  聴力が衰えた方向け、電車や会議中等の通話できない環境、議事録の自動
作成、安全な歩きスマホ等に適用可能。
n  現在はGoogle Chromeの音声認識APIを利用。NTT研究所の音声認識技術
に移植中。
相手との通話内容が
吹き出し風に表示される
SkyWay
0.SkyWay
でシグナリング
4.テキストを送受信
音声認識
API
音声認識
API
2.音声を
テキスト化
3.音声を送受信
1.話す 5.音声を再生
テキストを表示

テレプレゼンス・ロボット
5
n  ビデオ会議機能を備えた遠隔操作ロボット。
n  Romo + iPhoneで、テレプレゼンス・ロボットを実現。WebRTC技術を
採用しているのでブラウザから操作できる。
0.シグナ
リング
1.映像と音声を
送受信
2.会話
2.会話
SkyWay
キーボード＆マウスで
ブラウザから操作できる！
今日は、笛でRomoを動かします

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

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音源にデータを送り、鳴らす
今回はこれを
使います！

笛でRomo制御 (WebRTC & Web MIDI API)
8
Media Channel (動画・音声)
Data Channel (Romo制御信号)
MIDIデータを入力
MIDIデータの入力から、
音波合成・Romo制御信号
生成を行う
n  Web MIDI APIを使ったブラウザによるMIDIデータ取得と、
WebRTCによるRomoの制御を組み合わせる。
シグナリング
SkyWay

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

More Related Content

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

More from WebRTCConferenceJapan

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