mirror of
https://github.com/xtekky/gpt4free.git
synced 2025-12-06 02:30:41 -08:00
157 lines
No EOL
5.8 KiB
HTML
157 lines
No EOL
5.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>QR Scanner and QR Code Generator</title>
|
|
<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: 400px; height: 400px; border: 1px solid black; display: block; margin: auto; object-fit: cover; max-width: 100%;}
|
|
#qrcode { margin-top: 20px; }
|
|
#qrcode img, #qrcode canvas { margin: 0 auto; width: 400px; height: 400px; max-width: 100%;}
|
|
button { margin: 5px; padding: 10px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<h1>QR Scanner & QR Code</h1>
|
|
|
|
<h2>QR Code Scanner</h2>
|
|
<video id="video"></video>
|
|
<button id="startCamera">Start Camera</button>
|
|
<button id="stopCamera">Stop Camera</button>
|
|
<button id="switchCamera">Switch Camera</button>
|
|
<button id="toggleFlash">Toggle Flash</button>
|
|
<p id="cam-status"></p>
|
|
|
|
<h2>QR Code</h2>
|
|
<div id="qrcode"></div>
|
|
<p><a id="qrcode-status" target="_parent"></a></p>
|
|
<button id="generateQRCode">Generate QR Code</button>
|
|
|
|
<script type="module">
|
|
const share_url = "{{share_url}}" || window.location.origin;
|
|
const conversation_id = "{{conversation_id}}";
|
|
if (!conversation_id) {
|
|
document.getElementById('generateQRCode')
|
|
.setAttribute('disabled', 'disabled');
|
|
}
|
|
|
|
import QrScanner from 'https://cdn.jsdelivr.net/npm/qr-scanner/qr-scanner.min.js';
|
|
|
|
function generate_uuid() {
|
|
function random16Hex() { return (0x10000 | Math.random() * 0x10000).toString(16).substr(1); }
|
|
return random16Hex() + random16Hex() +
|
|
"-" + random16Hex() +
|
|
"-" + random16Hex() +
|
|
"-" + random16Hex() +
|
|
"-" + random16Hex() + random16Hex() + random16Hex();
|
|
}
|
|
|
|
const videoElem = document.getElementById('video');
|
|
const camStatus = document.getElementById('cam-status');
|
|
let qrScanner;
|
|
|
|
document.getElementById('stopCamera').addEventListener('click', () => {
|
|
if (currentStream) {
|
|
currentStream.getTracks().forEach(track => track.stop());
|
|
}
|
|
if (qrScanner) {
|
|
qrScanner.stop();
|
|
}
|
|
});
|
|
|
|
document.getElementById('toggleFlash').addEventListener('click', async () => {
|
|
if (qrScanner) {
|
|
const hasFlash = await qrScanner.hasFlash();
|
|
if (hasFlash) {
|
|
qrScanner.toggleFlash();
|
|
} else {
|
|
alert('Flash not supported on this camera.');
|
|
}
|
|
}
|
|
});
|
|
|
|
document.getElementById('generateQRCode').addEventListener('click', async () => {
|
|
const chat_id = generate_uuid();
|
|
|
|
const url = `${share_url}/backend-api/v2/chat/${encodeURI(chat_id)}`;
|
|
const response = await fetch(url, {
|
|
method: 'POST',
|
|
headers: {'content-type': 'application/json'},
|
|
body: localStorage.getItem(`conversation:${conversation_id}`)
|
|
});
|
|
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: ' + response.statusText;
|
|
return;
|
|
}
|
|
qrcodeStatus.innerText = share;
|
|
qrcodeStatus.href = share;
|
|
document.getElementById("qrcode").innerHTML = '';
|
|
const qrcode = new QRCode(
|
|
document.getElementById("qrcode"),
|
|
share,
|
|
{
|
|
width: 400,
|
|
height: 400,
|
|
colorDark: "#000000",
|
|
colorLight: "#ffffff",
|
|
correctLevel: QRCode.CorrectLevel.H
|
|
});
|
|
});
|
|
|
|
const switchButton = document.getElementById('switchCamera');
|
|
let currentStream = null;
|
|
let facingMode = 'environment';
|
|
|
|
async function startCamera() {
|
|
try {
|
|
if (currentStream) {
|
|
currentStream.getTracks().forEach(track => track.stop());
|
|
}
|
|
|
|
const constraints = {
|
|
video: {
|
|
width: { ideal: 1280 },
|
|
height: { ideal: 1280 },
|
|
facingMode: facingMode
|
|
},
|
|
audio: false
|
|
};
|
|
|
|
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;
|
|
console.log('decoded QR code:', result);
|
|
if (result.data.startsWith(share_url)) {
|
|
window.parent.location = result.data;
|
|
}
|
|
}, {
|
|
highlightScanRegion: true,
|
|
highlightCodeOutline: true,
|
|
});
|
|
await qrScanner.start();
|
|
} catch (error) {
|
|
console.error('Error accessing the camera:', error);
|
|
alert(`Could not access the camera: ${error.message}`);
|
|
}
|
|
}
|
|
|
|
switchButton.addEventListener('click', () => {
|
|
facingMode = facingMode === 'user' ? 'environment' : 'user';
|
|
startCamera();
|
|
});
|
|
|
|
document.getElementById('startCamera').addEventListener('click', () => {
|
|
startCamera();
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |