Webによるデバイスを用いた
リアルタイムサービスの可能性
2013.12.7(sat) HTML5 Conference 2013 in Gifu
こまつけんさく
自己紹介
 名前:小松健作
 所属:NTT communications
 HTML5の研究開発
 HTML5の啓蒙・コミュニティ運営

 html5jスタッフ

 Google Developer Expert (HTML5)
...
Webのリアルタイム化

https://twitter.com/

https://www.facebook.com/
World Wide Maze

http://chrome.com/maze/
WebRTC

https://apprtc.appspot.com/
人と人、人とモノがリアルタ
イムに繋がっていく

World Wide Web
今日のお話
 “モノ”をメインにリアルタイム処理の話
 以下の”モノ”について
 ビデオ
 Leap Motion
 Arduino
 リアルタイム性の高いつなげ方
 WebRTC
今日のお話
 “モノ”をメインにリアルタイム処理の話
 以下の”モノ”について
 ビデオ
 Leap Motion
 Arduino
 リアルタイム性の高いつなげ方
 WebRTC
マンガテレビ

https://app.html5experts.jp/manga/
マンガ化
1. getUserMedia()でビデオストリーム取得
2. CanvasPixelArray 取得
3. フィルター処理
マンガ化 (1/3)
getUserMedia()
navigator.webkitGetUserMedia({video: true, audio: false},
function(stream){
var url = window.web...
マンガ化(2/3)
CanvasPixelArray取得
var imgData = ctx.getImageData(0, 0, 640, 480);

1

2

3

4

imgData = [
255, 0, 0, 255,
0, 2...
マンガ化(3/3)
フィルター処理
 階調化とエッジ中抽出の組み合わせ

階調化
(三階調)

合成

エッジ抽出

参考)http://www.slideshare.net/masayukimaekawa/java-script-14727...
30万回のループ処理です。。。
for(var y = 1; y < height-1; y++){
for(var x = 1; x < width-1; x++){
c = y * width + x;
i = c << 2;
// 周辺ピ...
パフォーマンスチェック
高速化のハックは、ブラウザ
によって違う

http://jsperf.com/browse/kensaku-komatsu
GPUアクセラレーションの利
用

https://github.com/auduno/clmtrackr
技術の無駄遣い

http://clm2audio.komasshu.info/
今日のお話
 “モノ”をメインにリアルタイム処理の話
 以下の”モノ”について
 ビデオ
 Leap Motion
 Arduino
 リアルタイム性の高いつなげ方
 WebRTC
HTTP

• 片側一車線を一台しか走れない
• 荷物の梱包は余裕たっぷり
• 高速化のプラクティス
• 車線を増やす
• 一度にのせる荷物を増やす
• 必ずクライアントから開始
WebSocket

片側一車線を何台でも走れる
好きなタイミングで発車できる
APIレベルで見ると
 HTTP(Ajax)
$.get(http://example.com, function(data)送信しないと
{
console.log(data);
受信できない
});

 WebSocket
var ws...
Leap Motionの場合

専用
WebSocket
サーバー

WebSocket

パソコン
ブラウザ
leapjs

http://js.leapmotion.com/
examples

http://js.leapmotion.com/examples
今日のお話
 “モノ”をメインにリアルタイム処理の話
 以下の”モノ”について
 ビデオ
 Leap Motion
 Arduino
 リアルタイム性の高いつなげ方
 WebRTC
Web OSの概念図
Web apps

Web OS
apps

Chromeであれ
ば Packaged
Apps v2

Native
apps

Browser
Browser run-time
OS(windows, mac, lin...
特殊なAPIが使える
 Serial
 TCP/UDP Socket
 USB
 Telephony
…
Demo : Arduino を serial API
で操作
参考ブログ

http://blog.maripo.org/2013/05/chrome-packaged-apps/
Chrome.serial
今日のお話
 “モノ”をメインにリアルタイム処理の話
 以下の”モノ”について
 ビデオ
 Leap Motion
 Arduino
 リアルタイム性の高いつなげ方
 WebRTC
WebRTCの特徴
WebRTC

WebSocket

Server

Server

Browser

Browser

Browser

Browser
もうちょっと詳しく
サーバーサイド
コーディング

セッション情
報の交換

Broker
Server

Stun
server
NATのhole
punching
NAT

WebRTC
Web
app

NAT

WebRTC
Web
a...
もうちょっと詳しく
セッション情
報の交換

Broker
Server
Stun
server

とにかくめんどくさい

NATのhole
punching

NAT

WebRTC
Web
app

NAT

WebRTC
Web
app
...
最近のAPIの傾向
 素のAPIはかなり難しい。
 通常はラッパーを使うことを想定
一般の開発者

wrapper

W3C spec JS API

専門家
wrapper
 Peer.js

http://peerjs.com/
参考URL

http://blog.livedoor.jp/kotesaki/archives/1856455.htm
l
SkyWay (preview release!)

Peerjs互換

http://nttcom.github.io/skyway/
WebRTCを簡単に使えるBaaS
サーバーサイド Broker
コーディング Server

セッション情
報の交換

Stun
server

NAT

WebRTC
Web
app

NATのhole
punching

NAT

Web...
日本にもっとWebRTCを!
是非、ご利用ください。
http://nttcom.github.io/skyway/
(pull requestもお待ちしてます!!)
Demo : Arduino w/ serial apiと
WebrRTC(peerjs)を連携してみた。

+
広がる世界
 様々なモノ(センサー・デバイス)がWebで操作可
能となる
 マルチデバイスへの対応の容易性
 モノと人、モノとモノの連携がより現実的に
 新たなユースケースの登場
Thank You!!
@komasshu
Upcoming SlideShare
Loading in …5
×

Webによるデバイスを用いた

1,168 views

Published on

HTML5 Conference 2013 in Gifuでの講演資料。デバイス連携やWebRTCなど

Published in: Technology
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,168
On SlideShare
0
From Embeds
0
Number of Embeds
76
Actions
Shares
0
Downloads
6
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide

Webによるデバイスを用いた

  1. 1. Webによるデバイスを用いた リアルタイムサービスの可能性 2013.12.7(sat) HTML5 Conference 2013 in Gifu こまつけんさく
  2. 2. 自己紹介  名前:小松健作  所属:NTT communications  HTML5の研究開発  HTML5の啓蒙・コミュニティ運営  html5jスタッフ  Google Developer Expert (HTML5)  Microsoft Most Valuable Professional(IE)
  3. 3. Webのリアルタイム化 https://twitter.com/ https://www.facebook.com/
  4. 4. World Wide Maze http://chrome.com/maze/
  5. 5. WebRTC https://apprtc.appspot.com/
  6. 6. 人と人、人とモノがリアルタ イムに繋がっていく World Wide Web
  7. 7. 今日のお話  “モノ”をメインにリアルタイム処理の話  以下の”モノ”について  ビデオ  Leap Motion  Arduino  リアルタイム性の高いつなげ方  WebRTC
  8. 8. 今日のお話  “モノ”をメインにリアルタイム処理の話  以下の”モノ”について  ビデオ  Leap Motion  Arduino  リアルタイム性の高いつなげ方  WebRTC
  9. 9. マンガテレビ https://app.html5experts.jp/manga/
  10. 10. マンガ化 1. getUserMedia()でビデオストリーム取得 2. CanvasPixelArray 取得 3. フィルター処理
  11. 11. マンガ化 (1/3) getUserMedia() navigator.webkitGetUserMedia({video: true, audio: false}, function(stream){ var url = window.webkitURL.createObjectURL(stream); $v_[0].src = url; $v_[0].play(); });
  12. 12. マンガ化(2/3) CanvasPixelArray取得 var imgData = ctx.getImageData(0, 0, 640, 480); 1 2 3 4 imgData = [ 255, 0, 0, 255, 0, 255, 0, 255, 0, 0, 255, 255, 255, 255, 0, 255 ]; // 1 (R, G, B, α) // 2 (R, G, B, α) // 3 (R, G, B, α) // 4 (R, G, B, α)
  13. 13. マンガ化(3/3) フィルター処理  階調化とエッジ中抽出の組み合わせ 階調化 (三階調) 合成 エッジ抽出 参考)http://www.slideshare.net/masayukimaekawa/java-script-14727253
  14. 14. 30万回のループ処理です。。。 for(var y = 1; y < height-1; y++){ for(var x = 1; x < width-1; x++){ c = y * width + x; i = c << 2; // 周辺ピクセル tmp = (c - width) << 2; a0 = (dotList[tmp] + dotList[tmp+1] + dotList[tmp + 2]) & FILTER; tmp = (c - 1) << 2; a1 = (dotList[tmp] + dotList[tmp+1] + dotList[tmp + 2]) & FILTER; tmp = (c + 1) << 2; a2 = (dotList[tmp] + dotList[tmp+1] + dotList[tmp + 2]) & FILTER; tmp = (c + width) << 2; a3 = (dotList[tmp] + dotList[tmp+1] + dotList[tmp + 2]) & FILTER; Code // グレー値 gray = (dotList[i] + dotList[i+1] + dotList[i + 2] ); } } if((a0 + a1 + a2+ a3) < ((gray & FILTER) << 2)) { // エッジ化 img_toon.data[i] = 0; img_toon.data[i+1] = 0; img_toon.data[i+2] = 0; } else { // 階調化 if( gray < DARK ) { gra = 0; } else if( gray > BLIGHT ) { gra = 255; } else { gra = 1; } // スクリーントーン if( gra == 1 ) { dx_ = (x & 0x03); dy_ = (y & 0x03) if( (!dx_ && !dy_) || (dx_ == 2) && (dy_ == 2)){ gra = 0; } else { gra = 255; } }; img_toon.data[i] = gra; img_toon.data[i+1] = gra; img_toon.data[i+2] = gra; } img_toon.data[i+3] = 0xff; //img.data[i + 3]; 目標値は10msec 以下
  15. 15. パフォーマンスチェック
  16. 16. 高速化のハックは、ブラウザ によって違う http://jsperf.com/browse/kensaku-komatsu
  17. 17. GPUアクセラレーションの利 用 https://github.com/auduno/clmtrackr
  18. 18. 技術の無駄遣い http://clm2audio.komasshu.info/
  19. 19. 今日のお話  “モノ”をメインにリアルタイム処理の話  以下の”モノ”について  ビデオ  Leap Motion  Arduino  リアルタイム性の高いつなげ方  WebRTC
  20. 20. HTTP • 片側一車線を一台しか走れない • 荷物の梱包は余裕たっぷり • 高速化のプラクティス • 車線を増やす • 一度にのせる荷物を増やす • 必ずクライアントから開始
  21. 21. WebSocket 片側一車線を何台でも走れる 好きなタイミングで発車できる
  22. 22. APIレベルで見ると  HTTP(Ajax) $.get(http://example.com, function(data)送信しないと { console.log(data); 受信できない });  WebSocket var ws = new WebSocket(“ws://example.com”); ws.send(“hoge”); ws.onmessage = function(ev){ console.log(ev.data); 送信と受信は無関係 }
  23. 23. Leap Motionの場合 専用 WebSocket サーバー WebSocket パソコン ブラウザ
  24. 24. leapjs http://js.leapmotion.com/
  25. 25. examples http://js.leapmotion.com/examples
  26. 26. 今日のお話  “モノ”をメインにリアルタイム処理の話  以下の”モノ”について  ビデオ  Leap Motion  Arduino  リアルタイム性の高いつなげ方  WebRTC
  27. 27. Web OSの概念図 Web apps Web OS apps Chromeであれ ば Packaged Apps v2 Native apps Browser Browser run-time OS(windows, mac, linux, …)
  28. 28. 特殊なAPIが使える  Serial  TCP/UDP Socket  USB  Telephony …
  29. 29. Demo : Arduino を serial API で操作
  30. 30. 参考ブログ http://blog.maripo.org/2013/05/chrome-packaged-apps/
  31. 31. Chrome.serial
  32. 32. 今日のお話  “モノ”をメインにリアルタイム処理の話  以下の”モノ”について  ビデオ  Leap Motion  Arduino  リアルタイム性の高いつなげ方  WebRTC
  33. 33. WebRTCの特徴 WebRTC WebSocket Server Server Browser Browser Browser Browser
  34. 34. もうちょっと詳しく サーバーサイド コーディング セッション情 報の交換 Broker Server Stun server NATのhole punching NAT WebRTC Web app NAT WebRTC Web app データの交換 http://blog.livedoor.jp/kotesaki/archives/1794148.html
  35. 35. もうちょっと詳しく セッション情 報の交換 Broker Server Stun server とにかくめんどくさい NATのhole punching NAT WebRTC Web app NAT WebRTC Web app データの交換
  36. 36. 最近のAPIの傾向  素のAPIはかなり難しい。  通常はラッパーを使うことを想定 一般の開発者 wrapper W3C spec JS API 専門家
  37. 37. wrapper  Peer.js http://peerjs.com/
  38. 38. 参考URL http://blog.livedoor.jp/kotesaki/archives/1856455.htm l
  39. 39. SkyWay (preview release!) Peerjs互換 http://nttcom.github.io/skyway/
  40. 40. WebRTCを簡単に使えるBaaS サーバーサイド Broker コーディング Server セッション情 報の交換 Stun server NAT WebRTC Web app NATのhole punching NAT WebRTC Web app この部分は、 SkyWayが提供 (気にしなくて いい) ブラウザ部分の 開発に集中 データの交換
  41. 41. 日本にもっとWebRTCを! 是非、ご利用ください。 http://nttcom.github.io/skyway/ (pull requestもお待ちしてます!!)
  42. 42. Demo : Arduino w/ serial apiと WebrRTC(peerjs)を連携してみた。 +
  43. 43. 広がる世界  様々なモノ(センサー・デバイス)がWebで操作可 能となる  マルチデバイスへの対応の容易性  モノと人、モノとモノの連携がより現実的に  新たなユースケースの登場
  44. 44. Thank You!! @komasshu

×