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

Copyright © NTT Communications Corporation. All right reserved. �

HTML5 APIと組み合わせて作る WebRTCアプリ NTTコミュニケーションズ株式会社技術開発部 Webコア Technical Unit 中原 ([email protected]) 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 0 0 0 1 1 1 1 0 0 1 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アプリ

Technology

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