Utiliser HTML5 pour prendre des photos, exemples de conseils du didacticiel code_html5

Adresse de démonstration : Démo de prise de photos 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 et générée dynamiquement une fois que l'utilisateur a autorisé l'utilisation de. leur événement caméra.
Remarque : nous utilisons la résolution de 640X480. Si vous utilisez JS pour la générer dynamiquement, vous pouvez contrôler la résolution de manière flexible.

Copier le code

Le code est le suivant :

--
Idéalement, ces éléments ne sont pas créés tant qu'il n'est pas confirmé que le
client prend en charge la vidéo/caméra, mais par souci d'illustrer les
éléments impliqués, ils sont créés avec un balisage (et non du JavaScript)
-->

Snap Photo
< ;canvas id="canvas" width="640" height="480">

JavaScript
Tant que l'élément HTML ci-dessus est créé, la partie JavaScript sera simple C'est plus simple que vous ne le pensez :

Copiez le codeLe code est le suivant :

/ / Définissez l'écoute des événements, le chargement du contenu DOM est terminé et l'effet est similaire à $.ready() de jQuery.
window.addEventListener("DOMContentLoaded", function() {
// L'élément canvas sera utilisé pour capturer
var canvas = document.getElementById("canvas"),
context = canvas. getContext( "2d"),
// élément vidéo, qui sera utilisé pour recevoir et lire le flux de données de la caméra
video = document.getElementById("video"),
videoObj = { "video" : true },
// Une fonction de rappel d'erreur, imprime les informations d'erreur sur la console
errBack = function(error) {
if("object" === typeof window.console){
console.log ("Erreur de capture vidéo : ", error.code);
}
// Mettre en place les auditeurs vidéo
// Pour les navigateurs standards
if(navigator. getUserMedia ) { // Standard
navigator.getUserMedia(videoObj, function(stream) {
video.src = stream;
video.play();
}, errBack); else if(navigator.webkitGetUserMedia) { // Préfixe WebKit
navigator.webkitGetUserMedia(videoObj, function(stream){
video.src = window.webkitURL.createObjectURL(stream);
video.play( ) ;
}, errBack);
}
// Surveillance des événements pour le bouton photo
document.getElementById("snap").addEventListener("click", function() {
// Dessinez sur le canevas
context.drawImage(video, 0, 0, 640, 480);
},


Enfin, rappelez-vous); pour dire Mettez votre page Web sous le serveur Web et accédez-y via le protocole http.
De plus, la version du navigateur doit être plus récente et prendre en charge les nouvelles fonctionnalités de HTML5.
Le traducteur n'est pas qualifié car il n'a pas traduit selon le texte original. Le navigateur utilisé est Chrome 28.

Enfin, collez le code complet, ce qui est plutôt ennuyeux.





Copier le code

Le code est le suivant :

<script> <br />// 設定事件監聽，DOM內容載入完成，和jQuery的$.ready() 效果差不多。 <br />window.addEventListener("DOMContentLoaded", function() { <br />// canvas 元素將用於抓拍<br />var canvas = document.getElementById("canvas"), <br />context = canvas.Context( "2d"), <br />// video 元素，將用於接收並播放相機的資料流<br />video = document.getElementById("video"), <br />videoObj = { "video": true }, <br />// 一個出錯的回呼函數，在控制台列印出錯訊息<br />errBack = function(error) { <br />if("object" === typeof window.console){ <br />console.log ("Video capture error: ", error.code); <br />} <br />}; <br />// Put video listeners into place <br />// 針對標準的瀏覽器<br />if(navigator.getUserMedia ) { // Standard <br />navigator.getUserMedia(videoObj, function(stream) { <br />video.src = stream; <br />video.play(); <br />}, errBack); <br />} else if(navigator.webkitGetUserMedia) { // WebKit-prefixed <br />navigator.webkitGetUserMedia(videoObj, function(stream){ <br />video.src = window.webkitURL.createURL(stream); ; <br />}, errBack); <br />} <br />// 拍照按鈕的事件監聽<br />document.getElementById("snap").addEventListener("click", function() { <br />/ / 畫到畫布上<br />context.drawImage(video, 0, 0, 640, 480); <br />}); <br />}, false); <br /></script>

Snap Photo

body>