溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下JS如何調(diào)用安卓手機(jī)攝像頭掃描二維碼，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！
項(xiàng)目要求：
使用H5模仿微信掃一掃付款功能
經(jīng)過一系列的查找最后發(fā)現(xiàn)可以使用 JS調(diào)用手機(jī)攝像頭然后用畫布把當(dāng)前攝像頭的數(shù)據(jù)轉(zhuǎn)成Base64的png圖片，經(jīng)過QrCode直接再本地識別。
優(yōu)點(diǎn)：
兼容大多數(shù)瀏覽器
本地識別不占用服務(wù)端資源
代碼比較簡單只有一個頁面
<html lang="ZH-CN">
<head>
<meta charset="utf-8">
<title>Web QrCode Test</title>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="jsqrcode/src/grid.js"></script>
<script type="text/javascript" src="jsqrcode/src/version.js"></script>
<script type="text/javascript" src="jsqrcode/src/detector.js"></script>
<script type="text/javascript" src="jsqrcode/src/formatinf.js"></script>
<script type="text/javascript" src="jsqrcode/src/errorlevel.js"></script>
<script type="text/javascript" src="jsqrcode/src/bitmat.js"></script>
<script type="text/javascript" src="jsqrcode/src/datablock.js"></script>
<script type="text/javascript" src="jsqrcode/src/bmparser.js"></script>
<script type="text/javascript" src="jsqrcode/src/datamask.js"></script>
<script type="text/javascript" src="jsqrcode/src/rsdecoder.js"></script>
<script type="text/javascript" src="jsqrcode/src/gf256poly.js"></script>
<script type="text/javascript" src="jsqrcode/src/gf256.js"></script>
<script type="text/javascript" src="jsqrcode/src/decoder.js"></script>
<script type="text/javascript" src="jsqrcode/src/qrcode.js"></script>
<script type="text/javascript" src="jsqrcode/src/findpat.js"></script>
<script type="text/javascript" src="jsqrcode/src/alignpat.js"></script>
<script type="text/javascript" src="jsqrcode/src/databr.js"></script>
</head>
<body>
<div class="booth">
<video id="video" width="400" height="400"></video>
<canvas id='canvas' width='400' height='400'></canvas>
<img id='img' src=''>
</div>
<div id="mmm"></div>
<canvas id="qr-canvas" width="640" height="480"></canvas>
<script>
//初始化媒體對象
var c=0;
var video = document.getElementById('video'),
canvas = document.getElementById('canvas'),
img = document.getElementById('img'),
vendorUrl = window.URL || window.webkitURL;
//媒體對象
navigator.getMedia = navigator.getUserMedia ||
navagator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia;
navigator.getMedia({
video: true, //使用攝像頭對象
audio: false //不適用音頻
}, function(strem){
console.log(strem);
video.src = vendorUrl.createObjectURL(strem);
video.play();
}, function(error) {
//error.code
console.log(error);
});
//啟動定時器
setTimeout("actionP(null)","1000");
//定時器
function actionP(data){
if(data==null){
Screenshot()
}else{
if(data!=null & data!="error decoding QR Code"){//識別出數(shù)據(jù)
if(data.indexOf("http")!=-1){
window.location.href=data;
}else alert(data);
}else{//沒有數(shù)據(jù)循環(huán)十次
c++;
if(c<10){
setTimeout("actionP(null)","1000");
}
}
}
}
function Screenshot(){//截取圖像
canvas.getContext('2d').drawImage(video, 0, 0, 400, 400);
var imgData = canvas.toDataURL("image/png");
load(imgData);
img.src=imgData;
}
////////////////////////////////////////識別二維碼////////////////////////////////////////////
function dragenter(e) {
e.stopPropagation();
e.preventDefault();
}
function dragover(e) {
e.stopPropagation();
e.preventDefault();
}
function drop(e) {
e.stopPropagation();
e.preventDefault();
var dt = e.dataTransfer;
var files = dt.files;
}
function load(name)
{
initCanvas(640,480);
//識別二維碼并回調(diào)方法
qrcode.callback = actionP;
qrcode.decode(name);
}
function initCanvas(ww,hh)//創(chuàng)建畫板
{
gCanvas = document.getElementById("qr-canvas");
gCanvas.addEventListener("dragenter", dragenter, false);
gCanvas.addEventListener("dragover", dragover, false);
gCanvas.addEventListener("drop", drop, false);
var w = ww;
var h = hh;
gCanvas.style.width = w + "px";
gCanvas.style.height = h + "px";
gCanvas.width = w;
gCanvas.height = h;
gCtx = gCanvas.getContext("2d");
gCtx.clearRect(0, 0, w, h);
imageData = gCtx.getImageData( 0,0,320,240);
}
</script>
</body>
</html>看完了這篇文章，相信你對“JS如何調(diào)用安卓手機(jī)攝像頭掃描二維碼”有了一定的了解，如果想了解更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機(jī)網(wǎng)站二維碼