狠狠撸

狠狠撸Share a Scribd company logo

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

?
?
W
WebRTCConferenceJapan

WebRTC Conference Japan講演資料 2015/2/6 「HTML5 APIと組み合わせて作るWebRTCアプリ」

1 of 8
Download to read offline
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?? Romo + iPhoneで、テレプレゼンス?ロボットを実現。WebRTC技術を 採用しているのでブラウザから操作できる。 0.シグナ リング 1.映像と音声を 送受信 2.会話 2.会話 SkyWay キーボード＆マウスで ブラウザから操作できる！ 今日は、笛でRomoを動かします
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. 笛でRomo制御 (WebRTC & Web MIDI API) 8 Media Channel (動画?音声) Data Channel (Romo制御信号) MIDIデータを入力 MIDIデータの入力から、 音波合成?Romo制御信号 生成を行う n?? Web MIDI APIを使ったブラウザによるMIDIデータ取得と、 WebRTCによるRomoの制御を組み合わせる。 シグナリング SkyWay

More Related Content

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?? Romo + iPhoneで、テレプレゼンス?ロボットを実現。WebRTC技術を 採用しているのでブラウザから操作できる。 0.シグナ リング 1.映像と音声を 送受信 2.会話 2.会話 SkyWay キーボード＆マウスで ブラウザから操作できる！ 今日は、笛でRomoを動かします
  • 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. 笛でRomo制御 (WebRTC & Web MIDI API) 8 Media Channel (動画?音声) Data Channel (Romo制御信号) MIDIデータを入力 MIDIデータの入力から、 音波合成?Romo制御信号 生成を行う n?? Web MIDI APIを使ったブラウザによるMIDIデータ取得と、 WebRTCによるRomoの制御を組み合わせる。 シグナリング SkyWay