Webによるデバイスを用いた
•Als PPTX, PDF herunterladen•
7 gefällt mir•1,483 views
HTML5 Conference 2013 in Gifuでの講演資料。デバイス連携やWebRTCなど
Empfohlen
Weitere ähnliche Inhalte
Ähnlich wie Webによるデバイスを用いた
Ähnlich wie Webによるデバイスを用いた (20)
Mehr von Kensaku Komatsu
Mehr von Kensaku Komatsu (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (10)
Webによるデバイスを用いた
- 1. Webによるデバイスを用いた リアルタイムサービスの可能性 2013.12.7(sat) HTML5 Conference 2013 in Gifu こまつけんさく
- 2. 自己紹介 名前：小松健作 所属：NTT communications HTML5の研究開発 HTML5の啓蒙・コミュニティ運営 html5jスタッフ Google Developer Expert (HTML5) Microsoft Most Valuable Professional(IE)
- 7. 今日のお話 “モノ”をメインにリアルタイム処理の話 以下の”モノ”について ビデオ Leap Motion Arduino リアルタイム性の高いつなげ方 WebRTC
- 8. 今日のお話 “モノ”をメインにリアルタイム処理の話 以下の”モノ”について ビデオ Leap Motion Arduino リアルタイム性の高いつなげ方 WebRTC
- 10. マンガ化 1. getUserMedia()でビデオストリーム取得 2. CanvasPixelArray 取得 3. フィルター処理
- 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. マンガ化(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, α)
- 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. パフォーマンスチェック
- 19. 今日のお話 “モノ”をメインにリアルタイム処理の話 以下の”モノ”について ビデオ Leap Motion Arduino リアルタイム性の高いつなげ方 WebRTC
- 20. HTTP • 片側一車線を一台しか走れない • 荷物の梱包は余裕たっぷり • 高速化のプラクティス • 車線を増やす • 一度にのせる荷物を増やす • 必ずクライアントから開始
- 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); 送信と受信は無関係 }
- 26. 今日のお話 “モノ”をメインにリアルタイム処理の話 以下の”モノ”について ビデオ Leap Motion Arduino リアルタイム性の高いつなげ方 WebRTC
- 27. Web OSの概念図 Web apps Web OS apps Chromeであれ ば Packaged Apps v2 Native apps Browser Browser run-time OS(windows, mac, linux, …)
- 28. 特殊なAPIが使える Serial TCP/UDP Socket USB Telephony …
- 29. Demo : Arduino を serial API で操作
- 31. Chrome.serial
- 32. 今日のお話 “モノ”をメインにリアルタイム処理の話 以下の”モノ”について ビデオ Leap Motion Arduino リアルタイム性の高いつなげ方 WebRTC
- 36. 最近のAPIの傾向 素のAPIはかなり難しい。 通常はラッパーを使うことを想定 一般の開発者 wrapper W3C spec JS API 専門家
- 42. Demo : Arduino w/ serial apiと WebrRTC(peerjs)を連携してみた。 ＋
- 43. 広がる世界 様々なモノ（センサー・デバイス）がWebで操作可 能となる マルチデバイスへの対応の容易性 モノと人、モノとモノの連携がより現実的に 新たなユースケースの登場