You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
151 lines
5.7 KiB
151 lines
5.7 KiB
3 years ago
|
|
||
|
|
<!doctype html>
|
||
|
|
<html lang="en">
|
||
|
|
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
|
|
<meta name="author" content="ZXing for JS">
|
||
|
|
|
||
|
|
<title>ZXing TypeScript | Decoding from camera stream</title>
|
||
|
|
|
||
|
|
<!-- <link rel="stylesheet" rel="preload" as="style" onload="this.rel='stylesheet';this.onload=null" href="https://fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic">-->
|
||
|
|
<!-- <link rel="stylesheet" rel="preload" as="style" onload="this.rel='stylesheet';this.onload=null" href="https://unpkg.com/normalize.css@8.0.0/normalize.css">-->
|
||
|
|
<!-- <link rel="stylesheet" rel="preload" as="style" onload="this.rel='stylesheet';this.onload=null" href="https://unpkg.com/milligram@1.3.0/dist/milligram.min.css">-->
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<main class="wrapper" style="padding-top:2em">
|
||
|
|
|
||
|
|
<section class="container" id="demo-content">
|
||
|
|
<div>
|
||
|
|
<a class="button" id="startButton">扫描</a>
|
||
|
|
<a class="button" id="resetButton">重置</a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<video id="video" width="300" height="200" style="border: 1px solid gray"></video>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="sourceSelectPanel" style="display:none">
|
||
|
|
<label for="sourceSelect">选择摄像头: </label>
|
||
|
|
<select id="sourceSelect" style="max-width:400px">
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div style="display: table">
|
||
|
|
<label for="decoding-style"> 扫描次数:</label>
|
||
|
|
<select id="decoding-style" size="1">
|
||
|
|
<option value="once">扫描一次</option>
|
||
|
|
<option value="continuously">持续扫描</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<label>结果:</label>
|
||
|
|
<pre><code id="result"></code></pre>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
</main>
|
||
|
|
|
||
|
|
<script type="text/javascript" src="https://unpkg.com/@zxing/library@latest"></script>
|
||
|
|
<script type="text/javascript">
|
||
|
|
function decodeOnce(codeReader, selectedDeviceId) {
|
||
|
|
codeReader.decodeFromInputVideoDevice(selectedDeviceId, 'video').then((result) => {
|
||
|
|
console.log(result);
|
||
|
|
document.getElementById('result').textContent = result.text
|
||
|
|
}).catch((err) => {
|
||
|
|
console.error(err);
|
||
|
|
document.getElementById('result').textContent = err
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
function decodeContinuously(codeReader, selectedDeviceId) {
|
||
|
|
codeReader.decodeFromInputVideoDeviceContinuously(selectedDeviceId, 'video', (result, err) => {
|
||
|
|
if (result) {
|
||
|
|
// properly decoded qr code
|
||
|
|
console.log('Found QR code!', result);
|
||
|
|
document.getElementById('result').textContent = result.text
|
||
|
|
}
|
||
|
|
|
||
|
|
if (err) {
|
||
|
|
if (err instanceof ZXing.NotFoundException) {
|
||
|
|
console.log('No QR code found.')
|
||
|
|
}
|
||
|
|
|
||
|
|
if (err instanceof ZXing.ChecksumException) {
|
||
|
|
console.log('A code was found, but it\'s read value was not valid.')
|
||
|
|
}
|
||
|
|
|
||
|
|
if (err instanceof ZXing.FormatException) {
|
||
|
|
console.log('A code was found, but it was in a invalid format.')
|
||
|
|
}
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
window.addEventListener('load', function () {
|
||
|
|
let selectedDeviceId;
|
||
|
|
const codeReader = new ZXing.BrowserQRCodeReader();
|
||
|
|
console.log('ZXing 初始化');
|
||
|
|
|
||
|
|
codeReader.getVideoInputDevices()
|
||
|
|
.then((videoInputDevices) => {
|
||
|
|
const sourceSelect = document.getElementById('sourceSelect')
|
||
|
|
// selectedDeviceId = videoInputDevices[0].deviceId;
|
||
|
|
if (videoInputDevices.length >= 1) {
|
||
|
|
videoInputDevices.forEach((element) => {
|
||
|
|
const sourceOption = document.createElement('option');
|
||
|
|
console.log(element.label);
|
||
|
|
if(element.label.includes("front")){
|
||
|
|
sourceOption.text = "前置摄像头";
|
||
|
|
sourceOption.value = element.deviceId;
|
||
|
|
}else if (element.label.includes("back")){
|
||
|
|
sourceOption.text = "后置摄像头";
|
||
|
|
sourceOption.selected=true;
|
||
|
|
sourceOption.value = element.deviceId;
|
||
|
|
selectedDeviceId = element.deviceId;
|
||
|
|
}
|
||
|
|
sourceSelect.appendChild(sourceOption)
|
||
|
|
});
|
||
|
|
|
||
|
|
sourceSelect.onchange = () => {
|
||
|
|
selectedDeviceId = sourceSelect.value;
|
||
|
|
};
|
||
|
|
|
||
|
|
const sourceSelectPanel = document.getElementById('sourceSelectPanel')
|
||
|
|
sourceSelectPanel.style.display = 'block'
|
||
|
|
}
|
||
|
|
|
||
|
|
document.getElementById('startButton').addEventListener('click', () => {
|
||
|
|
|
||
|
|
const decodingStyle = document.getElementById('decoding-style').value;
|
||
|
|
|
||
|
|
if (decodingStyle === "once") {
|
||
|
|
// 如果只扫描一次
|
||
|
|
decodeOnce(codeReader, selectedDeviceId);
|
||
|
|
} else {
|
||
|
|
// 扫描多次
|
||
|
|
decodeContinuously(codeReader, selectedDeviceId);
|
||
|
|
}
|
||
|
|
|
||
|
|
console.log(`Started decode from camera with id ${selectedDeviceId}`)
|
||
|
|
});
|
||
|
|
|
||
|
|
document.getElementById('resetButton').addEventListener('click', () => {
|
||
|
|
codeReader.reset();
|
||
|
|
document.getElementById('result').textContent = '';
|
||
|
|
console.log('Reset.')
|
||
|
|
})
|
||
|
|
|
||
|
|
})
|
||
|
|
.catch((err) => {
|
||
|
|
console.error(err)
|
||
|
|
})
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|