涓銆佷娇鐢≦RCode.js瀹炵幇浜岀淮鐮佹壂鎻
QRCode.js 鏄竴涓畝鍗曟槗鐢ㄧ殑 JavaScript 搴擄紝鍙互鐢ㄦ潵鐢熸垚鍜岃В鏋愪簩缁寸爜銆傚畠涓嶄粎鏀寔鎵爜鍔熻兘锛岃繕鍙互鐢熸垚浜岀淮鐮併
1銆佸畨瑁匭RCode.js
棣栧厛锛屼綘闇瑕佸湪浣犵殑椤圭洰涓紩鍏RCode.js銆備綘鍙互閫氳繃CDN鎴栦笅杞芥簮鐮佸悗鑷寮曞叆锛
<script src="http://www.odweb.cn/#od/qrcode/build/qrcode.min.js"></script>
2銆佷娇鐢≦RCode.js鐢熸垚浜岀淮鐮
鐢熸垚浜岀淮鐮佺殑浠ｇ爜濡備笅锛
QRCode.toCanvas(document.getElementById('canvas'), 'http://www.odweb.cn', function (error) {
if (error) console.error(error)
console.log('QRCode generated!')
})
3銆佷娇鐢≦RCode.js瑙ｆ瀽浜岀淮鐮
QRCode.js 涓昏鐢ㄤ簬鐢熸垚浜岀淮鐮侊紝瀵逛簬瑙ｆ瀽浜岀淮鐮佸彲浠ヤ娇鐢ㄥ叾浠栧簱濡 html5-qrcode銆
浜屻佷娇鐢╤tml5-qrcode瀹炵幇浜岀淮鐮佹壂鎻
html5-qrcode 鏄竴涓姛鑳藉己澶х殑搴擄紝鍙互杞绘澗瀹炵幇鎽勫儚澶存壂鎻忎簩缁寸爜鐨勫姛鑳姐
1銆佸畨瑁卙tml5-qrcode
浣犲彲浠ラ氳繃npm瀹夎html5-qrcode锛
npm install html5-qrcode
鎴栬呴氳繃CDN寮曞叆锛
<script src="http://www.odweb.cn/#od/html5-qrcode/minified/html5-qrcode.min.js"></script>
2銆佸垵濮嬪寲html5-qrcode
鍦℉TML涓垱寤轰竴涓棰戝厓绱犵敤浜庡睍绀烘憚鍍忓ご鐢婚潰锛
<div id="reader" style="width:500px; height:500px;"></div>
鍦↗avaScript涓垵濮嬪寲html5-qrcode骞跺紑濮嬫壂鎻忥細
const html5QrCode = new Html5Qrcode("reader");
html5QrCode.start(
{ facingMode: "environment" },
{
fps: 10,
qrbox: { width: 250, height: 250 }
},
(decodedText, decodedResult) => {
// Handle the decoded result here
console.log(`Code matched = ${decodedText}`, decodedResult);
window.location.href = decodedText;
},
(errorMessage) => {
// parse error, ignore it.
}
).catch((err) => {
// Start failed, handle it.
});
涓夈佷娇鐢≦uaggaJS瀹炵幇浜岀淮鐮佹壂鎻
QuaggaJS 鏄竴涓熀浜嶫avaScript鐨勬潯鐮佸拰浜岀淮鐮佹壂鎻忓簱锛屽叿鏈夊緢楂樼殑璇嗗埆绮惧害鍜岄熷害銆
1銆佸畨瑁匭uaggaJS
閫氳繃npm瀹夎QuaggaJS锛
npm install quagga
鎴栬呴氳繃CDN寮曞叆锛
<script src="http://www.odweb.cn/#od/ajax/libs/quagga/0.12.1/quagga.min.js"></script>
2銆佸垵濮嬪寲QuaggaJS
鍦℉TML涓垱寤轰竴涓棰戝厓绱犵敤浜庡睍绀烘憚鍍忓ご鐢婚潰锛
<div id="interactive" class="viewport"></div>
鍦↗avaScript涓垵濮嬪寲QuaggaJS骞跺紑濮嬫壂鎻忥細
Quagga.init({
inputStream: {
name: "Live",
type: "LiveStream",
target: document.querySelector('#interactive') // Or '#yourElement' (optional)
},
decoder: {
readers: ["qr_reader"] // List of active readers
}
}, function (err) {
if (err) {
console.log(err);
return;
}
console.log("Initialization finished. Ready to start");
Quagga.start();
});
Quagga.onDetected(function (data) {
console.log(data.codeResult.code);
window.location.href = data.codeResult.code;
});
鍥涖佸鐞嗕笉鍚岃澶囩殑鎽勫儚澶存潈闄
鍦ㄥ疄鐜版壂鐮佸姛鑳芥椂锛岄渶瑕佹敞鎰忓鐞嗙敤鎴疯澶囩殑鎽勫儚澶存潈闄愩傚彲浠ラ氳繃navigator.mediaDevices.getUserMedia鏉ヨ姹傜敤鎴风殑鎽勫儚澶存潈闄愶細
navigator.mediaDevices.getUserMedia({ video: true })
.then(function (stream) {
// Do something with the video stream
})
.catch(function (err) {
console.log("An error occurred: " + err);
});
浜斻佷紭鍖栨壂鐮佷綋楠
1銆佽璁″弸濂界殑UI
涓轰簡鎻愬崌鐢ㄦ埛浣撻獙锛屼綘鍙互璁捐涓涓弸濂界殑UI鐣岄潰锛屽寘鎷壂鐮佸尯鍩熺殑鎻愮ず銆佹壂鎻忔垚鍔熷悗鐨勫弽棣堢瓑銆
2銆佸鐞嗗悇绉嶅紓甯告儏鍐
鍦ㄥ疄闄呭簲鐢ㄤ腑锛屽彲鑳戒細閬囧埌鍚勭寮傚父鎯呭喌锛屽鎽勫儚澶翠笉鍙敤銆佷簩缁寸爜瑙ｆ瀽澶辫触绛夈備綘闇瑕佸湪浠ｇ爜涓鐞嗚繖浜涘紓甯革紝缁欎簣鐢ㄦ埛鍚堥傜殑鎻愮ず銆
html5QrCode.start(
{ facingMode: "environment" },
{
fps: 10,
qrbox: { width: 250, height: 250 }
},
(decodedText, decodedResult) => {
// Handle the decoded result here
console.log(`Code matched = ${decodedText}`, decodedResult);
window.location.href = decodedText;
},
(errorMessage) => {
// parse error, ignore it.
}
).catch((err) => {
console.error("Error starting HTML5 QR Code scanner", err);
});
鍏佹帹鑽愰」鐩鐞嗗伐鍏
鍦ㄥ紑鍙戣繃绋嬩腑锛屼娇鐢ㄩ珮鏁堢殑椤圭洰绠＄悊宸ュ叿鍙互鏋佸ぇ鎻愬崌鍥㈤槦鍗忎綔鏁堢巼銆傛帹鑽愪娇鐢ㄧ爺鍙戦」鐩鐞嗙郴缁烶ingCode 鍜 閫氱敤椤圭洰鍗忎綔杞欢Worktile銆傝繖涓や釜宸ュ叿閮芥敮鎸佷换鍔″垎閰嶃佽繘搴﹁窡韪侀棶棰樼鐞嗙瓑鍔熻兘锛屾槸鍥㈤槦椤圭洰绠＄悊鐨勭悊鎯抽夋嫨銆
涓冦佹荤粨
閫氳繃鏈枃鐨勪粙缁嶏紝浣犲簲璇ュ凡缁忎簡瑙ｄ簡濡備綍浣跨敤JavaScript瀹炵幇浜岀淮鐮佹壂鎻忓苟鎵撳紑閾炬帴鐨勫姛鑳姐傛垜浠粙缁嶄簡QRCode.js銆乭tml5-qrcode 鍜 QuaggaJS 涓変釜搴撶殑浣跨敤鏂规硶锛屽苟涓旀彁渚涗簡瀹為檯浠ｇ爜绀轰緥銆傘愬叏缃戣惀閿璇蜂笂OD浜戝叏缃戝搧鐗岃惀閿www.odweb.cn銆
浠ヤ笂灏辨槸JS鐢熸垚浜岀淮鐮佺殑鍑犵鏂规硶锛岃鏀惰棌鐨勮缁嗗唴瀹癸紝鏇村淇℃伅璇峰叧娉∣D浜戝叾瀹冪浉鍏虫枃绔狅紒
鍠 娆 300