Geek Answers Handbook

How to read QR code using iPad camera on website?

I use the following code to access the camera, but the goal is to read the QR codes using the camera. Using the following code, I can only take a picture and save it, and then using my backend, read the QR code from the saved file.

How can I change the code for image processing while reading the camera. Or something like sending streams to the internal server and after detecting the QR code, it notifies the user.

I need to work with a tablet.

I can use the following to record video, but how to send streams to the wallpaper

<input type="file" capture="camera" accept="video/*">

My code for shooting

 <!DOCTYPE HTML> <html> <head> <meta name="viewport" content="width=320; user-scalable=no" /> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <title>ColorThief Demo</title> <script type="text/javascript" charset="utf-8" src="jquery-2.0.0.min.js"></script> <script type="text/javascript" charset="utf-8" src="quantize.js"></script> <script type="text/javascript" charset="utf-8" src="color-thief.js"></script> <style> #yourimage { width:100%; } #swatches { width: 100%; height: 50px; } .swatch { width:18%; height: 50px; border-style:solid; border-width:thin; float: left; margin-right: 3px; } </style> </head> <body> <input type="file" capture="camera" accept="image/*" id="takePictureField"> <img id="yourimage"> <div id="swatches"> <div id="swatch0" class="swatch"></div> <div id="swatch1" class="swatch"></div> <div id="swatch2" class="swatch"></div> <div id="swatch3" class="swatch"></div> <div id="swatch4" class="swatch"></div> </div> <script> var desiredWidth; $(document).ready(function() { console.log('onReady'); $("#takePictureField").on("change",gotPic); $("#yourimage").load(getSwatches); desiredWidth = window.innerWidth; if(!("url" in window) && ("webkitURL" in window)) { window.URL = window.webkitURL; } }); function getSwatches(){ var colorArr = createPalette($("#yourimage"), 5); for (var i = 0; i < Math.min(5, colorArr.length); i++) { $("#swatch"+i).css("background-color","rgb("+colorArr[i][0]+","+colorArr[i][1]+","+colorArr[i][2]+")"); console.log($("#swatch"+i).css("background-color")); } } //Credit: https://www.youtube.com/watch?v=EPYnGFEcis4&feature=youtube_gdata_player function gotPic(event) { if(event.target.files.length == 1 && event.target.files[0].type.indexOf("image/") == 0) { $("#yourimage").attr("src",URL.createObjectURL(event.target.files[0])); } } </script> </body> </html>
+7
source share
2 answers

You need to take a look at the Stream API . A message about the demons of Eric Bidelman is published at the bottom .

0
source

Capturing video and sending it to the server will be excessively intense in the bandwidth on the mobile device. I would give jsqrcode a try and do it all on the client side in JavaScript. Also see this answer .

0
source

More articles:


All Articles