HTML5ã§ã§ãるカメラアプリ・予習（1） | 秋葉秀樹個人ブãƒã‚°
videoè¦ç´ ã‚„canvasè¦ç´ を使ã£ã¦æ’®ã£ãŸå†™çœŸã‚’åŠ å·¥ã—ã¦ã‚µãƒ¼ãƒã«æ®‹ã™ã€ãªã‚“ã¦ã“ã¨ã¯ç‰¹ã«ã‚¹ãƒžãƒ›æ¡ˆä»¶ã§ä¾é ¼ãŒæ¥ã‚‹ã‹ã‚‚ã—ã‚Œã¾ã›ã‚“ã€ãã†ãªã£ã¦ç„¦ã‚‰ãªã„よã†ã«ä»Šã‹ã‚‰å‹‰å¼·ã—ã¦ãŠããŸã„ã§ã™ã。 ã›ã£ã‹ãイベントã§ç™ºè¡¨ã•ã›ã¦ã‚‚らã†ã®ã§ã€ã“ã‚Œã‹ã‚‰ã‚·ãƒªãƒ¼ã‚ºã§ãƒ–ãƒã‚°ã«æ›¸ã„ã¦ã„ã“ã†ã¨æ€ã„ã¾ã™ã€ã„ã¾ã‹ã‚‰å‹‰å¼·ã™ã‚‹ã®ã¯æ±ºã—ã¦æ—©ã™ãŽã‚‹ã“ã¨ã¯ãªã„ã§ã—ょã†ã€‚
JavaScript+WEBカメラã§ãƒ†ãƒ«ãƒŸãƒ³ - 音ã®é³´ã‚‹ãƒ–ãƒã‚°
http://mohayonao.herokuapp.com/theremin WebRTCを使ãˆã°JavaScriptã‹ã‚‰Webカメラã¨ã‹ä½¿ãˆã‚‹ã‚‰ã—ã„ã®ã§ã€è‡ªç„¶ã®æˆã‚Šè¡Œãã¨ã—ã¦ãƒ†ãƒ«ãƒŸãƒ³ã‚’作ã£ã¦ã¿ãŸã€‚Google Chrome Canary buildã§ä½¿ãˆã‚‹ã€‚ Google Chrome Canary buildã˜ã‚ƒãªã„人(普通ã®Chrome, FireFoxを使ã£ã¦ã„る人)ã«ã¯Flash経由ã§å‹•ãã‚„ã¤ã‚’用æ„ã—ãŸã€‚ã“れ㯠jQueryã®ãƒ—ラグイン を使ã£ã¦ã„る。ãŸã ã—æ¿€é‡ã€‚ カメラを起動ã—ã¦å³æ‰‹ã§éŸ³ç¨‹ã€å·¦æ‰‹ã§éŸ³é‡ã‚’æ“作ã§ãる。手ã®ä½ç½®ã®æ¤œå‡ºã¯WebWorkerを使ã£ã¦è¡Œã£ã¦ã„る。RGBã‚’HSVã«å¤‰æ›ã—ã¦ã‹ã‚‰å„ピクセルã”ã¨ã«è‚Œè‰²åˆ¤å®šã—ã¦è‚Œè‰²ã®é›†ã¾ã£ã¦ã„ã‚‹ã‚ãŸã‚ŠãŒæ‰‹ã ã‚ã†ã¨ã„ã†è¶…手抜ã処ç†ã€‚ 楽器ã¨ã—ã¦ã¯è‡´å‘½çš„ã«åå¿œãŒéˆã„。悲ã—ã„。 Flashã®ã‚«ãƒ¡ãƒ©ã¯äº‹å‰ã«ã‚«ãƒ¡ãƒ©ã‚’使ã£ã¦è‰¯ã„ã‹è¨±å¯ãŒå¿…è¦ã
「crocro.jscamã€ãƒ©ã‚¤ãƒ–ラリã®ä½¿ã„方　――JavaScriptã§Webカメラã®ç”»åƒã‚„ãƒžãƒ¼ã‚«ãƒ¼æƒ…å ±ã‚’å–å¾—ã™ã‚‹ãƒ©ã‚¤ãƒ–ラリ
ã¯ã˜ã‚ã« ã„ã¤ã‚‚ã¯ã€Œå‰µæ´»ãƒŽãƒ¼ãƒˆã€ã§ãƒžãƒ³ã‚¬ã‚’æã„ã¦ã„る柳井ã§ã™ã€‚ãã®è£ã§ã¯ã‚´ãƒªã‚´ãƒªã¨ã‚³ãƒ¼ãƒ‰ã‚’書ã„ã¦ã„ã¾ã™ã€‚ 今回公開ã—ãŸãƒ©ã‚¤ãƒ–ラリ「crocro.jscamã€ã¯ã€Webカメラã®æƒ…å ±ã‚’å–å¾—ã—ãŸã‚Šã€ãƒžãƒ¼ã‚«ãƒ¼æƒ…å ±ã‚’å–å¾—ã—ãŸã‚Šã™ã‚‹ãŸã‚ã®ãƒ©ã‚¤ãƒ–ラリã§ã™ã€‚ ç°¡å˜ãªè¨å®šã§ã€Œ2値化ã€ã€Œãƒ©ãƒ™ãƒªãƒ³ã‚°ã€ã€Œãƒžãƒ¼ã‚«ãƒ¼ã®å–å¾—ã€ã‚’è¡Œãˆã¾ã™ã€‚ã¾ãŸã€ã‚³ãƒ¼ãƒ«ãƒãƒƒã‚¯è¨å®šã§ã€ŒWebカメラã®ç”»ç´ データã€ã‚„ã€Œãƒ©ãƒ™ãƒ«æƒ…å ±ã€ã€Œãƒžãƒ¼ã‚«ãƒ¼æƒ…å ±ã€ãªã©ã€å¤šå½©ãªæƒ…å ±ã‚’å–å¾—ã§ãã¾ã™ã€‚ 最新ã®ãƒ©ã‚¤ãƒ–ラリやサンプルコードã€ãƒªãƒ•ã‚¡ãƒ¬ãƒ³ã‚¹ã¯ã€ä¸‹è¨˜ã®ã‚µã‚¤ãƒˆã§å…¬é–‹ã•ã‚Œã¦ã„ã¾ã™ã€‚ソースコード付ãã®ã‚µãƒ³ãƒ—ルを見れã°ã€ã©ã†ã„ã£ãŸã“ã¨ãŒè¡Œãˆã‚‹ã®ã‹ã€ã‚¤ãƒ¡ãƒ¼ã‚¸ãŒã¤ã‹ã‚ã‚‹ã¨æ€ã„ã¾ã™ã€‚ 「crocro.jscamã€JavaScriptã§Webカメラã®ç”»åƒã‚’å–å¾—ã™ã‚‹ãƒ©ã‚¤ãƒ–ラリ ã¨ã„ã†ã‚ã‘ã§ã€ã©ã†ã„ã£ãŸã“ã¨ãŒã§ãã‚‹ã®ã‹ã‚¤ãƒ¡ãƒ¼ã‚¸ã‚’ã¤ã‹ã‚“ã§ã‚‚らã†ãŸã‚ã«ã€ã‚ャプãƒãƒ£ã—ãŸç”»åƒã‚’掲載ã—ã¾ã™ã€‚
crocro.jscam
「crocro.jscamã€JavaScriptã§Webカメラã®ç”»åƒã‚’å–å¾—ã™ã‚‹ãƒ©ã‚¤ãƒ–ラリ ã¯ã˜ã‚㫠「crocro.jscamã€ã¯ã€JavaScriptã§ã€Webカメラã®ç”»åƒã‚’å–å¾—ã™ã‚‹ãŸã‚ã®ãƒ©ã‚¤ãƒ–ラリã§ã™ã€‚ 動作対象ã¯HTML5以上ã€PCã¨ãªã‚Šã¾ã™ã€‚デãƒãƒƒã‚°ã‚’è¡Œã£ãŸã®ã¯ã€Chrome16ã€IE9ã€Firefox9ã«ãªã‚Šã¾ã™ã€‚ 本ライブラリã¯ã€ä»¥ä¸‹ã®ã‚ˆã†ãªã“ã¨ã‚’è¡Œãªãˆã¾ã™ã€‚ Webカメラã®ç”»åƒã®ã‚ャプãƒãƒ£ã€‚ ã‚ャプãƒãƒ£ã—ãŸç”»åƒã®2値化（白黒化）。 2値化を元ã«ã—ãŸãƒ©ãƒ™ãƒªãƒ³ã‚°ï¼ˆé ˜åŸŸåˆ†å‰²ï¼‰ã€‚ ドットパターンã®æ¤œå‡ºã€ã‚ã‚‹ã„ã¯ãƒžãƒ¼ã‚«ãƒ¼ã®æ¤œå‡ºï¼ˆ4éš…ã®ä½ç½®ã¨å‘ã）。 ã‚ャプãƒãƒ£ã‚’指定ã—ãŸå ´åˆã®å³æ™‚コールãƒãƒƒã‚¯å‡¦ç†ï¼ˆå„種解æžãƒ‡ãƒ¼ã‚¿ã®å–得）。 検出時ã®ã‚³ãƒ¼ãƒ«ãƒãƒƒã‚¯å‡¦ç†ï¼ˆå„種解æžãƒ‡ãƒ¼ã‚¿ã®å–得）。 Webカメラã§å–å¾—ã—ãŸç”»åƒã‚’HTML5ã§åˆ©ç”¨ã—ãŸã„ã¨ã„ã£ãŸç”¨é€”ã‚„ã€ãƒžãƒ¼ã‚«ãƒ¼ã‚’コントãƒãƒ¼ãƒ©ãƒ¼ä»£ã‚ã‚Šã«ä½¿ã£ãŸç°¡å˜ãªã‚²ãƒ¼
1
リリースã€éšœå®³æƒ…å ±ãªã©ã®ã‚µãƒ¼ãƒ“スã®ãŠçŸ¥ã‚‰ã›
最新ã®äººæ°—エントリーã®é…ä¿¡
j次ã®ãƒ–ックマーク
kå‰ã®ãƒ–ックマーク
lã‚ã¨ã§èªã‚€
eコメント一覧を開ã
oページを開ã
{{#tags}}- {{label}}
{{/tags}}