我有一个项目想法，员工在网上提交申请后，扫描公司给的申请人的二维码。每当员工扫描二维码时，申请人的记录就会自动出现。问题是每当我尝试在 Chrome 浏览器中运行代码时，我的浏览器中都没有出现摄像头。
我使用 XAMPP 通过 PHP 和 JavaScript 进行本地开发。我尝试了一些方法来修复它，也要求 ChatGPT 解决这个问题，但问题仍然存在。
这是我的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>QR Code Scanner</title>
<script src="https://unpkg.com/html5-qrcode/minified/html5-qrcode.min.js"></script>
<style>
#qr-reader {
width: 300px;
height: 300px;
border: 1px solid #ccc;
margin: auto;
}
#result {
margin-top: 20px;
text-align: center;
}
#camera-select {
display: block;
margin: auto;
}
</style>
</head>
<body>
<h1>QR Code Scanner</h1>
<select id="camera-select"></select>
<div id="qr-reader"></div>
<div id="result">
<p id="result-text">Scan a QR code to see the result here.</p>
</div>
<script>
async function initializeCameraSelection() {
const cameraSelect = document.getElementById('camera-select');
// Get available devices
const devices = await Html5Qrcode.getCameras();
if (devices && devices.length) {
// Populate camera select options
devices.forEach(device => {
const option = document.createElement('option');
option.value = device.id;
option.text = device.label || `Camera ${cameraSelect.options.length + 1}`;
cameraSelect.appendChild(option);
});
// Set default to first camera
if (devices.length > 0) {
cameraSelect.value = devices[0].id;
}
} else {
console.log("No cameras found.");
}
}
async function startScanning() {
const selectedCameraId = document.getElementById('camera-select').value;
const html5QrCode = new Html5Qrcode("qr-reader");
html5QrCode.start(
{ facingMode: { exact: selectedCameraId } }, // Select the chosen camera
{
fps: 10, // Frames per second
qrbox: 250 // QR box size
},
(decodedText, decodedResult) => {
document.getElementById('result-text').innerText = `QR Code content: ${decodedText}`;
console.log(`Scan result: ${decodedText}`);
// You can handle the scan result here (e.g., send it to the server or redirect)
},
(errorMessage) => {
console.log(`QR Code scan error: ${errorMessage}`);
}
).catch(err => {
console.log(`Error starting QR code scanner: ${err}`);
});
}
// Initialize camera selection and start scanning
initializeCameraSelection().then(() => {
document.getElementById('camera-select').addEventListener('change', startScanning);
startScanning(); // Start scanning with the default selected camera
});
</script>
</body>
</html>
我尝试了 ChatGPT 所说的一切，但问题仍然存在，我希望在浏览器中显示我的相机来扫描二维码。
here is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>QR Code Scanner</title>
<script src="https://unpkg.com/html5-qrcode/minified/html5-qrcode.min.js"></script>
<style>
#qr-reader {
width: 300px;
height: 300px;
border: 1px solid #ccc;
margin: auto;
}
#result {
margin-top: 20px;
text-align: center;
}
#camera-select {
display: block;
margin: auto;
}
</style>
</head>
<body>
<h1>QR Code Scanner</h1>
<select id="camera-select"></select>
<div id="qr-reader"></div>
<div id="result">
<p id="result-text">Scan a QR code to see the result here.</p>
</div>
<script>
async function initializeCameraSelection() {
const cameraSelect = document.getElementById('camera-select');
// Get available devices
const devices = await Html5Qrcode.getCameras();
if (devices && devices.length) {
// Populate camera select options
devices.forEach(device => {
const option = document.createElement('option');
option.value = device.id;
option.text = device.label || `Camera ${cameraSelect.options.length + 1}`;
cameraSelect.appendChild(option);
});
// Set default to first camera
if (devices.length > 0) {
cameraSelect.value = devices[0].id;
}
} else {
console.log("No cameras found.");
}
}
async function startScanning() {
const selectedCameraId = document.getElementById('camera-select').value;
const html5QrCode = new Html5Qrcode("qr-reader");
html5QrCode.start(
{ facingMode: { exact: selectedCameraId } }, // Select the chosen camera
{
fps: 10, // Frames per second
qrbox: 250 // QR box size
},
(decodedText, decodedResult) => {
document.getElementById('result-text').innerText = `QR Code content: ${decodedText}`;
console.log(`Scan result: ${decodedText}`);
// You can handle the scan result here (e.g., send it to the server or redirect)
},
(errorMessage) => {
console.log(`QR Code scan error: ${errorMessage}`);
}
).catch(err => {
console.log(`Error starting QR code scanner: ${err}`);
});
}
// Initialize camera selection and start scanning
initializeCameraSelection().then(() => {
document.getElementById('camera-select').addEventListener('change', startScanning);
startScanning(); // Start scanning with the default selected camera
});
</script>
</body>
</html>