Home / Questions / 213938
Accepted
Danilo
Asked: 2020-11-16 05:22:55 +0800 CST 2020-11-16 05:22:55 +0800 CST

What option of the html5 video tag is to focus and not leave the camera in selfie mode?

  • 772

Currently I use a video tag to read QR code:

 <video id="preview" width="390" height="332"></video>

But the problem is that it activates the camera in selfie mode. What I want is that with the cell phone, I focus with the camera in normal mode, and not see myself in the video.

I would like to know if the video label has any option to give it away. Is the question understood?

Additional information: To read QR code I use the instascan.min.js library

https://github.com/schmich/instascan

html5

3 Answers

  1. The library itself gives you the solution :

    Instascan.Camera.getCameras()

    List available video devices. Return promise.

    .then(function (cameras) { ... }) Called when cameras are available.

    cameras: Array of Instascan. Camera instances available for use.

    Therefore, after creating an instance with

    new Instascan.Scanner(...);

    You can search the cameras and choose the one you want:

    scanner.start(camera);

    In your example what happens is that you use the first camera found (cameras[0]):

    let scanner = new Instascan.Scanner({ video: document.getElementById('preview') });
      scanner.addListener('scan', function (content) {
        console.log(content);
      });
      Instascan.Camera.getCameras().then(function (cameras) {
        if (cameras.length > 0) {
          scanner.start(cameras[0]);
        } else {
          console.error('No cameras found.');
        }
      }).catch(function (e) {
        console.error(e);
      });

    But nothing prevents you from getting the list of cameras, which are objects of the form:

    {
  id: <id_de_la_camara>,
  name: '<nombre de la camara>'
}

    And mount a select for the user to choose.

    • 1
  2. Best Answer

    you can do it like this:

    if (!navigator.mediaDevices || !navigator.mediaDevices.enumerateDevices) {
   document.write("enumerateDevices() not supported.");
}

navigator.mediaDevices.enumerateDevices()
  .then(function(devices) {
    devices.forEach(function(device) {
      console.log(device.kind + ": " + device.label +
        " id = " + device.deviceId);
        #return device.deviceId
    });
  })
  .catch(function(err) {
    console.log(err.name + ": " + error.message);
  });

    an example:
    https://simpl.info/getusermedia/sources/

    github project:
    https://github.com/samdutton/simpl/blob/gh-pages/getusermedia/sources/js/main.js

    • 0

  3. I have done it in the following way and it works perfectly. I hope I can help you:

    <video id="preview" width="950" height="1300"></video>

    <script>
        let scanner = new Instascan.Scanner(
            {
                video: document.getElementById('preview'), mirror: false
            }
        );
        scanner.addListener('scan', function(content) {
            window.open(''+ content);
        });
        Instascan.Camera.getCameras().then(cameras => 
        {
            if(cameras.length > 0){
                scanner.start(cameras[1]);
            } else {
                console.error("No se ha detectado Camara");
            }
        });
    </script>
    • 0