HTML5 Canvas JS contrôle la caméra sur votre ordinateur ou votre téléphone mobile instance_html5 compétences du didacticiel

Les API client sur les appareils mobiles et les ordinateurs de bureau ne sont pas initialement synchronisées. Dans un premier temps, certaines fonctions et API correspondantes seront toujours disponibles sur les appareils mobiles, mais peu à peu, ces API apparaîtront sur les ordinateurs de bureau. L'une de ces technologies d'interface d'application est l'API getUserMedia, qui permet aux développeurs d'applications d'accéder à la caméra de l'utilisateur ou à la caméra intégrée. Laissez-moi vous montrer comment accéder à votre appareil photo via un navigateur et extraire des captures d'écran.

Code HTML

J'ai écrit quelques commentaires dans le code ci-dessous, veuillez lire :

Copiez le code

Le code est le suivant :

Prendre une photo

Avant d'écrire les balises ci-dessus, vous devez déterminer si le client de l'utilisateur prend en charge la caméra, mais afin d'éviter des problèmes, ces balises HTML sont écrites directement ici. Il convient de noter que la longueur et la largeur que nous utilisons ici sont de 640 × 480.

Code JavaScript

Comme nous avons écrit le code HTML manuellement, le code js suivant est beaucoup plus simple que vous ne le pensez.

Copier le code

Le code est le suivant :

// Mettre en place les auditeurs d'événements
window.addEventListener("DOMContentLoaded", function() {
// Récupère des éléments, crée des paramètres, etc.
var toile = document.getElementById("canvas"),
contexte = toile.getContext("2d"),
video = document.getElementById("video"),
videoObj = { "vidéo": vrai },
errBack = fonction (erreur) {
console.log("Erreur de capture vidéo : ", error.code);
};
// Mettre en place des auditeurs vidéo
if(navigator.getUserMedia) { // Standard
navigator.getUserMedia(videoObj, function(stream) {
vidéo.src = flux;
vidéo.play();
}, errBack);
} else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
navigator.webkitGetUserMedia(videoObj, function(stream){
video.src = window.webkitURL.createObjectURL(stream);
vidéo.play();
}, errBack);
>
else if(navigator.mozGetUserMedia) { // Avec préfixe Firefox
navigator.mozGetUserMedia(videoObj, function(stream){
video.src = window.URL.createObjectURL(stream);
vidéo.play();
}, errBack);
>
}, faux);

Une fois qu'il est déterminé que le navigateur de l'utilisateur prend en charge getUserMedia, ce qui suit est très simple. Il vous suffit de définir le src de l'élément vidéo sur la connexion vidéo en direct de la caméra de l'utilisateur. C'est tout ce que vous devez faire pour accéder à la caméra à l'aide de votre navigateur !

On peut dire que la fonction de prendre des photos est seulement un peu compliquée. Nous ajoutons un auditeur au bouton et dessinons l'écran vidéo sur le canevas.

Copier le code

Le code est le suivant :

//Déclencher une action photo
document.getElementById("snap")
.addEventListener("clic", function() {
contexte.drawImage(vidéo, 0, 0, 640, 480);
});

Bien sûr, vous pouvez également ajouter des effets de filtre à l'image…

Dans le passé, nous devions utiliser un plug-in tiers pour accéder à la caméra de l'utilisateur depuis le navigateur, ce qui était quelque peu compliqué. Désormais, nous n'avons besoin que de la technologie HTML5 Canvas et de JavaScript, nous pouvons faire fonctionner la caméra de l'utilisateur simplement et rapidement. Non seulement il s'agit d'un accès à l'appareil photo, mais aussi grâce à la puissante technologie de toile HTML5, nous pouvons ajouter divers effets de filtre charmants aux images. Maintenant, prenez une photo de vous avec votre propre appareil photo dans votre navigateur !