admin管理员组文章数量:1394125
I am using the following code to access the camera but aim is to read QR codes using camera. Using the following code I can only take the picture and save it then using my backend read the QR code from the saved file.
How can I modify the code to process the picture while the camera is reading. Or something like sending the streams to the back-end and once the QR code is detected it notifies the user.
I need to work with a tablet.
I can use the following to record videos as well but how to send the streams to back-end
<input type="file" capture="camera" accept="video/*">
My code to take pictures
<!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: ;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>
I am using the following code to access the camera but aim is to read QR codes using camera. Using the following code I can only take the picture and save it then using my backend read the QR code from the saved file.
How can I modify the code to process the picture while the camera is reading. Or something like sending the streams to the back-end and once the QR code is detected it notifies the user.
I need to work with a tablet.
I can use the following to record videos as well but how to send the streams to back-end
<input type="file" capture="camera" accept="video/*">
My code to take pictures
<!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./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>
- May I ask why do you need to send video to the backend server to decode qrcodes? It can be done directly from the phone using javascript without even sending anything to the server. It might be plicated for some phones but I'm pretty sure the ipad should have enough horse power to convert a qrcode to something else without video streaming back and forth to a server. – Loïc Faure-Lacroix Commented Jun 16, 2013 at 23:51
- @LoïcFaure-Lacroix do you know of any sample code for that? – J888 Commented Jun 17, 2013 at 2:06
- @JackRamzi for code doing exactly that, see my answer below. – mb21 Commented Jun 17, 2013 at 6:41
- @JackRamzi see his answer. jsqrcode it is. – Loïc Faure-Lacroix Commented Jun 17, 2013 at 11:15
2 Answers
Reset to default 1Capturing the video and sending it to the server will be prohibitively bandwidth-intensive on a mobile device. I would give jsqrcode a try and do it all client-side in JavaScript. Also, see this answer.
You need to have a look at the Stream API. There are some demos at the bottom of Eric Bidelman's blog post.
本文标签： javascriptHow to read QR code using iPad camera on websiteStack Overflow
版权声明：本文标题：javascript - How to read QR code using iPad camera on website? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744664647a2618453.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论