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