{"id":2771,"date":"2016-01-01T00:43:03","date_gmt":"2015-12-31T23:43:03","guid":{"rendered":"http:\/\/www.lyceelecorbusier.eu\/p5js\/?p=2771"},"modified":"2016-04-16T15:44:37","modified_gmt":"2016-04-16T14:44:37","slug":"p5-js-18-webcam-dans-p5-js","status":"publish","type":"post","link":"https:\/\/www.lyceelecorbusier.eu\/p5js\/?p=2771","title":{"rendered":"\/ p5.js \/ 18 \/ webcam"},"content":{"rendered":"<p><!--more--><\/p>\n<h3>Afficher la vid\u00e9o dans le canvas<\/h3>\n<p>Il suffit d&#8217;utiliser la fonction <em>createCapture(VIDEO); <\/em>pour afficher l&#8217;image de la webcam dans le navigateur (il faut \u00e9videmment autoriser le partage). Pour afficher l&#8217;image de la webcam dans le <em>canvas<\/em> il est n\u00e9cessaire de rajouter les \u00e9l\u00e9ments suivants :<\/p>\n<pre><strong>var video;<\/strong>\r\n\r\nfunction setup() {\r\n\u00a0 createCanvas(780,500);\r\n\u00a0 background(200);\r\n<strong>\u00a0 video = createCapture(VIDEO);<\/strong>\r\n<strong>\u00a0 video.size(640,480);\r\n  video.hide();<\/strong>\r\n}\r\n\r\nfunction draw() {\r\n\u00a0<strong> image(video,70,10);<\/strong>\r\n}<\/pre>\n<p>La ligne<em> video.hide();<\/em> permet de cacher la vid\u00e9o qui se trouve en dehors du <em>canvas<\/em>.<br \/>\nIl est possible d&#8217;appliquer \u00e0 la vid\u00e9o affich\u00e9e par la fonction image tout ce fonctionne avec des images : tint(), rotate()&#8230;<\/p>\n<h3>R\u00e9cup\u00e9rer des images de la vid\u00e9o<\/h3>\n<p>Il suffit de cr\u00e9er un bouton (<a href=\"http:\/\/www.lyceelecorbusier.eu\/p5js\/?p=2697\" target=\"_blank\">voir supra<\/a>) et une fonction avec la ligne <em>save(&#8216;image&#8217;+&#8217;.png&#8217;);<\/em><\/p>\n<pre>var video;\r\nvar bouton;\r\n\r\nfunction setup() {\r\n\u00a0 createCanvas(780,500);\r\n\u00a0 background(200);\r\n\u00a0 video = createCapture(VIDEO);\r\n\u00a0 video.size(640,480);\r\n\u00a0 video.hide();\r\n\u00a0 \r\n<strong>\u00a0 bouton = createButton('capture');<\/strong>\r\n<strong>\u00a0 bouton.mousePressed(capturerImage);<\/strong>\r\n}\r\n\r\nfunction capturerImage(){\r\n<strong>\u00a0 save('image'+'.png');<\/strong>\r\n}\r\n\r\nfunction draw() {\r\n\u00a0 image(video,70,10);\r\n}<\/pre>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[2],"tags":[],"_links":{"self":[{"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=\/wp\/v2\/posts\/2771"}],"collection":[{"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2771"}],"version-history":[{"count":9,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=\/wp\/v2\/posts\/2771\/revisions"}],"predecessor-version":[{"id":2781,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=\/wp\/v2\/posts\/2771\/revisions\/2781"}],"wp:attachment":[{"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2771"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2771"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2771"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}