Javascript implémente la prise de photos-Questions et réponses frontales-php.cn

Javascript implémente la prise de photos

PHPz

Libérer： 2023-05-17 18:49:38

original

1080 Les gens l'ont consulté

JavaScript est un langage de script basé sur des navigateurs Web qui peut être utilisé pour développer diverses pages Web interactives et dynamiques. Ce langage peut être utilisé pour créer des fenêtres contextuelles dans des pages Web, valider les entrées des utilisateurs, manipuler de manière interactive les éléments de la page, etc. Cet article vous expliquera comment utiliser JavaScript pour prendre des photos.

Pour implémenter JavaScript pour prendre des photos, nous devons utiliser l'API WebRTC. WebRTC est un protocole de communication Web en temps réel. Il s'agit d'une plate-forme technologique open source et facile à utiliser qui peut réaliser une communication point à point (P2P), de l'audio et de la vidéo en temps réel, la transmission de données, le partage de fichiers et autres. fonctions. Grâce à cette plate-forme, nous pouvons passer des appels audio et vidéo dans le navigateur sans télécharger ni installer de plug-ins ou de logiciels.

Étape 1 : Préparez le code HTML et CSS

Tout d'abord, nous devons ajouter la balise vidéo au fichier HTML pour afficher la vidéo surveillée par la caméra en temps réel. Ici, nous définissons la largeur et la hauteur de la balise vidéo et y ajoutons des styles CSS.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>拍照片</title>

    <style>
      video {
        width: 100%;
        height: auto;
        max-height: 480px;
        border: 1px solid #ccc;
      }

      button {
        width: 100%;
        height: 40px;
        margin-top: 10px;
        background-color: #4CAF50;
        color: white;
        border: none;
        border-radius: 3px;
        cursor: pointer;
      }
    </style>
  </head>

  <body>
    <div>
      <video id="video" autoplay></video>
      <button id="snap">拍照</button>
    </div>

    <script src="script.js"></script>
  </body>
</html>

Copier après la connexion

Étape 2 : Préparer le code JavaScript

Dans le fichier HTML, nous avons introduit le fichier JavaScript script.js. Dans ce fichier, nous devons utiliser la fonction getUserMedia(), qui est utilisée pour obtenir les données de streaming du périphérique multimédia de l'utilisateur. La fonction getUserMedia() doit transmettre un paramètre, qui est un objet périphérique multimédia, utilisé pour spécifier le type de données de flux à obtenir (comme un microphone, une caméra, etc.).

Lorsque l'utilisateur autorise le site Web à utiliser la caméra, nous pouvons lire la vidéo en temps réel sur la page. Ensuite, nous pouvons ajouter un écouteur d'événement de clic sur le bouton "Photo". Lorsque l'utilisateur clique sur le bouton "Photo", nous pouvons utiliser l'API Canvas pour capturer l'image actuelle de la vidéo et l'enregistrer en tant qu'URL de données codées en Base64. .

const video = document.getElementById('video');
const snap = document.getElementById('snap');

// 获取用户摄像头的流数据
navigator.mediaDevices.getUserMedia({ video: true, audio: false })
  .then(function(stream) {
    // 在video标签中播放实时视频
    video.srcObject = stream;
    video.play();
  })
  .catch(function(err) {
    console.log('Error: ' + err);
  });

// 截取当前帧并保存为Base64编码的数据URL
function takeSnapshot() {
  const canvas = document.createElement('canvas');
  canvas.width = video.videoWidth;
  canvas.height = video.videoHeight;

  const context = canvas.getContext('2d');
  context.drawImage(video, 0, 0, canvas.width, canvas.height);

  const dataURL = canvas.toDataURL('image/png');

  // 显示截图
  const img = document.createElement('img');
  img.src = dataURL;
  document.body.appendChild(img);

  // 保存截图
  const link = document.createElement('a');
  link.href = dataURL;
  link.download = 'snapshot.png';
  link.click();
}

snap.addEventListener('click', takeSnapshot);

Copier après la connexion

Troisième étape : Exécuter le code

Maintenant, nous avons tout le code prêt à être exécuté dans le navigateur. Utilisez un navigateur prenant en charge WebRTC (tel que Chrome ou Firefox) pour accéder à ce fichier HTML, cliquez sur le bouton « Prendre une photo » et vous pourrez capturer une photo à partir de l'appareil photo. Cette photo peut être affichée sur la page ou téléchargée et enregistrée.

Résumé

En utilisant l'API WebRTC et l'API Canvas, nous pouvons facilement implémenter la fonction de prise de photo JavaScript. Cette fonctionnalité peut être utilisée dans diverses applications Web telles que les applications de caméra en ligne, les réseaux sociaux, les chats vidéo, etc.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!