QR code scan using mobile back camera in shiny web app

Hi,

I am developing a shiny web application that enables users to read QR codes using their mobile camera. At present, I am utilizing the quadrangle library to capture images from the camera and decode the codes. However, I am exploring alternative methods that would enable me to read QR codes without capturing images.

I have attempted to use JavaScript to access the mobile camera and capture the image for QR code decoding, but I have not been able to resolve the decoding issue. Can anyone suggest an approach that would allow me to read QR codes without capturing images using JavaScript?

Below is the javascript code which I am using currently

library(shiny)
library(shinyjs)
library(base64enc)
library(quadrangle)
library(magick)

ui <- fluidPage(
useShinyjs(),

tags$video(id = "video", width = 300, height = 300),
tags$canvas(id = "canvas", width = 300, height = 300),
actionButton("scan", "Scan QR Code"),
verbatimTextOutput("result")
)

server <- function(input, output) {
observeEvent(input$scan, {
runjs("
navigator.mediaDevices.getUserMedia({ video: true }).then(function(stream) {
var video = document.getElementById('video');
video.srcObject = stream;
video.play();
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
setInterval(function() {
context.drawImage(video, 0, 0, 300, 300);
var imageData = context.getImageData(0, 0, 300, 300);
var base64Image = canvas.toDataURL('image/png');
Shiny.onInputChange('imageData', base64Image);
}, 100);
});
")
})

output$result <- renderPrint({
req(input$imageData)
imageData <- input$imageData
# Remove the "data:image/png;base64," prefix from the base64 image data
imageData <- gsub("data:image/png;base64,", "", imageData)
# Convert the base64 image data to binary
binaryImageData <- base64decode(imageData)

# Read the binary image data into an image object
magickImage <- image_read(binaryImageData)

# Decode the QR code using qr_decode()
result <- qr_scan(magickImage)
# Extract the decoded text from the QR code
if (!is.null(result$text)) {
  return(result$text)
} else {
  return("No QR code detected")
}

})
}

shinyApp(ui, server)

This topic was automatically closed 21 days after the last reply. New replies are no longer allowed.

If you have a query related to it or one of the replies, start a new topic and refer back with a link.