h5 扫码，条形码，二维码 zxing-js
作者：程序员11 时间：2023-05-17 人气：620 QQ交流群\邮箱:1003265987@qq.com
h5 扫码，条形码，二维码zxing-js
要展示的内容
demo地址：https://gitcode.net/mirrors/zxing-js/library?utm_source=csdn_github_accelerator
链接：https://blog.csdn.net/m0_54853503/article/details/123099831
index.min.js链接：https://unpkg.com/@zxing/library@latest/umd/index.min.js
html 方法
<div id="zxingLibrary">
<video id="video" width="300" height="200" style="border: 1px solid gray"></video>
<div id="sourceSelectPanel" style="display:none;">
<label for="sourceSelect">设置摄像头:</label>
<select id="sourceSelect" style="max-width:400px">
</select>
<label id="cancelPanel">取消</label>
</div>
</div>
<script type="text/javascript" src="/dist/js/zxing/index.min.js"></script>
<script src="/dist/js/sealCircle.js"></script>
<script>
function fn() {
return SealCircle
}
fn().zxingFun(fn().callback)
</script>js 里面的方法
zxingFun(callback){
window.addEventListener('load', function () {
let selectedDeviceId;
const codeReader = new ZXing.BrowserMultiFormatReader()
console.log('ZXing code reader initialized')
codeReader.listVideoInputDevices()
.then((videoInputDevices) => {
const sourceSelect = document.getElementById('sourceSelect')
selectedDeviceId = videoInputDevices[0].deviceId
if (videoInputDevices.length >= 1) {
videoInputDevices.forEach((element) => {
const sourceOption = document.createElement('option')
sourceOption.text = element.label
sourceOption.value = element.deviceId
sourceSelect.appendChild(sourceOption)
})
// sourceSelect.onchange = () => {
// selectedDeviceId = sourceSelect.value;
// };
const sourceSelectPanel = document.getElementById('sourceSelectPanel')
sourceSelectPanel.style.display = 'block'
$(document).on("change","#sourceSelect", function() {//方法二，这是一个事件委托方法，是给页面开始加载欠就存在的元素加
selectedDeviceId = sourceSelect.value;
const zxingLibrary = document.getElementById('zxingLibrary')
zxingLibrary.style.zIndex = -1
});
}
// let startButton = null
// let batchNumber = null
// if(document.body.contains(document.getElementById("startButton"))) {
// startButton = document.getElementById('startButton')
// }
// if(document.body.contains(document.getElementById("batchNumber"))) {
// batchNumber = document.getElementById('batchNumber')
// }
//
// startButton.addEventListener('click', () => {
// const zxingLibrary = document.getElementById('zxingLibrary')
// zxingLibrary.style.zIndex = 1000
// codeReader.decodeFromVideoDevice(selectedDeviceId, 'video', (result, err) => {
// if (result) {
// console.log(result)
// codeReader.stopStreams()
// zxingLibrary.style.zIndex = -1
// let index = startButton.dataset.index
// let name = startButton.attributes[1].nodeValue
// // callback(result.text,index,name)
// // document.getElementById('result').textContent = result.text
// }
// if (err && !(err instanceof ZXing.NotFoundException)) {
// console.error(err)
// // document.getElementById('result').textContent = err
// }
// })
// console.log(`Started continous decode from camera with id ${selectedDeviceId}`)
// })
$("body").delegate("#startButton","click", function() {//方法二，这是一个事件委托方法，是给页面开始加载欠就存在的元素加
console.log('startButton',selectedDeviceId)
let that = this
const zxingLibrary = document.getElementById('zxingLibrary')
zxingLibrary.style.zIndex = 1000
codeReader.decodeFromVideoDevice(selectedDeviceId, 'video', (result, err) => {
if (result) {
console.log(result)
codeReader.stopStreams()
zxingLibrary.style.zIndex = -1
let index = that.dataset.index
let name = that.attributes[1].nodeValue
callback(result.text,index,name)
// document.getElementById('result').textContent = result.text
}
if (err && !(err instanceof ZXing.NotFoundException)) {
console.error(err)
// document.getElementById('result').textContent = err
}
})
console.log(`Started continous decode from camera with id ${selectedDeviceId}`)
});
// batchNumber.addEventListener('click', () => {
// const zxingLibrary = document.getElementById('zxingLibrary')
// zxingLibrary.style.zIndex = 1000
// codeReader.decodeFromVideoDevice(selectedDeviceId, 'video', (result, err) => {
// if (result) {
// console.log(result)
// codeReader.stopStreams()
// zxingLibrary.style.zIndex = -1
// let index = batchNumber.dataset.index
// let name = batchNumber.attributes[1].nodeValue
// callback(result.text,index,name)
// // document.getElementById('result').textContent = result.text
// }
// if (err && !(err instanceof ZXing.NotFoundException)) {
// console.error(err)
// // document.getElementById('result').textContent = err
// }
// })
// console.log(`Started continous decode from camera with id ${selectedDeviceId}`)
// })
$("body").delegate("#batchNumber","click", function() {//方法二，这是一个事件委托方法，是给页面开始加载欠就存在的元素加
console.log('batchNumber',selectedDeviceId)
let that = this
const zxingLibrary = document.getElementById('zxingLibrary')
zxingLibrary.style.zIndex = 1000
codeReader.decodeFromVideoDevice(selectedDeviceId, 'video', (result, err) => {
if (result) {
console.log(result)
codeReader.stopStreams()
zxingLibrary.style.zIndex = -1
let index = that.dataset.index
let name = that.attributes[1].nodeValue
callback(result.text,index,name)
// document.getElementById('result').textContent = result.text
}
if (err && !(err instanceof ZXing.NotFoundException)) {
console.error(err)
// document.getElementById('result').textContent = err
}
})
console.log(`Started continous decode from camera with id ${selectedDeviceId}`)
});
// document.getElementById('resetButton').addEventListener('click', () => {
// codeReader.reset()
// // document.getElementById('result').textContent = '';
// // console.log('Reset.')
// })
$("body").delegate("#cancelPanel","click", function() {//方法二，这是一个事件委托方法，是给页面开始加载欠就存在的元素加
codeReader.stopStreams()
const zxingLibrary = document.getElementById('zxingLibrary')
zxingLibrary.style.zIndex = -1
});
})
.catch((err) => {
console.error(err)
})
})
}
温馨提示:
欢迎阅读本文章，觉得有用就多来支持一下，没有能帮到您，还有很多文章，希望有一天能帮到您。
HTML5-热门文章
活跃用户
