0

quiero implementar un lector de códigos qr en un sistema de laravel, ocupe esto https://github.com/schmich/instascan y me funciona perfecto cuando el proyecto esta en local pero al montarlo al host no detecta la cámara web o no se cual sea el problema ya que no solicita el permiso de la cámara web y nunca se activa, también intente con este https://github.com/cozmo/jsQR pero no manda la petición para permitir el uso de la cámara web

anexo el código tal cual lo subí, resaltando que el archivo js también se encontraba

<html>
<head>
  <meta charset="utf-8">
  <title>jsQR Demo</title>
  <script src="./jsQR.js"></script>
  <link href="https://fonts.googleapis.com/css?family=Ropa+Sans" rel="stylesheet">
  <style>
    body {
      font-family: 'Ropa Sans', sans-serif;
      color: #333;
      max-width: 640px;
      margin: 0 auto;
      position: relative;
    }

    #githubLink {
      position: absolute;
      right: 0;
      top: 12px;
      color: #2D99FF;
    }

    h1 {
      margin: 10px 0;
      font-size: 40px;
    }

    #loadingMessage {
      text-align: center;
      padding: 40px;
      background-color: #eee;
    }

    #canvas {
      width: 100%;
    }

    #output {
      margin-top: 20px;
      background: #eee;
      padding: 10px;
      padding-bottom: 0;
    }

    #output div {
      padding-bottom: 10px;
      word-wrap: break-word;
    }

    #noQRFound {
      text-align: center;
    }
  </style>
</head>
<body>
  <h1>jsQR Demo</h1>
  <a id="githubLink" href="https://github.com/cozmo/jsQR">View documentation on Github</a>
  <p>Pure JavaScript QR code decoding library.</p>
  <div id="loadingMessage">🎥 Unable to access video stream (please make sure you have a webcam enabled)</div>
  <canvas id="canvas" hidden></canvas>
  <div id="output" hidden>
    <div id="outputMessage">No QR code detected.</div>
    <div hidden><b>Data:</b> <span id="outputData"></span></div>
  </div>
  <script>
    var video = document.createElement("video");
    var canvasElement = document.getElementById("canvas");
    var canvas = canvasElement.getContext("2d");
    var loadingMessage = document.getElementById("loadingMessage");
    var outputContainer = document.getElementById("output");
    var outputMessage = document.getElementById("outputMessage");
    var outputData = document.getElementById("outputData");

    function drawLine(begin, end, color) {
      canvas.beginPath();
      canvas.moveTo(begin.x, begin.y);
      canvas.lineTo(end.x, end.y);
      canvas.lineWidth = 4;
      canvas.strokeStyle = color;
      canvas.stroke();
    }

    // Use facingMode: environment to attemt to get the front camera on phones
    navigator.mediaDevices.getUserMedia({ video: { facingMode: "environment" } }).then(function(stream) {
      video.srcObject = stream;
      video.setAttribute("playsinline", true); // required to tell iOS safari we don't want fullscreen
      video.play();
      requestAnimationFrame(tick);
    });

    function tick() {
      loadingMessage.innerText = "⌛ Loading video..."
      if (video.readyState === video.HAVE_ENOUGH_DATA) {
        loadingMessage.hidden = true;
        canvasElement.hidden = false;
        outputContainer.hidden = false;

        canvasElement.height = video.videoHeight;
        canvasElement.width = video.videoWidth;
        canvas.drawImage(video, 0, 0, canvasElement.width, canvasElement.height);
        var imageData = canvas.getImageData(0, 0, canvasElement.width, canvasElement.height);
        var code = jsQR(imageData.data, imageData.width, imageData.height, {
          inversionAttempts: "dontInvert",
        });
        if (code) {
          drawLine(code.location.topLeftCorner, code.location.topRightCorner, "#FF3B58");
          drawLine(code.location.topRightCorner, code.location.bottomRightCorner, "#FF3B58");
          drawLine(code.location.bottomRightCorner, code.location.bottomLeftCorner, "#FF3B58");
          drawLine(code.location.bottomLeftCorner, code.location.topLeftCorner, "#FF3B58");
          outputMessage.hidden = true;
          outputData.parentElement.hidden = false;
          outputData.innerText = code.data;
        } else {
          outputMessage.hidden = false;
          outputData.parentElement.hidden = true;
        }
      }
      requestAnimationFrame(tick);
    }
  </script>
</body>
</html>

5
  • Puedes añadir por favor, algún fragmento del código que incluiste en tu funcionalidad para que la utilidad y legibilidad de la pregunta no dependa de que los repositorios existan?
    – Alfabravo
    Commented el 13 may. 2020 a las 16:52
  • github.com/schmich/instascan/blob/master/docs/index.html este mismo codigo lo monte con su respectivas clases, y este tambien lo monte github.com/cozmo/jsQR/blob/master/docs/index.html Commented el 13 may. 2020 a las 17:03
  • Entiendo. Vuelvo e insisto ==> para que la utilidad y legibilidad de la pregunta no dependa de que los repositorios existan
    – Alfabravo
    Commented el 13 may. 2020 a las 17:04
  • 1
    El uso de cámara web en navegador requiere que el sitio tenga un certificado SSL vigente y, por supuesto, acceso mediante protocolo seguro (https)
    – Triby
    Commented el 13 may. 2020 a las 17:34
  • soy nuevo en este foro y siempre he encontrado respuestas y preguntas muy interesantes aquí. Qusiera saber si lograste solucionar tu problema porque a mí me pasa lo mismo y no logro solucionar. Mi aplicación de manera local funciona correctamente, pero al subirlo a un hosting gratuito, el botón que hacía el llamado de activar la cámara dejó de funcionar. Commented el 4 abr. 2021 a las 19:54

1 respuesta 1

0

Buenas tardes soy nuevo en este foro...yo tuve el mismo problema..la solución fue adquirir un certificado SSL gratis por un tiempo limitado en SSL.com una vez instalado me funcionó tanto en los móviles como en la página web de mis clientes...en lo posible comprar el certificado SSL en una empresa certificada...

1

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.