HTML5によるリアルタイムコミュニケーション

WebRTCの概説2014/03/10WebRTC活用セミナーhttp://www.ntt-at.co.jp/eventseminar/seminar/2013/detail/s_20140310/

金城 雄

NTTアドバンステクノロジ情報機器テクノロジセンタ所属

http://www.ntt-at.co.jp/http://www.slideshare.net/You_Kinjoh/html5-real-timecommunicationwebrtc

gihyo.jpJettyで始めるWebSocket超入門

自己紹介きんじょう ゆう

金城 雄NTTアドバンステクノロジ

NTT-ATアプリケーションソリューション事業本部情報機器テクノロジセンタ所属

http://gihyo.jp/dev/feature/01/websocket

内容

HTML5の概要

WebRTC

内容

HTML5の概要WebSocket <-避けて通れないためWebRTC

途中、皆さまに参加して頂けるデモが2つあります。

是非参加をお願いします。

後程URLを表示します。

デモ参加のお願いINFORMATION

INFORMATION

WebSocketのデモです。スマートフォンをご準備下さい。

参加型デモ1INFORMATION

INFORMATION

iOSSafari

AndroidChromeFirefoxOpera

WebRTCのデモです。カメラ付きの端末でお願いします。

参加型デモ2INFORMATION

INFORMATION

Androidパソコン

ChromeFirefox

http://www.w3.org/html/logo/

HTML5の機能一覧が

何度か出てきますが全ての機能を

網羅していません。新しい仕様が今も増え続けています。

CAUTION

CAUTION

狭義のHTML5と

広義のHTML5

HTML5 = HTML5 + CSS + JS

HTML5 = HTML5 + CSS + JS

広義

狭義

HTML5 = HTML5 + CSS + JS

広義

狭義 マークアップ言語の仕様従来のHTMLの改訂

新しいAPIも含まれるバズワード(マーケティング用語)

SemanticElements

MultiMedia

Canvas

HTML5Forms

OfflineSupport

Webm

H.264

Micro-Data

WebGL

WebSQL

IndexedDB

SVG

Server-Sent ev.

WebSockets

WebSockets

Geo-location

FileAPI

WebStorage

XHR2

MathML

WebAudio

LayoutMedia

Queries

HTML5

CSS3~Transform

Animation Regions

FlexBox

HTML5Parser

Mouse,Key ev.

Opus

ECMAScript ECMA

6th

USB

CSP

SPDY

WebCL

WebRTC

NetInfo

MP3

DeviceStorage

TCPSocket

NFC

File Sys

Notifi-cation

XHTML5

Orien-tation

WebWorkers

WebMessag-

ing

DOM4

SMIL Vibra-tion

Proxi-mity

XPathRSS

RDF

OGPSchema

.org

WAI-ARIA

W3C

WHATWG

other

Khronos

ECMA

IETF

WOFF

BatteryStatus

Radio

Tel

HTML

DNT

http://www.slideshare.net/dynamis/toward-firefox-os/26 より引用

http://www.slideshare.net/dynamis/toward-firefox-os/22 より引用

SemanticElements

MultiMedia

HTML5Forms

OfflineSupportHTML5HTML5

Parser

Mouse,Key ev.

XHTML5WAI-ARIA

W3C

http://platform.html5.org/ より引用 (2013/04/04 版)

http://platform.html5.org/ より引用 (2013/04/04 版)

HTML5 = HTML5 + CSS + JS

本日のコンテキスト

これ

で、HTML5で何ができるように

なるの?

できることはこれまでと変わらない

これまでブラウザで

できなかったことができるようになる

だけ

元々はWeb Pageを閲覧するためのものだった

ブラウザで、Web Applicationを実行できるようにするために、

必要なものを追加

http://platform.html5.org/ より引用 (2013/04/04 版)

機能一覧には現れない

HTML5の特徴

HTML5OSの機能がブラウザ上で使える低レイヤーのAPIがWeb APIで共通化特許に制限されない誰もが利用可能Webプラットフォーム上で統合

OSの機能をWebにOSの機能が、ブラウザを介してサイトに提供されるアドレス帳 ネットワーク情報 バッテリー状態 通知ストリーム メディアデータ オーディオ ビデオ 字幕

Webカメラ マイク Audioの波形操作2D(ラスター,ベクター) 3DCG 音声入力 音声合成暗号化 ファイルシステム データベース スレッド通信(WebSocket,TCP,UDP) Bluetooth

加速度センサ 傾きセンサ ジャイロ バイブレーションGPS 電子コンパス 温度センサ 湿度センサ 気圧センサ

環境光センサ 近接センサ 磁気センサ etc.ネット接続が前提のもの・仕様策定中のもの・WebOS向けのものも含まれています。

Web APIで共通化低レイヤーのAPIがWeb APIで共通化されるOSに非依存実行環境に基本的に非依存環境による制限はありえる

センサ未搭載・端末性能等の理由や用途による理由(例:電子書籍)等が制限として考えられます。

特許に制限されないOpenであることが特徴パテント・フリーロイヤリティ・フリー

いわゆる業界団体よりもオープン仕様だけでなく策定過程も公開

特定の組織の利益よりも人類の利益を市場原理に左右される側面もあり。理想と現実は違う...。

誰もが利用可能世界中の誰もが利用可能な機能限られた組織の限られた人しか使えない仕様はオープンではない

今も100年後も自由に使えるように...「古文書の一部が、DRMで保護されていて見られない」のない未来に(電子書籍の仕様にも関連しているため)

DRMについての議論が始まったそうです。

Web P/F上で統合これら全てが、OpenWebプラットフォーム上で統合アイディア次第で新しい物が誰にでも日曜プログラミングで音声合成夏休みの宿題でビデオチャット作成

これらの知見はWeb上に蓄積

WebSocket

WebSocket

高速・双方向通信が可能TCPに似ているWebRTCとの関係シグナリングによく使われる

DEMO

デモ

iOSSafari

AndroidChromeFirefoxOpera

https://github.com/youkinjoh/color-monoliths

Browser加速度センサ

smartphone

server

BrowserWebGL

computer

WebSocketServer

WebSocket

WebSocket

WebRTC

WebRTC

リアルタイムコミュニケーションのAPIボイス・ビデオチャットP2P

http://www.slideshare.net/mganeko/2013-web-rtctechcross/6 より引用

キャリア型通信

手段の例

市場

ユーザメリット事業者メリット

利用方法

固定電話 携帯電話 (TV放送)

インフラを持つキャリアが支配

世界中の人と会話できる

×

単独で利用

http://www.slideshare.net/mganeko/2013-web-rtctechcross/6 を改変して引用

Over The Top

手段の例

市場

ユーザメリット事業者メリット

利用方法

Skype, WebEx(YouTube, Ustream)キャリアに縛られない独自の仕組みを提供する少数のベンダーが参加可能

世界中の人と無料/安価で会話できる

限定的なAPI提供一部連携可能

ユーザが組み合わせて利用

http://www.slideshare.net/mganeko/2013-web-rtctechcross/6 を改変して引用

Webブラウザ型

手段の例

市場

ユーザメリット事業者メリット

利用方法

WebRTC

特別な仕組みは不要誰でも参加可能

専用アプリ無しで会話できる

完全にプログラマブル部品として利用可能

製品/サービスに組み込んで利用

http://www.slideshare.net/mganeko/2013-web-rtctechcross/6 を改変して引用

キャリア型通信 Over The TopWebブラウザ型

手段の例

市場

ユーザメリット

事業者メリット

利用方法

固定電話携帯電話(TV放送)

Skype, WebEx(Youtube, Ustream)

WebRTC

インフラを持つキャリアが支配

キャリアに縛られない独自の仕組みを提供する少数のベンダーが参加可能

特別な仕組みは不要誰でも参加可能

世界中の人と会話できる

世界中の人と無料/安価で会話できる

専用アプリ無しで会話できる

× 限定的なAPI提供一部連携可能

完全にプログラマブル部品として利用可能

単独で利用 ユーザが組み合わせて利用

製品/サービスに組み込んで利用

http://www.slideshare.net/mganeko/2013-web-rtctechcross/6 を改変して引用

2つの仕様

Media Capture and Streams (getUserMedia)WebRTC 1.0: Real-time Communication Between Browsers

Media Capture and Streams (getUserMesia)

ブラウザからマイクやカメラにアクセス利用範囲はWebRTC以外とも音声処理(with Web Audio API)ボイスチェンジャー etc.

画像処理(with Canvas)顔検出 etc.

顔認識ができるようになるのも時間の問題か?

DEMO

https://developer.mozilla.org/ja/demos/detail/an-ar-game/launchhttp://www.airtightinteractive.com/demos/js/webcammesh/

SAMPLE

<!DOCTYPE html><video id="video" /><script>navigator.getUserMedia( {video: true, audio: true}, function(stream) { var video = document .getElementById('video'); video.src = window.URL .createObjectURL(stream); video.play(); });</script>解説用に書いたコードです。 ベンダープレフィックスがないため動きません。

<!DOCTYPE html><video id="video" /><script>navigator.getUserMedia( {video: true, audio: true}, function(stream) { var video = document .getElementById('video'); video.src = window.URL .createObjectURL(stream); video.play(); });</script>解説用に書いたコードです。 ベンダープレフィックスがないため動きません。

ビデオ要素の表示とScript要素

<!DOCTYPE html><video id="video" /><script>navigator.getUserMedia( {video: true, audio: true}, function(stream) { var video = document .getElementById('video'); video.src = window.URL .createObjectURL(stream); video.play(); });</script>解説用に書いたコードです。 ベンダープレフィックスがないため動きません。

ユーザメディアの取得開始

<!DOCTYPE html><video id="video" /><script>navigator.getUserMedia( {video: true, audio: true}, function(stream) { var video = document .getElementById('video'); video.src = window.URL .createObjectURL(stream); video.play(); });</script>解説用に書いたコードです。 ベンダープレフィックスがないため動きません。

取得するユーザメディアはカメラとマイク

<!DOCTYPE html><video id="video" /><script>navigator.getUserMedia( {video: true, audio: true}, function(stream) { var video = document .getElementById('video'); video.src = window.URL .createObjectURL(stream); video.play(); });</script>解説用に書いたコードです。 ベンダープレフィックスがないため動きません。

ユーザメディア取得時の動作を指定

<!DOCTYPE html><video id="video" /><script>navigator.getUserMedia( {video: true, audio: true}, function(stream) { var video = document .getElementById('video'); video.src = window.URL .createObjectURL(stream); video.play(); });</script>解説用に書いたコードです。 ベンダープレフィックスがないため動きません。

ビデオ要素の取得ユーザメディアの指定再生開始

<!DOCTYPE html><video id="video" /><script>navigator.getUserMedia( {video: true, audio: true}, function(stream) { var video = document .getElementById('video'); video.src = window.URL .createObjectURL(stream); video.play(); });</script>解説用に書いたコードです。 ベンダープレフィックスがないため動きません。

WebRTC 1.0: Real-time Communication Between

Browsersブラウザとブラウザを接続シグナリング方式については規定されていないSIPXMPPWebSocket <- 今のところ一番使われているetc.

DEMO

デモ

Androidパソコン

ChromeFirefox

5分程度で約100MBの通信量が発生します。

http://1meeting.net/

WebRTC 1.0: Real-time Communication Between

Browsers

NAT通過・ ネゴシエーションICE(STUN + TURN + α)

STUNP2P・UDPホールパンチング

TURNサーバ経由

WebRTC 1.0: Real-time Communication Between

Browsers

データ通信MediaStream音声データ・映像データ

DataChannelテキストデータ・バイナリデータ

Web Server

WebSocketServer

ICE Server(STUN)

Browser Browser

NAT NAT

HTML+JS+CSS

Global IP/Port

signaling

HTML+JS+CSS

Global IP/Port

signaling

data

WebRTC DataBlack Magic

別資料

https://speakerdeck.com/feross/webrtc-data-black-magic

P18~53 をご覧下さい

WebRTC 1.0: Real-time Communication Between

Browsers

APIが複雑でわかりにくい

抽象化した仕様の多いHTML5のAPIの中では非常に複雑

WebRTC まとめボイス・ビデオチャットが可能テキスト・バイナリの通信も可能P2PNAT通過の仕組み通信制御のAPIが複雑ライブラリを使うという選択肢も

定番と言われるようなライブラリはまだありません。

HTML5とWebRTCWebプラットフォーム上APIが抽象化されている一部例外あり

他のAPIと組み合わせて使えるやりたい事が簡単にできる参入障壁が非常に低い今後はアイディアが重要に...?

DEMO

https://skyway.io/examples/caption-phone/

完

質疑応答

もう一度聞きたいところはありますか?

もっと詳しく聞きたいところはありますか?

ご清聴ありがとうございました