Cannot access the camera on a mobile about jsqr

[cozmo]

Hey! A few things

1. I just pushed a change that makes the demo code work on mobile safari. Was missing an attribute there before. The demo code should now work on mobile safari (and Chrome on android).
2. Updated the readme with an explanation of how jsQR thinks about webcams, as well as some resources. That can be viewed here if you're interested.
3. Sadly, according to my research it seems like currently chrome on iOS cannot use webcams, potentially because of a video codec issue.

Sadly this would appear to mean that if you want to use iOS Chrome you're out of luck. However iOS safari works just fine (using the code from the jsQR demo), and once Google/Apple work out their differences and webcams are supported on iOS chrome things should just work.

Going to close this issue as I don't think there's much else to do here unfortunately, but please re-open if you feel differently, always happy to help.

[adriengibrat]

chrome on iPhone use webkit engine (from ios) and have some issues. One of them is reading the video stream in a HTML5 video. Be sure to start reading video stream os the mediaUser inside a handler of an user triggered event (click) and not programatically. Just guessing, need logs to fix your issue. Adrien 2018-02-22 16:51 GMT+01:00 prasadh13 <[email protected]>:

…

I am on iPhone and it cannot access the camera from chrome. Can you suggest a workaround? — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#47>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AADzxxzVnWjUQvccc08au2eZrf5HB_DRks5tXY0egaJpZM4SPiZV> .

[kidanam]

im using the current version of the JS file, https://cozmo.github.io/jsQR/jsQR.js
but the iOs safari does not work for me. Strangely, when i visit your demo, things work, but I cant figure out what im doing wrong.

I have not modified most of your code, just passing in dimensions:

function InitiateQRScan() {
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: {height:300, width:300, 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);
}  return video;  };

Please help!!