I have a JS code that is supposed to return an output after something happens, but the block cant repeat itself so it cant be put in a set variable block. how do i make it report the answer without repeating itself
um can u show the code
let isRunning = false;
function startWebcam(onQRCodeDetected) {
if (isRunning) {
console.log('Webcam is already running. Please wait until it finishes.');
return;
}
isRunning = true;
const modal = document.createElement('div');
modal.style.position = 'fixed';
modal.style.top = '50%';
modal.style.left = '50%';
modal.style.transform = 'translate(-50%, -50%)';
modal.style.background = '#f4f4f9';
modal.style.borderRadius = '8px';
modal.style.padding = '20px';
modal.style.boxShadow = '0 4px 12px rgba(0, 0, 0, 0.2)';
modal.style.zIndex = 1000;
modal.style.display = 'none';
document.body.appendChild(modal);
const video = document.createElement('video');
video.style.width = '640px';
video.style.height = '480px';
video.style.borderRadius = '8px';
video.style.boxShadow = '0 2px 8px rgba(0, 0, 0, 0.2)';
video.style.transform = 'scaleX(-1)';
video.autoplay = true;
video.style.backgroundColor = '#000';
video.style.position = 'relative';
modal.appendChild(video);
const closeButton = document.createElement('button');
closeButton.textContent = '×';
closeButton.style.position = 'absolute';
closeButton.style.top = '10px';
closeButton.style.right = '10px';
closeButton.style.background = '#ff5f5f';
closeButton.style.border = 'none';
closeButton.style.borderRadius = '50%';
closeButton.style.fontSize = '24px';
closeButton.style.color = '#fff';
closeButton.style.width = '40px';
closeButton.style.height = '40px';
closeButton.style.display = 'flex';
closeButton.style.alignItems = 'center';
closeButton.style.justifyContent = 'center';
closeButton.style.cursor = 'pointer';
closeButton.style.zIndex = 1001;
closeButton.style.transition = 'background-color 0.3s ease, transform 0.3s ease';
closeButton.addEventListener('mouseover', () => {
closeButton.style.backgroundColor = '#ff4c4c';
});
closeButton.addEventListener('mouseout', () => {
closeButton.style.backgroundColor = '#ff5f5f';
});
closeButton.onclick = closeWebcam;
modal.appendChild(closeButton);
const canvas = document.createElement('canvas');
canvas.width = 640;
canvas.height = 480;
canvas.style.position = 'absolute';
canvas.style.top = '0';
canvas.style.left = '0';
canvas.style.borderRadius = '8px';
modal.appendChild(canvas);
const context = canvas.getContext('2d');
const fileInput = document.createElement('input');
fileInput.type = 'file';
fileInput.accept = 'image/*';
fileInput.style.marginTop = '20px';
fileInput.style.display = 'block';
fileInput.onchange = handleFileUpload;
modal.appendChild(fileInput);
function drawSquare() {
const size = 300;
const x = (canvas.width - size) / 2;
const y = (canvas.height - size) / 2;
const radius = 20;
context.clearRect(0, 0, canvas.width, canvas.height);
context.strokeStyle = 'white';
context.lineWidth = 5;
context.lineJoin = 'round';
context.lineCap = 'round';
context.beginPath();
context.moveTo(x + radius, y);
context.arcTo(x + size, y, x + size, y + size, radius);
context.arcTo(x + size, y + size, x, y + size, radius);
context.arcTo(x, y + size, x, y, radius);
context.arcTo(x, y, x + size, y, radius);
context.closePath();
context.stroke();
}
let stream = null;
let isProcessing = true;
function closeWebcam() {
if (stream) {
stream.getTracks().forEach(track => track.stop());
}
document.body.removeChild(modal);
isRunning = false;
}
function updateCapturedImage() {
if (!isProcessing) return;
const size = 300;
const x = (canvas.width - size) / 2;
const y = (canvas.height - size) / 2;
const tempCanvas = document.createElement('canvas');
tempCanvas.width = size;
tempCanvas.height = size;
const tempContext = tempCanvas.getContext('2d');
tempContext.drawImage(video, x, y, size, size, 0, 0, size, size);
const imageData = tempContext.getImageData(0, 0, size, size);
const data = imageData.data;
const threshold = 100;
for (let i = 0; i < data.length; i += 4) {
const avg = (data[i] + data[i + 1] + data[i + 2]) / 3;
const binary = avg > threshold ? 255 : 0;
data[i] = data[i + 1] = data[i + 2] = binary;
}
tempContext.putImageData(imageData, 0, 0);
const formData = new FormData();
formData.append('file', dataURItoBlob(tempCanvas.toDataURL('image/png')), 'image.png');
fetch('https://api.qrserver.com/v1/read-qr-code/', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => {
if (data && data[0] && data[0].symbol && data[0].symbol[0] && data[0].symbol[0].data) {
const result = data[0].symbol[0].data;
onQRCodeDetected(result);
isProcessing = false;
closeWebcam();
}
})
.catch(error => {
console.error('Error reading QR code:', error);
});
requestAnimationFrame(updateCapturedImage);
}
function dataURItoBlob(dataURI) {
const byteString = atob(dataURI.split(',')[1]);
const mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
const ab = new ArrayBuffer(byteString.length);
const ia = new Uint8Array(ab);
for (let i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
return new Blob([ab], { type: mimeString });
}
function handleFileUpload(event) {
const file = event.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = function(e) {
const img = new Image();
img.onload = function() {
const tempCanvas = document.createElement('canvas');
tempCanvas.width = img.width;
tempCanvas.height = img.height;
const tempContext = tempCanvas.getContext('2d');
tempContext.drawImage(img, 0, 0);
const size = 300;
const x = (tempCanvas.width - size) / 2;
const y = (tempCanvas.height - size) / 2;
const imageData = tempContext.getImageData(x, y, size, size);
const data = imageData.data;
const threshold = 100;
for (let i = 0; i < data.length; i += 4) {
const avg = (data[i] + data[i + 1] + data[i + 2]) / 3;
const binary = avg > threshold ? 255 : 0;
data[i] = data[i + 1] = data[i + 2] = binary;
}
tempContext.putImageData(imageData, 0, 0);
const formData = new FormData();
formData.append('file', dataURItoBlob(tempCanvas.toDataURL('image/png')), 'image.png');
fetch('https://api.qrserver.com/v1/read-qr-code/', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => {
if (data && data[0] && data[0].symbol && data[0].symbol[0] && data[0].symbol[0].data) {
const result = data[0].symbol[0].data;
onQRCodeDetected(result);
isProcessing = false;
closeWebcam();
}
})
.catch(error => {
console.error('Error reading QR code:', error);
});
};
img.src = e.target.result;
};
reader.readAsDataURL(file);
}
}
navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' } })
.then(mediaStream => {
stream = mediaStream;
video.srcObject = mediaStream;
video.play();
modal.style.display = 'block';
function updateCanvas() {
drawSquare();
requestAnimationFrame(updateCanvas);
}
updateCanvas();
updateCapturedImage();
})
.catch(err => {
console.error('Error accessing webcam: ', err);
isRunning = false;
});
}
startWebcam(result => {
console.log('QR Code Detected:', result);
alert('QR Code Detected: ' + result);
});
@bh any ideas
Recursion?
Do you want it to repeat itself to be put in a set variable block or not?
no. i want to set a variable to the output
run the code normally then try running in a set variable block