Identify if your computer has a QR Code reader

Asked

Viewed 1,595 times

5

The first stage of registration of my project has two layout options: one for those who have QR Code reader (web cam) and another for those who do not have.

I need to identify if the user’s browser has access to webcam for reading the QR Code, how can I do this check?

javascript html5 qrcode webcam

1 answer

3


You can use HTML5 to detect whether or not the user has a video recording device available:

navigator.getMedia = ( navigator.getUserMedia ||
                      navigator.webkitGetUserMedia ||
                      navigator.mozGetUserMedia ||
                      navigator.msGetUserMedia);

navigator.getMedia({video: true}, function() {
  //Câmera disponível
  $('.com-leitor').show();
  $('.sem-leitor').hide();
}, function() {
  //Câmera não disponível
  $('.com-leitor').hide();
  $('.sem-leitor').show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class='com-leitor'>SUCCESS! =)</div>

<div class='sem-leitor'>FAIL! =(</div>

Source.

  • One he even identified the cam, but at the time of showing the content it did not work. I put $('.com-leitor').hide(); and $('.sem-leitor').hide(); there in the middle of the code that you posted a $('.com-leitor').show(); and $('.sem-leitor').show(); ...

  • @Erick I modified the answer to include a functional test.

  • Cool I understand the logic I’m working here, it’s working for now but maybe I’m wrong. My system is as follows: User enters the home and has two options Login or Register if you click on the registration this first div with the login fields and registration button disappears and enters another with the next step and at that time the system check if you have webcam or not. I will try other options instead of Hide() and show(). vlw

  • @Erick without stress - in case of any other doubt, feel free to create another question!

  • Apparently it worked with removeClass. I tested on Chrome once with the camera enabled and another with it locked and worked, I will test on other browsers. thanks.

Browser other questions tagged javascript html5 qrcode webcam

You are not signed in. Login or sign up in order to post.