QR code scanning using Mobile Camera in Shiny Web App

Question

I am trying to develop a shiny webapp where users can scan the QR codes from their mobile phones.

I have written the below code for scanning the QR codes using javascript and shiny. The code is accessing the mobile phone camera but is unable to read the QR code.

What I am doing wrong??

library(shiny)
library(shinyjs)

# Define UI
ui <- fluidPage(
  useShinyjs(),
  titlePanel("QR Code Scanner"),
  tags$script(src="https://cdnjs.cloudflare.com/ajax/libs/quagga/0.12.1/quagga.min.js"),
  div(id="scanner-container", style="width: 100%; height: 400px;"),
  actionButton("button", "Scan QR Code"),
  verbatimTextOutput("result"),
  tags$script(
    '
    // Listen for "jsCode" messages sent by the server
    Shiny.addCustomMessageHandler("jsCode", function(jsCode) {
      eval(jsCode);
    });
    '
  )
)

# Define server
server <- function(input, output, session) {
  # Initialize scanner
  observeEvent(input$button, {
    jsCode <- '
    Quagga.init({
      inputStream : {
        name : "Live",
        type : "LiveStream",
        target: document.querySelector("#scanner-container")
      },
      decoder : {
        readers : ["qrcode_reader"]
      }
    }, function(err) {
      if (err) {
        console.log(err);
        return
      }
      Quagga.start();
    });

    Quagga.onDetected(function(result) {
      Shiny.setInputValue("qr_code", result.codeResult.code);
      Quagga.stop();
    });
  '
    session$sendCustomMessage(type="jsCode", message=jsCode)
  })
  
  # Output scanned QR code
  output$result <- renderText({
    input$qr_code
  })
}

# Run the application
shinyApp(ui = ui, server = server)