编程知识 cdmana.com

Webrtc prend l'image de la caméra dans la toile

C'est ma participation11Le défi du mois de juin6Oh, mon Dieu.,Voir les détails de l'événement:2021Un dernier défi

Nous pouvons déjà profiter deWebRTCLa fonction de,Allumez la caméra avec votre navigateur,Et afficher l'image de l'aperçu àvideoDans l'élément. Ensuite, nous essayons d'intercepter une image de la vidéo,Afficher sur l'écran.

html

Préparez d'abord l'interface,Contrôle du pendule.Voici les codes des sections clés.

<video playsinline autoplay></video>
<button id="showVideo">Allumez la caméra.</button>
<button id="takeSnapshot">Interception</button>
<button id="clearList">Effacer les enregistrements</button>
<canvas id="mainCanvas"></canvas>
<div id="list" style="display: grid; grid-template-columns: repeat(auto-fill, 100px); column-gap: 20px; row-gap: 20px;"></div>
Copier le Code
  • video Pour prévisualiser la vidéo
  • 3- Oui.button,Prenez - les séparément et allumez les caméras,Capture d'images et effacement d'enregistrements
  • canvas Utilisé pour afficher les images capturées
  • En bas.divIl a été utilisé pour stocker plusieurs captures d'écran..On lui a assignégrid,Il est préférable d'afficher plusieurs images

Comme d'habitude,Nécessité d'introduireadapter-latest.js

<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
Copier le Code

js

Préparation à la mise en œuvre des fonctions.

Allumez la caméra et prévisualisez

Comme les caméras allumées avant,Il faut l'utiliser.getUserMediaMéthodes.Après avoir reçu le flux vidéo, donnez - le àvideoVa jouer.

const video = document.querySelector('video');
const constraints = {
  audio: false,
  video: true
};
// ....

function openCamera(e) {
  navigator.mediaDevices.getUserMedia(constraints).then(gotStream).catch(onError);
}

function gotStream(stream) {
  window.stream = stream;
  video.srcObject = stream;
}

function onError(error) {
  console.log('navigator.MediaDevices.getUserMedia error: ', error.message, error.name);
}
Copier le Code

Capture d'image

Obtenir l'interfacecanvas,Réserver une taille(Pas de réservation.).

const mCanvas = window.canvas = document.querySelector('#mainCanvas');
mCanvas.width = 480;
mCanvas.height = 360;

// Début de l'interception
  mCanvas.width = video.videoWidth;
  mCanvas.height = video.videoHeight;
  mCanvas.getContext('2d').drawImage(video, 0, 0, mCanvas.width, mCanvas.height);
Copier le Code

Après avoir lancé l'interception,UtilisergetContextObtenirCanvasRenderingContext2DObjet.Et l'a appelédrawImageMéthodes. Prends ça.videoLes images vidéo sont dessinées dans.

En plus de dessiner celui - cicanvas,On peut commencer à chaque fois(Cliquez sur le bouton)Créer un nouveaucanvas,Montre - les comme des albums..

const list = document.querySelector('#list'); // Pour stocker plusieurs éléments

  // Nouveau1Zhang.
  var divItem = document.createElement("div");
  divItem.style.display = "block";
  divItem.width = 100;
  divItem.height = divItem.width * video.videoHeight / video.videoWidth; // Calculer l'échelle
  divItem.style.width = divItem.width + "px";
  divItem.style.height = divItem.height + "px";
  console.log("div item size: ", divItem.width, divItem.height);

  var c1 = document.createElement("canvas");
  c1.width = divItem.width;
  c1.height = divItem.height;
  c1.getContext('2d').drawImage(video, 0, 0, mCanvas.width, mCanvas.height, 0, 0, c1.width, c1.height);

  divItem.appendChild(c1);
  list.appendChild(divItem);
Copier le Code

Les enfants sont stockésdivLe paquetcanvas.D'abord.document.createElement("div")CréationdivItem. Selon la largeur et la hauteur de la vidéo,Calculer les ajustementsdivItemTaille,Et la mise en placestyle.

document.createElement("canvas")Créationc1,Sa largeur et sa hauteur sont fixées à l'avantdivItemLargeur et hauteur.Et ensuite dessiner l'image. drawImageHeure,Il y a une vidéo qui vient d'arriver.(Source)Champ d'application,Derrière.4Les paramètres sont leurs propres plages de dessin. Ce sous - élément est généré.Ajouter à la liste que nous avons préparée(div)Moyenne.

Effacer les enregistrements

Effacerdiv(list)Les enfants de.Obtenir et supprimer les enfants avec une boucle.

var child = list.lastElementChild;
while (child) {
    list.removeChild(child);
    child = list.lastElementChild;
}
Copier le Code

Résumé

Allumez la caméra.,Afficher la vidéo.Dessiner la vidéo àcanvasAllez..Créer plusieurscanvas,L'effet de l'histoire. Est principalement utilisécanvasMéthode de dessin pour.Faites attention aux paramètres entrants lors du dessin,Possibilité de spécifier les limites tracées. Cela signifie qu'il est possible de ne dessiner qu'une partie de la taille de la vidéo.

Méthodes clés utilisées dans l'exemple

  • getUserMedia
  • getContext
  • drawImage
  • createElement

SimpleLiens d'aperçu

版权声明
本文为[Anrfdev]所创,转载请带上原文链接,感谢
https://cdmana.com/2021/11/20211125165940565G.html

Scroll to Top