Fix create QR code

This commit is contained in:
hlohaus 2025-03-25 13:50:11 +01:00
parent 41abdf71aa
commit 6767000604

View file

@ -7,9 +7,9 @@
<script src="https://cdn.jsdelivr.net/npm/qrcodejs/qrcode.min.js"></script>
<style>
body { font-family: Arial, sans-serif; text-align: center; margin: 20px; }
video { width: 300px; height: 300px; border: 1px solid black; display: block; margin: auto; object-fit: cover;}
video { width: 400px; height: 400px; border: 1px solid black; display: block; margin: auto; object-fit: cover;}
#qrcode { margin-top: 20px; }
#qrcode img, #qrcode canvas { margin: 0 auto; width: 300px; height: 300px; }
#qrcode img, #qrcode canvas { margin: 0 auto; width: 400px; height: 400px; }
button { margin: 5px; padding: 10px; }
</style>
</head>
@ -53,10 +53,6 @@
const camStatus = document.getElementById('cam-status');
let qrScanner;
document.getElementById('startCamera').addEventListener('click', async () => {
startCamera();
});
document.getElementById('stopCamera').addEventListener('click', () => {
if (currentStream) {
currentStream.getTracks().forEach(track => track.stop());
@ -77,11 +73,11 @@
}
});
document.getElementById('generateQRCode').addEventListener('click', () => {
document.getElementById('generateQRCode').addEventListener('click', async () => {
const chat_id = generate_uuid();
const url = `${share_url}/backend-api/v2/chat/${encodeURI(chat_id)}`;
const response = fetch(url, {
const response = await fetch(url, {
method: 'POST',
headers: {'content-type': 'application/json'},
body: localStorage.getItem(`conversation:${conversation_id}`)
@ -89,7 +85,7 @@
const share = `${share_url}/chat/${encodeURI(chat_id)}/${encodeURI(conversation_id)}`;
const qrcodeStatus = document.getElementById('qrcode-status');
if (response.status !== 200) {
qrcodeStatus.innerText = 'Error generating QR code';
qrcodeStatus.innerText = 'Error generating QR code: ' + response.statusText;
return;
}
qrcodeStatus.innerText = share;
@ -99,8 +95,8 @@
document.getElementById("qrcode"),
share,
{
width: 128,
height: 128,
width: 400,
height: 400,
colorDark: "#000000",
colorLight: "#ffffff",
correctLevel: QRCode.CorrectLevel.H
@ -120,7 +116,7 @@
const constraints = {
video: {
width: { ideal: 1280 },
height: { ideal: 720 },
height: { ideal: 1280 },
facingMode: facingMode
},
audio: false
@ -129,6 +125,7 @@
const stream = await navigator.mediaDevices.getUserMedia(constraints);
currentStream = stream;
video.srcObject = stream;
video.play();
qrScanner = new QrScanner(videoElem, result => {
camStatus.innerText = 'Camera Success: ' + result.data;
@ -140,8 +137,6 @@
highlightScanRegion: true,
highlightCodeOutline: true,
});
await video.play();
await qrScanner.start();
} catch (error) {
console.error('Error accessing the camera:', error);
@ -153,6 +148,10 @@
facingMode = facingMode === 'user' ? 'environment' : 'user';
startCamera();
});
document.getElementById('startCamera').addEventListener('click', () => {
startCamera();
});
</script>
</body>
</html>