52 lines
1.8 KiB
HTML
52 lines
1.8 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>QR Code Scanner Example</title>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
|
|
<script src="https://cdn.rawgit.com/schmich/instascan-builds/master/instascan.min.js"></script>
|
|
</head>
|
|
<body>
|
|
<video id="preview"></video>
|
|
<button id="switchCameraButton">Switch Camera</button>
|
|
|
|
<script>
|
|
$(document).ready(function() {
|
|
let scanner = new Instascan.Scanner({ video: document.getElementById('preview') });
|
|
let cameras = [];
|
|
|
|
Instascan.Camera.getCameras().then(function(cameras) {
|
|
if (cameras.length > 0) {
|
|
startScanner(cameras[0]);
|
|
setupCameraSwitching(cameras);
|
|
} else {
|
|
console.error('No cameras found.');
|
|
}
|
|
}).catch(function(e) {
|
|
console.error(e);
|
|
});
|
|
|
|
function startScanner(camera) {
|
|
scanner.start(camera);
|
|
scanner.addListener('scan', function(content) {
|
|
alert('Scanned QR Code: ' + content);
|
|
});
|
|
}
|
|
|
|
function setupCameraSwitching(cameras) {
|
|
$('#switchCameraButton').click(function() {
|
|
if (cameras.length > 1) {
|
|
let currentCamera = scanner.camera;
|
|
let nextCameraIndex = (cameras.indexOf(currentCamera) + 1) % cameras.length;
|
|
let nextCamera = cameras[nextCameraIndex];
|
|
scanner.stop().then(function() {
|
|
startScanner(nextCamera);
|
|
});
|
|
}
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|