<!DOCTYPE html><html> <head> <title>QR Art Scanner with 8th Wall</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/jsQR/1.4.0/jsQR.min.js"></script> <script src="https://apps.8thwall.com/xrweb.js"></script> </head> <body> <video id="video"></video> <canvas id="canvas"></canvas> <div id="art-container"></div> <div id="status-message"></div> <script> const video = document.getElementById("video"); const canvas = document.getElementById("canvas"); const context = canvas.getContext("2d"); const artContainer = document.getElementById("art-container"); // Initialize 8th Wall XR8.addCameraPipelineModules([ XR8.GlTextureRenderer.pipelineModule(), // Draws the camera feed. XR8.XrController.pipelineModule(), // Enables SLAM tracking. XRExtras.AlmostThere.pipelineModule(), // Detects unsupported browsers and gives hints. XRExtras.RuntimeError.pipelineModule(), // Shows an error image on runtime error. XRExtras.Loading.pipelineModule(), // Manages the loading screen on startup. ]); XR8.run({ canvas: document.getElementById("canvas") }); // Camera access and QR code scanning logic using jsQR navigator.mediaDevices .getUserMedia({ video: { facingMode: "environment" } }) .then((stream) => { video.srcObject = stream; video.setAttribute("playsinline", true); video.play(); requestAnimationFrame(tick); }); function tick() { if (video.readyState === video.HAVE_ENOUGH_DATA) { canvas.height = video.videoHeight; canvas.width = video.videoWidth; context.drawImage(video, 0, 0, canvas.width, canvas.height); const imageData = context.getImageData( 0, 0, canvas.width, canvas.height ); const code = jsQR(imageData.data, imageData.width, imageData.height, { inversionAttempts: "dontInvert", }); if (code) { handleDetectedQR(code.data); } } requestAnimationFrame(tick); } function handleDetectedQR(decodedText) { // Trigger animation or art based on QR code if (decodedText === "animation1") { // ... (Animation 1 logic) } else if (decodedText === "art2") { // ... (Art 2 logic) } } function updateStatus(message) { document.getElementById("status-message").innerText = message; } function updateStatus(message) { document.getElementById("status-message").innerText = message; } // Example usage updateStatus("Encendiendo..."); setTimeout(() => { updateStatus("Listo para escanear códigos QR"); }, 2000); function handleDetectedQR(decodedText) { // Trigger animation or art based on QR code // Clear previous art artContainer.innerHTML = ""; // Reset camera and QR code scanning logic video.pause(); video.srcObject = null; video.load(); navigator.mediaDevices .getUserMedia({ video: { facingMode: "environment" } }) .then((stream) => { video.srcObject = stream; video.setAttribute("playsinline", true); video.play(); requestAnimationFrame(tick); }) .catch((error) => { console.error("Error accessing the camera: ", error); alert( "Could not access the camera. Please check your permissions." ); }); } </script> </body></html>