Question:
The first step of registering my project has two layout options: one for those who have a QR Code reader (web cam) and another for those who don't.
I need to identify if the user's browser has access to the webcam to read the QR Code, how can I do this verification?
Answer:
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>