170 lines
5.9 KiB
HTML
170 lines
5.9 KiB
HTML
<!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="preload" as="style" onload="this.rel='stylesheet';this.onload=null" href="https://fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic">
|
|
<link rel="preload" as="style" onload="this.rel='stylesheet';this.onload=null" href="https://unpkg.com/normalize.css@8.0.0/normalize.css">
|
|
<link 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">
|
|
<h1 class="title">Scan QR Code from Video Camera</h1>
|
|
|
|
<p>
|
|
<a class="button-small button-outline" href="../../index.html">HOME 🏡</a>
|
|
</p>
|
|
|
|
<p>This example shows how to scan a QR code with ZXing javascript library from the device video camera. If more
|
|
than one video input devices are available (for example front and back camera) the example shows how to read
|
|
them and use a select to change the input device.</p>
|
|
|
|
<div>
|
|
<a class="button" id="startButton">Start</a>
|
|
<a class="button" id="resetButton">Reset</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">Change video source:</label>
|
|
<select id="sourceSelect" style="max-width:400px">
|
|
</select>
|
|
</div>
|
|
|
|
<div style="display: table">
|
|
<label for="decoding-style"> Decoding Style:</label>
|
|
<select id="decoding-style" size="1">
|
|
<option value="once">Decode once</option>
|
|
<option value="continuously">Decode continuously</option>
|
|
</select>
|
|
</div>
|
|
|
|
<label>Result:</label>
|
|
<pre><code id="result"></code></pre>
|
|
|
|
<p>See the <a href="https://github.com/zxing-js/library/tree/master/docs/examples/qr-camera/">source code</a> for
|
|
this example.</p>
|
|
</section>
|
|
|
|
<footer class="footer">
|
|
<section class="container">
|
|
<p>ZXing TypeScript Demo. Licensed under the <a target="_blank"
|
|
href="https://github.com/zxing-js/library#license" title="MIT">MIT</a>.</p>
|
|
</section>
|
|
</footer>
|
|
|
|
</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) {
|
|
// As long as this error belongs into one of the following categories
|
|
// the code reader is going to continue as excepted. Any other error
|
|
// will stop the decoding loop.
|
|
//
|
|
// Excepted Exceptions:
|
|
//
|
|
// - NotFoundException
|
|
// - ChecksumException
|
|
// - FormatException
|
|
|
|
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 code reader initialized')
|
|
|
|
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')
|
|
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.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>
|