{"id":1546,"date":"2018-10-23T15:28:57","date_gmt":"2018-10-23T14:28:57","guid":{"rendered":"https:\/\/solidt.eu\/site\/?p=1546"},"modified":"2018-10-23T15:28:57","modified_gmt":"2018-10-23T14:28:57","slug":"qr-code-capture-with-webcam","status":"publish","type":"post","link":"https:\/\/solidt.eu\/site\/qr-code-capture-with-webcam\/","title":{"rendered":"QR code capture with webcam"},"content":{"rendered":"

Source:\u00a0https:\/\/cozmo.github.io\/jsQR\/<\/a><\/p>\n

<html>\r\n<head>\r\n  <meta charset=\"utf-8\">\r\n  <title>jsQR Demo<\/title>\r\n  <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/jsqr@1.1.1\/dist\/jsQR.min.js\"><\/script>  \r\n<\/head>\r\n<body>  \r\n  <div id=\"loadingMessage\">\ud83c\udfa5 Unable to access video stream (please make sure you have a webcam enabled)<\/div>\r\n  <canvas id=\"canvas\" hidden><\/canvas>\r\n  <div id=\"output\" hidden>\r\n    <div id=\"outputMessage\">No QR code detected.<\/div>\r\n    <div hidden><b>Data:<\/b> <span id=\"outputData\"><\/span><\/div>\r\n  <\/div>\r\n  <script>\r\n    var video = document.createElement(\"video\");\r\n    var canvasElement = document.getElementById(\"canvas\");\r\n    var canvas = canvasElement.getContext(\"2d\");\r\n    var loadingMessage = document.getElementById(\"loadingMessage\");\r\n    var outputContainer = document.getElementById(\"output\");\r\n    var outputMessage = document.getElementById(\"outputMessage\");\r\n    var outputData = document.getElementById(\"outputData\");\r\n\r\n    function drawLine(begin, end, color) {\r\n      canvas.beginPath();\r\n      canvas.moveTo(begin.x, begin.y);\r\n      canvas.lineTo(end.x, end.y);\r\n      canvas.lineWidth = 4;\r\n      canvas.strokeStyle = color;\r\n      canvas.stroke();\r\n    }\r\n\r\n    \/\/ Use facingMode: environment to attemt to get the front camera on phones\r\n    navigator.mediaDevices.getUserMedia({ video: { facingMode: \"environment\" } }).then(function(stream) {\r\n      video.srcObject = stream;\r\n      video.setAttribute(\"playsinline\", true); \/\/ required to tell iOS safari we don't want fullscreen\r\n      video.play();\r\n      requestAnimationFrame(tick);\r\n    });\r\n\r\n    function tick() {\r\n      loadingMessage.innerText = \"\u231b Loading video...\"\r\n      if (video.readyState === video.HAVE_ENOUGH_DATA) {\r\n        loadingMessage.hidden = true;\r\n        canvasElement.hidden = false;\r\n        outputContainer.hidden = false;\r\n\r\n        canvasElement.height = video.videoHeight;\r\n        canvasElement.width = video.videoWidth;\r\n        canvas.drawImage(video, 0, 0, canvasElement.width, canvasElement.height);\r\n        var imageData = canvas.getImageData(0, 0, canvasElement.width, canvasElement.height);\r\n        var code = jsQR(imageData.data, imageData.width, imageData.height, {\r\n          inversionAttempts: \"dontInvert\",\r\n        });\r\n        if (code) {\r\n          drawLine(code.location.topLeftCorner, code.location.topRightCorner, \"#FF3B58\");\r\n          drawLine(code.location.topRightCorner, code.location.bottomRightCorner, \"#FF3B58\");\r\n          drawLine(code.location.bottomRightCorner, code.location.bottomLeftCorner, \"#FF3B58\");\r\n          drawLine(code.location.bottomLeftCorner, code.location.topLeftCorner, \"#FF3B58\");\r\n          outputMessage.hidden = true;\r\n          outputData.parentElement.hidden = false;\r\n          outputData.innerText = code.data;\r\n        } else {\r\n          outputMessage.hidden = false;\r\n          outputData.parentElement.hidden = true;\r\n        }\r\n      }\r\n      requestAnimationFrame(tick);\r\n    }\r\n  <\/script>\r\n<\/body>\r\n<\/html><\/pre>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
Source:\u00a0https:\/\/cozmo.github.io\/jsQR\/ <html> <head> <meta charset=”utf-8″> <title>jsQR Demo<\/title> <script src=”https:\/\/cdn.jsdelivr.net\/npm\/jsqr@1.1.1\/dist\/jsQR.min.js”><\/script> <\/head> <body> <div id=”loadingMessage”>\ud83c\udfa5 Unable to access video stream (please make sure you have a webcam enabled)<\/div> <canvas id=”canvas” hidden><\/canvas> <div id=”output” hidden> <div id=”outputMessage”>No QR code detected.<\/div> <div hidden><b>Data:<\/b> <span id=”outputData”><\/span><\/div> <\/div> <script> var video = document.createElement(“video”); var canvasElement = document.getElementById(“canvas”); var canvas = canvasElement.getContext(“2d”); […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[5],"tags":[],"class_list":["post-1546","post","type-post","status-publish","format-standard","hentry","category-javascript"],"_links":{"self":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/1546","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/comments?post=1546"}],"version-history":[{"count":1,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/1546\/revisions"}],"predecessor-version":[{"id":1547,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/1546\/revisions\/1547"}],"wp:attachment":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/media?parent=1546"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/categories?post=1546"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/tags?post=1546"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}