Commentaire: Les API client sur les appareils mobiles et les ordinateurs de bureau n'ont pas été synchronisées au début. Initialement, il y a toujours des fonctionnalités et des API correspondantes sur les appareils mobiles, mais lentement, ces API apparaîtront sur les ordinateurs de bureau. L'une des technologies d'interface d'application est l'API GetUserMedia, qui permet aux développeurs d'applications d'accéder aux caméras des utilisateurs ou aux caméras intégrées.
Les API client sur les appareils mobiles et les ordinateurs de bureau n'ont pas été synchronisées au début. Initialement, il y a toujours des fonctionnalités et des API correspondantes sur les appareils mobiles, mais lentement, ces API apparaîtront sur les ordinateurs de bureau. L'une des technologies d'interface d'application est l'API GetUserMedia, qui permet aux développeurs d'applications d'accéder aux caméras des utilisateurs ou aux caméras intégrées. Permettez-moi de 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 suivant, veuillez lire:
<! -
Idéalement, nous devons d'abord déterminer si votre appareil est activé
Il y a des caméras ou des caméras, mais pour la simplicité, nous sommes ici directement
Écrivez des balises HTML au lieu d'utiliser JavaScript pour juger d'abord
Puis générer dynamiquement ces balises
->
<Video AutoPlay> </ Video>
<fontificateur de la photo SCOP </futch>
<lebvas> </ canvas>
Avant d'écrire les balises ci-dessus, vous devez déterminer si le client de l'utilisateur a une prise en charge de la caméra. Cependant, pour ne pas être aussi gênant, ces balises HTML sont écrites directement ici. Il convient de noter que la longueur et la largeur que nous utilisons ici sont 640 × 480.
Code javascript
Parce que nous écrivons HTML à la main, le code JS suivant sera beaucoup plus simple que vous ne le pensez.
// Mettez les auditeurs d'événements en place
window.addeventListener ("domContentloaded", function () {
// Saisissez des éléments, créez des paramètres, etc.
var canvas = document.getElementById ("canvas"),
context = canvas.getContext ("2d"),
vidéo = document.getElementById ("vidéo"),
VideoObj = {"Vidéo": true},
errback = fonction (erreur) {
console.log ("Erreur de capture vidéo:", error.code);
};
// Mettez en place les auditeurs vidéo
if (navigator.getUserMedia) {// Standard
Navigator.getUserMedia (vidéooBj, fonction (stream) {
video.src = stream;
video.play ();
}, errback);
} else if (navigator.webkitgetUserMedia) {// webkit-préfixed
Navigator.webkitGetUserMedia (vidéooBj, fonction (stream) {
video.src = window.webkiturl.createObjectUrl (stream);
video.play ();
}, errback);
}
else if (Navigator.mozgetUserMedia) {// Firefox Prefixed
Navigator.mozgetUserMedia (vidéooBj, fonction (stream) {
video.src = window.url.createObjectUrl (stream);
video.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 cet élément vidéo sur la connexion vidéo en direct de l'appareil photo de l'utilisateur. C'est toutes les choses que vous devez faire pour accéder à votre appareil photo avec un navigateur!
La fonction de prendre des photos ne peut être considérée comme un peu plus compliquée. Nous ajoutons un moniteur au bouton pour dessiner la vidéo sur la toile.
// déclenche l'action photo
document.getElementById ("Snap")
.AdDeventListener ("cliquez", fonction () {
context.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 des plug-ins tiers pour accéder à l'appareil photo de l'utilisateur depuis le navigateur, ce qui était un peu compliqué. Maintenant, nous n'avons besoin que de la technologie HTML5 Canvas et JavaScript pour faire fonctionner les caméras des utilisateurs facilement et rapidement. Il ne s'agit pas seulement d'accéder à la caméra, mais aussi parce que la technologie Canvas de HTML5 est si puissante que nous pouvons ajouter divers effets de filtre fascinants aux images. Maintenant, utilisez votre propre appareil photo pour prendre une photo de vous dans votre navigateur!