{"id":234,"date":"2011-04-08T17:36:26","date_gmt":"2011-04-08T16:36:26","guid":{"rendered":"http:\/\/www.aymericlamboley.fr\/blog\/?p=234"},"modified":"2011-04-08T17:46:35","modified_gmt":"2011-04-08T16:46:35","slug":"webcam-picture-cutout","status":"publish","type":"post","link":"http:\/\/www.aymericlamboley.fr\/blog\/webcam-picture-cutout\/","title":{"rendered":"Webcam picture cutout"},"content":{"rendered":"<p>In many websites, for a most immersive surf you take a shot of your face. Often, it is simply a red square. You move your head in, and you take the picture; it is really easy to do. However if you want to take only the head with a circle for exemple it&#8217;s a bit more difficult.<\/p>\n<p>This is a script to do that (on the website, the swf is opened with a lightbox and the picture is saved) :<\/p>\n<pre lang=\"actionscript3\" line=\"1\">package {\r\n\r\n\timport com.adobe.images.PNGEncoder;\r\n\r\n\timport flash.display.Bitmap;\r\n\timport flash.display.BitmapData;\r\n\timport flash.display.Sprite;\r\n\timport flash.events.Event;\r\n\timport flash.events.MouseEvent;\r\n\timport flash.external.ExternalInterface;\r\n\timport flash.geom.Point;\r\n\timport flash.geom.Rectangle;\r\n\timport flash.media.Camera;\r\n\timport flash.media.Video;\r\n\timport flash.net.URLLoader;\r\n\timport flash.net.URLRequest;\r\n\timport flash.net.URLRequestHeader;\r\n\timport flash.net.URLRequestMethod;\r\n\timport flash.utils.ByteArray;\r\n\r\n        \/**\r\n\t * @author Aymeric\r\n\t *\/\r\n\r\n\tpublic class CaptureTete extends Sprite {\r\n\r\n\t\tpublic var button:Sprite;\r\n\r\n\t\tprivate var _cam:Camera;\r\n\t\tprivate var _video:Video;\r\n\r\n\t\tprivate var _bitmapData:BitmapData;\r\n\t\tprivate var _bitmap:Bitmap;\r\n\r\n\t\tprivate var _conteneur:Sprite;\r\n\t\tprivate var _drawPanel:Sprite;\r\n\r\n\t\tpublic function CaptureTete() {\r\n\r\n\t\t\t_cam = Camera.getCamera();\r\n\t\t\t_video = new Video(320, 240);\r\n\r\n\t\t\t_bitmapData = new BitmapData(_video.width, _video.height);\r\n\t\t\t_bitmap = new Bitmap(_bitmapData);\r\n\r\n\t\t\t_video.attachCamera(_cam);\r\n\t\t\t_video.x = _bitmap.x = 20;\r\n\t\t\t_video.y = _bitmap.y = 40;\r\n\r\n\t\t\taddChild(_video);\r\n\r\n\t\t\t_conteneur = new Sprite();\r\n\t\t\taddChild(_conteneur);\r\n\r\n\t\t\t_drawPanel = new Sprite();\r\n\t\t\t_drawPanel.graphics.clear();\r\n\t\t\t_drawPanel.graphics.lineStyle(2, 0xeea41e);\r\n\t\t\t_drawPanel.graphics.beginFill(0xDEFACE, 0);\r\n\t\t\t_drawPanel.graphics.drawCircle(80, 80, 80);\r\n\t\t\t_drawPanel.graphics.endFill();\r\n\t\t\t_conteneur.addChild(_drawPanel);\r\n\t\t\t_drawPanel.x = 100;\r\n\t\t\t_drawPanel.y = 100;\r\n\r\n\t\t\tbutton.buttonMode = true;\r\n\t\t\tbutton.addEventListener(MouseEvent.CLICK, _captureImage);\r\n\t\t}\r\n\r\n\t\tprivate function _captureImage(e:MouseEvent):void {\r\n\r\n                        button.removeEventListener(MouseEvent.CLICK, _captureImage);\r\n\r\n\t\t\t_bitmapData.draw(_video);\r\n\t\t\t_conteneur.addChild(_bitmap);\r\n\r\n\t\t\t_conteneur.setChildIndex(_drawPanel, _conteneur.numChildren - 1);\r\n\r\n\t\t\t_cam = null;\r\n\t\t\tremoveChild(_video);\r\n\t\t\t_video = null;\r\n\r\n\t\t\t_bitmap.mask = _drawPanel;\r\n\r\n\t\t\t_bitmapData = new BitmapData(320, 240,true,0x000000);\r\n\t\t\t_bitmapData.draw(_conteneur);\r\n\r\n\t\t\tvar bitmap:Bitmap = new Bitmap(_bitmapData);\r\n\t\t\t_conteneur.addChild(bitmap);\r\n\r\n\t\t\tvar bmd:BitmapData = new BitmapData(160, 160);\r\n\t\t\tvar rect:Rectangle = new Rectangle(100, 100, 160, 160);\r\n\t\t\tbmd.copyPixels(_bitmapData, rect, new Point(0, 0));\r\n\r\n\t\t\tvar pngStream:ByteArray = PNGEncoder.encode(bmd);\r\n\r\n\t\t\tvar header:URLRequestHeader = new URLRequestHeader(\"Content-type\", \"application\/octet-stream\");\r\n\r\n\t\t\tvar savePNG:URLRequest = new URLRequest(\"save.php\");\r\n\t\t\tsavePNG.requestHeaders.push(header);\r\n\t\t\tsavePNG.method = URLRequestMethod.POST;\r\n\t\t\tsavePNG.data = pngStream;\r\n\r\n\t\t\tvar urlLoader:URLLoader = new URLLoader();\r\n\t\t\turlLoader.load(savePNG);\r\n\t\t\t\r\n\t\t\turlLoader.addEventListener(Event.COMPLETE, _loaded);\r\n\t\t}\r\n\r\n\t\tprivate function _loaded(evt:Event):void {\r\n\t\t\t\r\n\t\t\tevt.target.removeEventListener(Event.COMPLETE, _loaded);\r\n\t\t\tExternalInterface.call(\"closeLightbox\");\r\n\t\t}\r\n\t}\r\n\r\n}\r\n<\/pre>\n<p>You can found the external library made by Mike Chambers : <a href=\"https:\/\/github.com\/mikechambers\/as3corelib\">as3corelib<\/a>.<\/p>\n<p>The Php script to save it :<\/p>\n<pre lang=\"php\" line=\"1\"><?php\r\n\r\nif (isset($GLOBALS[\"HTTP_RAW_POST_DATA\"])) {\r\n\t\r\n\t$png = $GLOBALS[\"HTTP_RAW_POST_DATA\"];\r\n\t$img = $_GET[\"img\"];\r\n\t$filename = \"images\/img_\". mktime(). \".png\";\r\n\tfile_put_contents($filename, $png);\r\n} else {\r\n\techo \"Encoded PNG information not received.\";\r\n}\r\n\r\n?>\r\n<\/pre>\n<p>To go further, we can draw our own circle or an other shape. Using a Php Session for the filename is cool too !<br \/>\n<a href=\"http:\/\/www.aymericlamboley.fr\/blog\/wp-content\/uploads\/2011\/04\/captureTete.swf\" rel=\"lightbox[flash 360 360]\"><strong>Exemple<\/strong><\/a> (don&#8217;t worry, I do not save ! \ud83d\ude09 )<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In many websites, for a most immersive surf you take a shot of your face. Often, it is simply a red square. You move your head in, and you take the picture; it is really easy to do. However if you want to take only the head with a circle for exemple it&#8217;s a bit &hellip; <a href=\"http:\/\/www.aymericlamboley.fr\/blog\/webcam-picture-cutout\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">Webcam picture cutout<\/span> <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0},"categories":[4,33,44,45],"tags":[15,48,34,47,49,46],"_links":{"self":[{"href":"http:\/\/www.aymericlamboley.fr\/blog\/wp-json\/wp\/v2\/posts\/234"}],"collection":[{"href":"http:\/\/www.aymericlamboley.fr\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.aymericlamboley.fr\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.aymericlamboley.fr\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.aymericlamboley.fr\/blog\/wp-json\/wp\/v2\/comments?post=234"}],"version-history":[{"count":7,"href":"http:\/\/www.aymericlamboley.fr\/blog\/wp-json\/wp\/v2\/posts\/234\/revisions"}],"predecessor-version":[{"id":240,"href":"http:\/\/www.aymericlamboley.fr\/blog\/wp-json\/wp\/v2\/posts\/234\/revisions\/240"}],"wp:attachment":[{"href":"http:\/\/www.aymericlamboley.fr\/blog\/wp-json\/wp\/v2\/media?parent=234"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.aymericlamboley.fr\/blog\/wp-json\/wp\/v2\/categories?post=234"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.aymericlamboley.fr\/blog\/wp-json\/wp\/v2\/tags?post=234"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}