Esempio di apertura della telecamera e screenshot con upload di JS

Per essere diretto, un passo completo per aprire la telecamera e fare screenshot e caricarlo sul backend in JS

1. Aprire la telecamera utilizza principalmente il metodo getUserMedia, quindi inserire il flusso multimediale ottenuto nel tag video

2. La cattura dell'immagine utilizza principalmente canvas per il disegno, utilizzando la metodo drawImage per tracciare il contenuto del video nel canvas

3. Caricare il contenuto tratto sul server, convertire il contenuto del canvas in formato base64 e caricarlo, il backend (PHP) lo converte in immagine tramite file_put_contents

Deve essere notato che, oltre a Chrome, l'uso della telecamera in altri browser può causare problemi in varia misura, potrebbe anche essere un vecchio problema, quindi il seguente codice è principalmente basato su Chrome

Ad esempio, gli errori segnalati nella versione più recente di Firefox, non si sa perché

1. Aprire la telecamera

getUserMedia ha due versioni, nuova e vecchia, è consigliabile utilizzare la versione nuova

La versione precedente si trova sotto l'oggetto navigator, che differisce a seconda del browser

 // 获取媒体方法（旧方法）
  navigator.getMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMeddia || navigator.msGetUserMedia; 

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

Il primo parametro indica se utilizzare il video (video) o l'audio (audio)

Il secondo parametro indica il callback chiamato in caso di successo, che riceve un parametro (MediaStream). Nella versione precedente è possibile chiudere la telecamera direttamente chiamando MediaStream.stop(), ma nella nuova versione è stato dismesso. È necessario utilizzare MediaStream.getTracks()[index].stop() per chiudere il Track corrispondente

Il terzo parametro indica il callback chiamato in caso di fallimento

La nuova versione si trova sotto l'oggetto 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' ? stream : stream.getTracks()[1];
      video.src = (window.URL || window.webkitURL).createObjectURL(stream);
      video.play();}}
    }).catch(function(err) {
      console.log(err);
    })
  } 

Simile alla versione precedente, ma questo metodo restituisce un oggetto Promise, che può essere utilizzato con then e catch per rappresentare i callback di successo e fallimento

Deve essere notato che l'array Tracks restituito da MediaStream.getTracks() è ordinato in senso inverso rispetto al primo parametro

Ad esempio, ora è stato definito

{
  video: true,
  audio: true
} 

Per chiudere la telecamera, è necessario chiamare MediaStream.getTracks()[1].stop();

Analogamente, 0 corrisponde al traccia audio

Utilizzando createObjectURL per scrivere MediaStream nel tag video, è possibile memorizzare i dati di flusso multimediale in tempo reale (e anche visualizzare in tempo reale l'immagine)

Nelle versioni precedenti, l'oggetto webkitURL non è più supportato, è necessario utilizzare l'oggetto URL

　　<video width="200" height="150"></video>
  <canvas width="200" height="150"></canvas>
  <p>
    <button id="snap">Cattura immagine</button>
    <button id="close">Chiudi telecamera</button>
    <button id="upload">Carica immagine</button>
  </p>
  <img id="uploaded" width="200" height="150" /> 

2. Cattura l'immagine

Scrivi il contenuto

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

3. Chiudi la telecamera

 // Chiudi la telecamera
  close.addEventListener('click', function() {
    mediaStreamTrack && mediaStreamTrack.stop();
  }, false); 

4. Carica l'immagine catturata

canvas.toDataURL('image/png')

// Carica l'immagine catturata
  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); 

E qui il backend (PHP) convertirà il contenuto ricevuto in un file immagine per il salvataggio

È necessario notare che è necessario rimuovere l'intestazione di testa del base64 prima di salvare, altrimenti sembra che l'immagine sia danneggiata e non può essere aperta.

 <?php
  $snapData = $_POST['snapData'];
  $snapData = str_replace('data:image/png;base64,', '', $snapData);
  // $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' => 'File caricato fallito'));
  } else {
    echo json_encode(array('code' => 200, 'msg' => 'File caricato con successo', 'path' => $uploadDir . $fileName));
  }
?> 

Completo codice JS

<script type="text/javascript" src="jquery.js"></script>
  <script type="text/javascript">
  function $(elem) {
    return document.querySelector(elem);
  }
  // 获取媒体方法（旧方法）
  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;
  // 获取媒体方法（新方法）
  // 使用新方法打开摄像头
  if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
    navigator.mediaDevices.getUserMedia({
      video: true,
      audio: true
    }).then(function(stream) {
      console.log(stream);
      mediaStreamTrack = typeof stream.stop === 'function' ? stream : stream.getTracks()[1];
      video.src = (window.URL || window.webkitURL).createObjectURL(stream);
      video.play();}}
    }).catch(function(err) {
      console.log(err);
    })
  }
  // 使用旧方法打开摄像头
  else if (navigator.getMedia) {
    navigator.getMedia({
      video: true
    
      mediaStreamTrack = stream.getTracks()[0];
      video.src = (window.URL || window.webkitURL).createObjectURL(stream);
      video.play();}}
    }, function(err) {
      console.log(err);
    });
  }
  // Cattura l'immagine
  snap.addEventListener('click', function() {
    context.drawImage(video, 0, 0, 200, 150);
  }, false);
  // Chiudi la telecamera
  close.addEventListener('click', function() {
    mediaStreamTrack && mediaStreamTrack.stop();
  }, false);
  // Carica l'immagine catturata
  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>

Questo è tutto il contenuto dell'articolo, speriamo che sia utile per la tua apprendimento e che tu sostenga fortemente la guida di urlania.

Dichiarazione: il contenuto di questo articolo è stato tratto da Internet, il copyright è di proprietà del rispettivo autore, il contenuto è stato contribuito e caricato volontariamente dagli utenti di Internet, questo sito non detiene il diritto di proprietà, non è stato editato manualmente e non assume alcuna responsabilità legale. Se trovi contenuti sospetti di copyright, ti preghiamo di inviare una e-mail a: notice#oldtoolbag.com (al momento dell'invio dell'e-mail, sostituisci # con @) per segnalare il problema e fornire prove pertinenti. Una volta verificata, questo sito rimuoverà immediatamente il contenuto sospetto di copyright.