Ejemplo de abrir la cámara y tomar una foto con JS y subir

Vamos al grano, un paso completo de abrir la cámara y subir la captura a un servidor en JS.

1. Abrir la cámara se realiza principalmente con el método getUserMedia, luego se coloca el flujo de medios obtenido en la etiqueta video.

2. Capturar la imagen se realiza principalmente con el dibujo en canvas, utilizando el método drawImage para dibujar el contenido de video en el canvas.

3. Subir el contenido capturado al servidor, convertir el contenido de canvas en base.64Se carga en formato, el servidor (PHP) lo convierte en imagen a través de file_put_contents.

Es necesario prestar atención, en navegadores fuera de Chrome, el uso de la cámara puede presentar problemas en mayor o menor medida, puede ser un problema antiguo, por lo que el siguiente código se basa principalmente en Chrome.

Por ejemplo, el error informado en el nuevo FireFox, no sé por qué.

1. Abrir la cámara

getUserMedia tiene dos versiones, nueva y antigua, se recomienda usar la versión nueva.

La versión anterior se encuentra bajo el objeto navigator, que varía según el navegador.

 // método de obtención de medios (método antiguo)
  navigator.getMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMeddia || navigator.msGetUserMedia; 

if (navigator.getMedia) {
    navigator.getMedia({
      video: true
    }, function(stream) {
      mediaStreamTrack = stream.getTracks()[0];
      video.src = (window.URL || window.webkitURL).createObjectURL(stream);
      video.play();
    }, function(err) {
      console.log(err);
    });
  } 

El primer parámetro indica si se debe usar video (video) o audio (audio).

El segundo parámetro indica la retroalimentación de llamada después del éxito, que contiene un parámetro (MediaStream). En la versión anterior, se podía cerrar directamente la cámara mediante la llamada MediaStream.stop(). Sin embargo, en la nueva versión ya se ha descontinuado. Se debe usar MediaStream.getTracks()[index].stop() para cerrar el correspondiente Track.

El tercer parámetro indica la retroalimentación de llamada después del fracaso.

La nueva versión se encuentra bajo el objeto navigator.mediaDevices.

if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
    navigator.mediaDevices.getUserMedia({
      video: true,
      audio: true
    }).then(function(stream) {
      console.log(stream);
      mediaStreamTrack = typeof stream.stop === 'function' &63; stream : stream.getTracks()[1];
      video.src = (window.URL || window.webkitURL).createObjectURL(stream);
      video.play();
    }).catch(function(err) {
      console.log(err);
    })
  } 

Al igual que en la versión anterior, este método devuelve un objeto Promise, que se puede usar then y catch para representar la retroalimentación de éxito y fracaso.

Es necesario tener en cuenta que el array de Tracks devuelto por MediaStream.getTracks() está ordenado en orden inverso del primer parámetro.

por ejemplo, ahora se ha definido
  video: true,
  audio: true
} 

{1Para cerrar la cámara, es necesario llamar a MediaStream.getTracks()[

].stop();

Del mismo modo, 0 corresponde al track de audio

Usar createObjectURL para escribir MediaStream en la etiqueta video, lo que permite almacenar datos de flujo de medios en tiempo real (también es fácil de ver en tiempo real)

　　La versión anterior de webkitURL objeto ya no se admite, se debe usar el objeto URL200" height="150"></<video width="
  <canvas width="200" height="150"></canvas>
  <p>
    <button id="snap">Capturar imagen</button>
    <button id="close">Cerrar cámara</button>
    <button id="upload">Subir imagen</button>
  </p>
  <img id="uploaded" width="200" height="150" /> 

2. Capturar imagen

escribe el contenido

 // Capturar imagen
  snap.addEventListener('click', function() {
    context.drawImage(video, 0, 0, 200, 150);
  }, false); 

3. Cerrar la cámara

 // Cerrar la cámara
  close.addEventListener('click', function() {
    mediaStreamTrack && mediaStreamTrack.stop();
  }, false); 

4. Subir la imagen capturada

canvas.toDataURL('image/png')

// Subir la imagen capturada
  upload.addEventListener('click', function() {
    jQuery.post('/uploadSnap.php', {
      snapData: canvas.toDataURL('image/png')
    }).done(function(rs) {
      rs = JSON.parse(rs);
      console.log(rs);
      uploaded.src = rs.path;
    }).fail(function(err) {
      console.log(err);
    });
  }, false); 

mientras que aquí el backend (PHP) convierte el contenido obtenido en un archivo de imagen para guardarlo

Es importante tener en cuenta que para convertir base64eliminar los campos de información de cabecera antes de guardar, de lo contrario, parece que la imagen está dañada y no se puede abrir

 <?php
  
  $snapData = str_replace('data:image/png;base64
  // $snapData = str_replace(' ', '+', $snapData);
  $img = base64_decode($snapData);
  $uploadDir = 'upload/';
  $fileName = date('YmdHis', time()) . uniqid();
  if (!(file_put_contents($uploadDir . $fileName, $img))) {
    echo json_encode(array('code' => 500, 'msg' => 'La subida del archivo ha fallado'));
  } else {
    echo json_encode(array('code' => 200, 'msg' => 'El archivo se ha subido con éxito', 'path' => $uploadDir . $fileName));
  }
?> 

código JS completo

<script type="text/javascript" src="jquery.js"></script>
  <script type="text/javascript">
  function $(elem) {
    return document.querySelector(elem);
  }
  // método de obtención de medios (método antiguo)
  navigator.getMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMeddia || navigator.msGetUserMedia;
  var canvas = $('canvas'),
    context = canvas.getContext('2d'),
    video = $('video'),
    snap = $('#snap'),
    close = $('#close'),
    upload = $('#upload'),
    uploaded = $('#uploaded'),
    mediaStreamTrack;
  // método de obtención de medios (método nuevo)
  // usar el método nuevo para abrir la cámara
  if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
    navigator.mediaDevices.getUserMedia({
      video: true,
      audio: true
    }).then(function(stream) {
      console.log(stream);
      mediaStreamTrack = typeof stream.stop === 'function' &63; stream : stream.getTracks()[1];
      video.src = (window.URL || window.webkitURL).createObjectURL(stream);
      video.play();
    }).catch(function(err) {
      console.log(err);
    })
  }
  // usar el método antiguo para abrir la cámara
  else if (navigator.getMedia) {
    navigator.getMedia({
      video: true
    }, function(stream) {
      mediaStreamTrack = stream.getTracks()[0];
      video.src = (window.URL || window.webkitURL).createObjectURL(stream);
      video.play();
    }, function(err) {
      console.log(err);
    });
  }
  // Capturar imagen
  snap.addEventListener('click', function() {
    context.drawImage(video, 0, 0, 200, 150);
  }, false);
  // Cerrar la cámara
  close.addEventListener('click', function() {
    mediaStreamTrack && mediaStreamTrack.stop();
  }, false);
  // Subir la imagen capturada
  upload.addEventListener('click', function() {
    jQuery.post('/uploadSnap.php', {
      snapData: canvas.toDataURL('image/png')
    }).done(function(rs) {
      rs = JSON.parse(rs);
      console.log(rs);
      uploaded.src = rs.path;
    }).fail(function(err) {
      console.log(err);
    });
  }, false);
  </script>

Este es el contenido completo del artículo, espero que sea útil para su aprendizaje y también espero que todos los amigos apoyen el tutorial de clamor.

Declaración: El contenido de este artículo se ha obtenido de la red, pertenece al autor original, el contenido se ha contribuido y subido por los usuarios de Internet de manera autónoma. Este sitio no posee los derechos de propiedad, no ha sido editado por humanos y no asume ninguna responsabilidad legal relacionada. Si encuentra contenido sospechoso de copyright, por favor envíe un correo electrónico a: notice#oldtoolbag.com (al enviar un correo electrónico, por favor reemplace # con @) para denunciar, y proporcione evidencia relevante. Una vez confirmado, este sitio eliminará inmediatamente el contenido sospechoso de infracción.