{"id":709,"date":"2012-08-20T21:27:05","date_gmt":"2012-08-21T03:27:05","guid":{"rendered":"http:\/\/cbateman.com\/blog\/?p=709"},"modified":"2015-04-29T08:19:22","modified_gmt":"2015-04-29T13:19:22","slug":"webcam-access-is-easy-in-javascript","status":"publish","type":"post","link":"https:\/\/cbateman.com\/blog\/webcam-access-is-easy-in-javascript\/","title":{"rendered":"Webcam Access is Easy in JavaScript"},"content":{"rendered":"<p>In honor of Chrome 21, I just wanted to take a brief moment to demonstrate how incredibly easy it is to access the webcam with the new MediaStream API.<\/p>\r\n\r\n<pre class=\"pre\"><code class=\"language-javascript\">var stream;\r\nvar video = document.getElementById('MediaStreamVideo');\r\n\r\nnavigator.webkitGetUserMedia(\r\n\t{video: true, audio: true}, \/\/ Options\r\n\tfunction(localMediaStream) { \/\/ Success\r\n\t\tstream = localMediaStream;\r\n\t\tvideo.src = window.webkitURL.createObjectURL(stream);\r\n\t},\r\n\tfunction(err) { \/\/ Failure\r\n\t\talert('getUserMedia failed: Code ' + err.code);\r\n\t}\r\n);\r\n\r\n\/\/ stream.stop();\r\n<\/code><\/pre>\r\n\r\n<p>Yeah, that&#8217;s it. Obviously I&#8217;m skipping cross-browserness, but you get the idea. Check it out:<\/p>\r\n\r\n<video id=\"MediaStreamVideo\" width=\"400\" height=\"300\" style=\"max-width:100%;background:#111;border:1px solid #666;-webkit-filter:sepia(1) saturate(1.5);\" autoplay><\/video>\r\n<button id=\"MediaStreamStartButton\">Start<\/button> <button id=\"MediaStreamStopButton\">Stop<\/button>\r\n\r\n<script>\r\n(function() {\r\n\tnavigator.getUserMedia = (navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia);\r\n\tvar stream;\r\n\tvar video = document.getElementById('MediaStreamVideo');\r\n\tdocument.getElementById('MediaStreamStartButton').onclick = function() {\r\n\t\tif (!navigator.getUserMedia) {\r\n\t\t\talert('Sorry, this isn\\'t happening for your browser.');\r\n\t\t\treturn;\r\n\t\t}\r\n\t\tnavigator.getUserMedia(\r\n\t\t\t{video: true, audio: true}, \r\n\t\t\tfunction(localMediaStream) {\r\n\t\t\t\tstream = localMediaStream;\r\n\t\t\t\tif (video.mozSrcObject !== undefined) {\r\n\t\t\t\t\tvideo.mozSrcObject = stream;\r\n\t\t\t\t} else {\r\n\t\t\t\t\tvideo.src = (window.URL || window.webkitURL).createObjectURL(stream);\r\n\t\t\t\t}\r\n\t\t\t\tvideo.play();\r\n\t\t\t},\r\n\t\t\tfunction(e) {\r\n\t\t\t\talert('getUserMedia failed: Code ' + e.code);\r\n\t\t\t}\r\n\t\t);\r\n\t}\r\n\tdocument.getElementById('MediaStreamStopButton').onclick = function() {\r\n\t\tif (stream) { stream.stop(); }\r\n\t}\r\n})();\r\n<\/script>\r\n\r\n<p>We even have some sepia going on, thanks to <a href=\"https:\/\/dvcs.w3.org\/hg\/FXTF\/raw-file\/tip\/filters\/index.html\">CSS filter effects<\/a>. And it&#8217;s also really easy to copy the stream over to a canvas element, using drawImage(), if you want to do more crazy stuff. And if you want to see this done by someone who put some serious time into it, check out the amazing <a href=\"http:\/\/neave.com\/webcam\/html5\/\">Webcam Toy<\/a>.<\/p>\r\n<p>This only works in Chrome for now, but hopefully it&#8217;ll be up in Firefox later this year.<\/p>","protected":false},"excerpt":{"rendered":"<p>In honor of Chrome 21, I just wanted to take a brief moment to demonstrate how incredibly easy it is to access the webcam with the new MediaStream API. var stream; var video = document.getElementById(&#8216;MediaStreamVideo&#8217;); navigator.webkitGetUserMedia( {video: true, audio: true}, \/\/ Options function(localMediaStream) { \/\/ Success stream = localMediaStream; video.src = window.webkitURL.createObjectURL(stream); }, function(err) { \/\/ Failure alert(&#8216;getUserMedia failed: Code&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-709","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/cbateman.com\/blog\/wp-json\/wp\/v2\/posts\/709"}],"collection":[{"href":"https:\/\/cbateman.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cbateman.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cbateman.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cbateman.com\/blog\/wp-json\/wp\/v2\/comments?post=709"}],"version-history":[{"count":35,"href":"https:\/\/cbateman.com\/blog\/wp-json\/wp\/v2\/posts\/709\/revisions"}],"predecessor-version":[{"id":1571,"href":"https:\/\/cbateman.com\/blog\/wp-json\/wp\/v2\/posts\/709\/revisions\/1571"}],"wp:attachment":[{"href":"https:\/\/cbateman.com\/blog\/wp-json\/wp\/v2\/media?parent=709"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cbateman.com\/blog\/wp-json\/wp\/v2\/categories?post=709"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cbateman.com\/blog\/wp-json\/wp\/v2\/tags?post=709"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}