Exemple de code pour ouvrir la caméra et capturer une image avec JS

Passons directement au sujet principal, comment ouvrir la caméra avec JavaScript et télécharger l'image capturée sur le serveur

1. Ouvrir la caméra utilise principalement la méthode getUserMedia, puis met le flux de média obtenu dans l'étiquette video

2. Capturer l'image utilise principalement le dessin sur canvas, en utilisant la méthode drawImage pour dessiner le contenu de video sur canvas

3. Télécharger le contenu capturé sur le serveur, convertir le contenu de canvas en base64En format upload, le serveur (PHP) utilise file_put_contents pour le convertir en image

Il faut noter que, en dehors de Chrome, l'utilisation de la caméra peut poser des problèmes de plus ou moins, ce qui pourrait être un problème ancien. C'est pourquoi le code suivant est principalement basé sur Chrome

Par exemple, les erreurs signalées dans la dernière version de Firefox, sans que l'on sache pourquoi

1. Ouvrir la caméra

getUserMedia a deux versions, l'ancienne et la nouvelle. Il est recommandé d'utiliser la nouvelle version

L'ancienne version se trouve sous l'objet navigator, et peut varier d'un navigateur à l'autre

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

Le premier paramètre indique si l'on doit utiliser la vidéo (video) ou l'audio (audio)

Le deuxième paramètre indique la fonction de rappel après le succès de l'appel, qui prend un paramètre (MediaStream). Dans l'ancienne version, il était possible de fermer la caméra directement en appelant MediaStream.stop(). Cependant, dans la nouvelle version, cela est devenu obsolète. Il faut utiliser MediaStream.getTracks()[index].stop() pour fermer le Track correspondant

Le troisième paramètre indique la fonction de rappel après l'échec de l'appel

La nouvelle version se trouve sous l'objet 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);
    })
  } 

Comme dans l'ancienne version, mais cette méthode retourne un objet Promise, que l'on peut utiliser avec then et catch pour les retours de succès et d'échec

Il est nécessaire de noter que l'array de Tracks retourné par MediaStream.getTracks() est trié en ordre décroissant du premier paramètre

}

par exemple, maintenant définir
  video: true,
  audio: true
} 

{1Pour fermer la caméra, il faut appeler MediaStream.getTracks()[

].stop();

De même, 0 correspond à la piste audio

Utilisez createObjectURL pour écrire le MediaStream dans l'étiquette video, ce qui permet de stocker les données de flux média en temps réel (et de visualiser l'image en temps réel)

　　L'ancienne version de l'objet webkitURL n'est plus supportée, il faut utiliser l'objet URL200" height="150"></<video width="
  <canvas width="200" height="150"></canvas>
  <p>
    <button id="snap">Capturer l'image</button>
    <button id="close">Fermer la caméra</button>
    <button id="upload">Téléverser l'image</button>
  </p>
  <img id="uploaded" width="200" height="150" /> 

2. Capturer l'image

il suffit d'écrire le contenu

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

3. Fermer la caméra

 // Fermer la caméra
  close.addEventListener('click', function() {
    mediaStreamTrack && mediaStreamTrack.stop();
  }, false); 

4. Téléverser l'image capturée

canvas.toDataURL('image/png')

// Télécharger l'image capturée
  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); 

quant à l'arrière-plan (PHP), il convertit le contenu obtenu en fichier image pour l'enregistrer

Il convient de noter que pour convertir base64supprimer les champs d'en-tête de l'image avant de l'enregistrer, sinon l'image semble endommagée et ne peut pas être ouverte.

 <?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' => 'Le téléversement du fichier a échoué'));
  } else {
    echo json_encode(array('code' => 200, 'msg' => 'Le téléversement du fichier a réussi', '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);
    });
  }
  // Capturer l'image
  snap.addEventListener('click', function() {
    context.drawImage(video, 0, 0, 200, 150);
  }, false);
  // Fermer la caméra
  close.addEventListener('click', function() {
    mediaStreamTrack && mediaStreamTrack.stop();
  }, false);
  // Télécharger l'image capturée
  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>

Voici la totalité du contenu de cet article, j'espère qu'il vous sera utile dans vos études, et j'espère que vous soutiendrez également le tutoriel de cri.

Déclaration : le contenu de cet article est hébergé sur Internet, et les droits d'auteur appartiennent aux propriétaires respectifs. Le contenu est fourni par les utilisateurs d'Internet de manière volontaire et est téléchargé par eux-mêmes. Ce site n'appartient pas à la propriété, n'a pas été traité par l'éditeur humain et n'assume aucune responsabilité juridique connexe. Si vous trouvez du contenu suspect de violation des droits d'auteur, veuillez envoyer un e-mail à : notice#oldtoolbag.com (veuillez remplacer # par @ lors de l'envoi d'un e-mail pour signaler des infractions, et fournir des preuves pertinentes. Une fois vérifié, ce site supprimera immédiatement le contenu suspect d'infractions.