Web Cam Girata a specchio "instascan"

max1974

Utente Attivo
7 Mar 2013
107
0
16
Scusate ragazzi, sto facendo dei test con la camera del telefono per acquisire QRCode,
funziona tutto perfettamente o quasi, unico problema, quando seleziono la fotocamera posteriore del cell acquisisce l'immagine girata a specchio.
da cosa può dipendere, quali settaggi necessitano....
vi copio tutta la pagina, tanto non è lunghissima.
Help Please
PHP:
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">
  <meta name="author" content="">
  <title>Test Camera</title>

  <script crossorigin="anonymous" integrity="sha384-xBuQ/xzmlsLoJpyjoggmTEz8OWUFM0/RC5BsqQBDX2v5cMvDHcMakNTNrHIW2I5f" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <link crossorigin="anonymous" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" rel="stylesheet">
  <script crossorigin="anonymous" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

</head>

  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal_Camera">
    Launch Camera
  </button>

  <!-- Modal -->
  <div class="modal fade" id="modal_Camera" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLongTitle">Acquisizione Immagine</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <video id="preview" width="100%" height="300px"></video>
        </div>
        <div class="modal-footer">
          <select name="Selcamera" id="Selcamera" data-placeholder="Seleziona Camera" class="form-control control-users-dis-admin" required>
          </select>
        </div>
      </div>
    </div>
  </div>

  <!-- Custom plugin QR-CODE-->
  <script type="text/javascript" src="https://rawgit.com/schmich/instascan-builds/master/instascan.min.js" ></script>


<script>
  $("#modal_Camera").on('shown.bs.modal', function(){
      var scanner = new Instascan.Scanner(
          {
              video: document.getElementById('preview'),
          }
      );
      scanner.addListener('scan', function(content) {
          alert(content);
      });
      Instascan.Camera.getCameras().then(function (cameras){
        if(cameras.length>0){
            $('#Selcamera option').remove();
            for (i=0; i<cameras.length; i++){
                $('#Selcamera').append(new Option(cameras[i].name,i)).trigger("change");
            }
            scanner.start(cameras[0]);
            $('#Selcamera').on('change',function(){
               scanner.start(cameras[this.value]);
            });
        }else{
            alert('No cameras found.');
        }
    }).catch(function(e){
        console.error(e);
        alert(e);
    })
})

  </script>

</body>
</html>
 

max1974

Utente Attivo
7 Mar 2013
107
0
16
Scusate ragazzi, sto facendo dei test con la camera del telefono per acquisire QRCode,
funziona tutto perfettamente o quasi, unico problema, quando seleziono la fotocamera posteriore del cell acquisisce l'immagine girata a specchio.
da cosa può dipendere, quali settaggi necessitano....
vi copio tutta la pagina, tanto non è lunghissima.
Help Please
PHP:
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">
  <meta name="author" content="">
  <title>Test Camera</title>

  <script crossorigin="anonymous" integrity="sha384-xBuQ/xzmlsLoJpyjoggmTEz8OWUFM0/RC5BsqQBDX2v5cMvDHcMakNTNrHIW2I5f" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <link crossorigin="anonymous" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" rel="stylesheet">
  <script crossorigin="anonymous" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

</head>

  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal_Camera">
    Launch Camera
  </button>

  <!-- Modal -->
  <div class="modal fade" id="modal_Camera" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLongTitle">Acquisizione Immagine</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <video id="preview" width="100%" height="300px"></video>
        </div>
        <div class="modal-footer">
          <select name="Selcamera" id="Selcamera" data-placeholder="Seleziona Camera" class="form-control control-users-dis-admin" required>
          </select>
        </div>
      </div>
    </div>
  </div>

  <!-- Custom plugin QR-CODE-->
  <script type="text/javascript" src="https://rawgit.com/schmich/instascan-builds/master/instascan.min.js" ></script>


<script>
  $("#modal_Camera").on('shown.bs.modal', function(){
      var scanner = new Instascan.Scanner(
          {
              video: document.getElementById('preview'),
          }
      );
      scanner.addListener('scan', function(content) {
          alert(content);
      });
      Instascan.Camera.getCameras().then(function (cameras){
        if(cameras.length>0){
            $('#Selcamera option').remove();
            for (i=0; i<cameras.length; i++){
                $('#Selcamera').append(new Option(cameras[i].name,i)).trigger("change");
            }
            scanner.start(cameras[0]);
            $('#Selcamera').on('change',function(){
               scanner.start(cameras[this.value]);
            });
        }else{
            alert('No cameras found.');
        }
    }).catch(function(e){
        console.error(e);
        alert(e);
    })
})

  </script>

</body>
</html>
come non detto appena trovato....
spero serva a qualcuno
nel video aggiungere

mirror: false,

pero poi succede che inverte la frontale.... :) :) :)