Beispiel zur Verwendung der Kamera und zum Screenshot Upload mit JS

Direkt zum Punkt, ein vollständiger Schritt, um die Kamera mit JS zu öffnen und das Bild auf den Backend hochzuladen.

1. Das Öffnen der Kamera wird hauptsächlich mit dem getUserMedia-Verfahren verwendet, und der获得的媒体流 wird in das video-Tag eingefügt.

2. Das Schneiden des Bildes wird hauptsächlich mit canvas-Zeichnung verwendet, wobei das drawImage-Verfahren das video-Inhalt auf den canvas gezeichnet wird.

3. Laden Sie den geschnittenen Inhalt auf den Server hoch und konvertieren Sie den Inhalt des canvas in base.64Das Format hochladen, das Backend (PHP) verwendet file_put_contents, um es in ein Bild zu konvertieren.

Es ist zu beachten, dass bei der Verwendung der Kamera in Browsern außer Chrome或多或少会出现一些问题，这可能是老问题，因此以下代码主要基于chrome编写。

Zum Beispiel die Fehlermeldungen in der neuesten Version von Firefox, warum auch immer.

1. Öffnen Sie die Kamera

getUserMedia gibt es in zwei Versionen, neu und alt. Es wird empfohlen, die neue Version zu verwenden.

Die alte Version befindet sich unter dem Objekt navigator, das von Browser zu Browser unterschiedlich ist.

 // 获取媒体方法（旧方法）
  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);
    });
  } 

Der erste Parameter gibt an, ob ein Video (video) oder Audio (audio) verwendet werden soll.

Der zweite Parameter gibt an, welche Rückrufe nach einem erfolgreichen Aufruf aufgerufen werden sollen, wobei ein Parameter (MediaStream) enthalten ist. In der alten Version konnte die Kamera direkt durch Aufruf von MediaStream.stop() geschlossen werden, aber in der neuen Version ist dies bereits abgekündigt. Es muss MediaStream.getTracks()[index].stop() verwendet werden, um den entsprechenden Track zu schließen.

Der dritte Parameter gibt an, welche Rückrufe nach einem fehlgeschlagenen Aufruf aufgerufen werden sollen.

Die neue Version befindet sich unter dem Objekt 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);
    })
  } 

Ähnlich wie in der alten Version, aber dieser Methode wird ein Promise-Objekt zurückgegeben, das mit then und catch für Erfolg und Fehler-Rückrufe verwendet werden kann.

Es ist zu beachten, dass die Tracks-Array, das von MediaStream.getTracks() zurückgegeben wird, nach dem ersten Parameter in umgekehrter Reihenfolge angeordnet ist.

z.B. jetzt definiert
  video: true,
  audio: true
} 

{1Um die Kamera zu schließen, muss MediaStream.getTracks()[

.stop();

Dasselbe gilt für 0, das dem Audio-Track entspricht

Verwenden Sie createObjectURL, um den MediaStream in das video-Tag einzufügen, um Echtzeit-Medienstromdaten zu speichern (und das Bild kann auch bequem in Echtzeit angezeigt werden)

　　In älteren Versionen wird das.webkitURL-Objekt nicht mehr unterstützt und muss das URL-Objekt verwendet werden200" height="150"></<video width="
  <canvas width="200" height="150"></canvas>
  <p>
    <button id="snap">Bild schneiden</button>
    <button id="close">Kamera schließen</button>
    <button id="upload">Bild hochladen</button>
  </p>
  <img id="uploaded" width="200" height="150" /> 

2. Bild schneiden

Schreiben Sie den Inhalt hinein

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

3. Kamera schließen

 // Kamera schließen
  close.addEventListener('click', function() {
    mediaStreamTrack && mediaStreamTrack.stop();
  }, false); 

4. Hochgeladenes Bild

canvas.toDataURL('image/png')

// Laden Sie das geschnitten Bild hoch
  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); 

hier die Backend (PHP) den erhaltenen Inhalt in ein Bilddatei speichert

Beachten Sie, dass die base64entfernen Sie die Header-Felder, da sonst das Bild beschädigt und nicht geöffnet werden kann

 <?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' => 'Datei hochladen fehlgeschlagen'));
  } else {
    echo json_encode(array('code' => 200, 'msg' => 'Datei hochgeladen erfolgreich', 'path' => $uploadDir . $fileName));
  }
?> 

完整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'63; 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
    }, function(stream) {
      mediaStreamTrack = stream.getTracks()[0];
      video.src = (window.URL || window.webkitURL).createObjectURL(stream);
      video.play();
    }, function(err) {
      console.log(err);
    });
  }
  // Bild schneiden
  snap.addEventListener('click', function() {
    context.drawImage(video, 0, 0, 200, 150);
  }, false);
  // Kamera schließen
  close.addEventListener('click', function() {
    mediaStreamTrack && mediaStreamTrack.stop();
  }, false);
  // Laden Sie das geschnitten Bild hoch
  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>

Das ist der gesamte Inhalt dieses Artikels. Ich hoffe, er hilft Ihnen bei Ihrem Lernen und ich hoffe, dass Sie die Anleitung zur Anrufeheiterung weiters unterstützen.

Erklärung: Der Inhalt dieses Artikels wurde aus dem Internet übernommen und gehört dem Urheber. Der Inhalt wurde von Internetnutzern freiwillig beigesteuert und hochgeladen. Diese Website besitzt keine Eigentumsrechte und hat den Inhalt nicht manuell bearbeitet. Sie übernimmt auch keine rechtlichen Verantwortlichkeiten. Wenn Sie urheberrechtlich relevante Inhalte entdecken, sind Sie herzlich eingeladen, eine E-Mail an notice#w zu senden.3codebox.com (Bitte ersetzen Sie # durch @ beim Senden von E-Mails, um eine Meldung zu erstatten und relevante Beweise bereitzustellen. Sobald überprüft, wird diese Website die fraglichen urheberrechtlichen Inhalte sofort löschen.)