{"id":942,"date":"2017-04-07T14:15:01","date_gmt":"2017-04-07T14:15:01","guid":{"rendered":"http:\/\/blog.silverterra.net\/?p=942"},"modified":"2024-12-08T21:20:48","modified_gmt":"2024-12-08T21:20:48","slug":"use-the-camera","status":"publish","type":"post","link":"https:\/\/blog.silverterra.net\/?p=942","title":{"rendered":"use the camera"},"content":{"rendered":"

Goal: simple way to use the camera<\/p><\/blockquote>\n

I’ve read some articles about this, but there was no a simple one. So, here is:<\/p>\n

\r\n<html>\r\n<body>\r\n\t<video autoplay="true" id="videoElement"><\/video>\r\n\t<button id="snap">Take a Photo<\/button>\r\n\t<canvas id="canvas" width="640" height="480"><\/canvas>\r\n<script>\r\n  var video = document.querySelector("#videoElement");\r\n\r\n  var canvas = document.getElementById('canvas');\r\n  var context = canvas.getContext('2d');\r\n\r\n  navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;\r\n\r\n  if (navigator.getUserMedia) {\r\n    navigator.getUserMedia({ video: true }, handleVideo, videoError);\r\n  }\r\n\r\n  function handleVideo(stream) {\r\n    if ('srcObject' in video) {\r\n      video.srcObject = stream;\r\n    } else {\r\n      video.src = window.URL.createObjectURL(stream);\r\n    }\r\n  }\r\n\r\n  function videoError() { }\r\n\r\n  \/\/ Trigger photo take\r\n  document.getElementById('snap').addEventListener('click', function () {\r\n    setTimeout(function () {\r\n      context.drawImage(video, 0, 0, 640, 480);\r\n    }, 3000);\r\n\r\n  });\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
check it: here<\/a><\/p>\n
Two thing to know.
\n1. the browser will say insecure connection. Just ignore it.
\n2. Take a Photo<\/b> will take a photo after 3 sec<\/p>\n","protected":false},"excerpt":{"rendered":"
Goal: simple way to use the camera I’ve read some articles about this, but there was no a simple one. So, here is: check it: here Two thing to know. 1. the browser will say insecure connection. Just ignore it. 2. Take a Photo will take a photo after 3 sec<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,5],"tags":[],"class_list":["post-942","post","type-post","status-publish","format-standard","hentry","category-html5","category-web-trick"],"_links":{"self":[{"href":"https:\/\/blog.silverterra.net\/index.php?rest_route=\/wp\/v2\/posts\/942","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.silverterra.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.silverterra.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.silverterra.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.silverterra.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=942"}],"version-history":[{"count":7,"href":"https:\/\/blog.silverterra.net\/index.php?rest_route=\/wp\/v2\/posts\/942\/revisions"}],"predecessor-version":[{"id":1191,"href":"https:\/\/blog.silverterra.net\/index.php?rest_route=\/wp\/v2\/posts\/942\/revisions\/1191"}],"wp:attachment":[{"href":"https:\/\/blog.silverterra.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=942"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.silverterra.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=942"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.silverterra.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=942"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}