Commentaire: Prenez une photo sur HTML5 tout d'abord, jetons un coup d'œil à la structure du code HTML. Bien sûr, cette partie du contenu DOM doit être chargée dynamiquement après que l'utilisateur a permis l'utilisation de ses événements de caméra. Les amis intéressés peuvent en savoir plus.
Adresse de démonstration: démonstration de photos HTML5Regardons d'abord la structure du code HTML. Bien sûr, cette partie du contenu DOM doit être chargée dynamiquement une fois que l'utilisateur a permis d'utiliser ses événements de caméra pour démarrer.
Remarque: nous utilisons la résolution de 640x480. Si vous utilisez la génération dynamique JS, vous pouvez contrôler de manière flexible la résolution.
<! -
Déclaration: ce div doit être généré dynamiquement après avoir autorisé la webcam, webcam
Largeur et hauteur: 640 * 480, bien sûr, il peut être contrôlé dynamiquement!
->
<! -
Idéalement, ces éléments ne sont pas créés tant qu'il ne sera pas confirmé que le
le client prend en charge la vidéo / caméra, mais pour illustrer le
Éléments impliqués, ils sont créés avec le balisage (pas JavaScript)
->
<Video AutoPlay> </ Video>
<fontificateur de la photo SCOP </futch>
<lebvas> </ canvas>
Javascrip
Tant que l'élément HTML ci-dessus est créé, la partie JavaScript sera plus simple que vous ne le pensez:
// Définir l'écoute des événements, le contenu DOM est chargé, ce qui est similaire à l'effet $ .ready () de jQuery.
window.addeventListener ("domContentloaded", function () {
// L'élément de toile sera utilisé pour la capture
var canvas = document.getElementById ("canvas"),
context = canvas.getContext ("2d"),
// Élément vidéo, pour recevoir et lire le flux de données de la caméra
vidéo = document.getElementById ("vidéo"),
VideoObj = {"Vidéo": true},
// Une fonction de rappel d'erreur imprime le message d'erreur sur la console
errback = fonction (erreur) {
if ("object" === Typeof window.console) {
console.log ("Erreur de capture vidéo:", error.code);
}
};
// Mettez en place les auditeurs vidéo
// pour les navigateurs standard
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);
}
// écoute l'événement du bouton photo
document.getElementById ("Snap"). AddEventListener ("cliquez", fonction () {
// dessinez sur la toile
context.DrawImage (vidéo, 0, 0, 640, 480);
});
}, FAUX);
Enfin, n'oubliez pas de mettre votre page Web sous le serveur Web et d'y accéder via le protocole HTTP.
De plus, la version du navigateur doit être plus récente et prend en charge les nouvelles fonctionnalités liées à HTML5.
Le traducteur n'est pas qualifié et n'a pas traduit en fonction du texte d'origine. Le navigateur utilisé est Chrome 28.
Enfin, publiez le code complet, qui est plus rigide.
<! Doctype html>
<html>
<adal>
<Title> Browser WebCamera </Title>
<meta content = "editPlus">
<Meta Content = "[email protected]">
<meta content = "Invetted par:">
<cript>
// Définir l'écoute des événements, le contenu DOM est chargé, ce qui est similaire à l'effet $ .ready () de jQuery.
window.addeventListener ("domContentloaded", function () {
// L'élément de toile sera utilisé pour la capture
var canvas = document.getElementById ("canvas"),
context = canvas.getContext ("2d"),
// Élément vidéo, pour recevoir et lire le flux de données de la caméra
vidéo = document.getElementById ("vidéo"),
VideoObj = {"Vidéo": true},
// Une fonction de rappel d'erreur imprime le message d'erreur sur la console
errback = fonction (erreur) {
if ("object" === Typeof window.console) {
console.log ("Erreur de capture vidéo:", error.code);
}
};
// Mettez en place les auditeurs vidéo
// pour les navigateurs standard
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);
}
// écoute l'événement du bouton photo
document.getElementById ("Snap"). AddEventListener ("cliquez", fonction () {
// dessinez sur la toile
context.DrawImage (vidéo, 0, 0, 640, 480);
});
}, FAUX);
</cript>
</ head>
<body>
<div>
<! -
Déclaration: ce div doit être généré dynamiquement après avoir autorisé la webcam, webcam
Largeur et hauteur: 640 * 480, bien sûr, il peut être contrôlé dynamiquement!
->
<! -
Idéalement, ces éléments ne sont pas créés tant qu'il ne sera pas confirmé que le
le client prend en charge la vidéo / caméra, mais pour illustrer le
Éléments impliqués, ils sont créés avec le balisage (pas JavaScript)
->
<Video AutoPlay> </ Video>
<fontificateur de la photo SCOP </futch>
<lebvas> </ canvas>
</div>
</docy>
</html>