Introduction à un exemple de code pour prendre des photos en utilisant HTML5

HTML5Prendre des photos 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 et générée une fois que l'utilisateur a autorisé l'utilisation de son appareil photo événement . Les amis intéressés peuvent en apprendre davantage 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 du sien. événement de caméra.
Remarque : nous utilisons la résolution de 640X480. Si vous utilisez
JS pour le générer dynamiquement, vous pouvez contrôler la résolution de manière flexible.

Le code est le suivant :

<!-- 
声明： 此p应该在允许使用webcam，网络摄像头之后动态生成 
宽高： 640 *480,当然，可以动态控制啦! 
--> 
<!-- 
Ideally these elements aren&#39;t created until it&#39;s confirmed that the 
client supports video/camera, but for the sake of illustrating the 
elements involved, they are created with markup (not JavaScript) 
--> 
<video id="video" width="640" height="480" autoplay></video> 
<button id="snap">Snap Photo</button> 
<canvas id="canvas" width="640" height="480"></canvas>

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

Le code est le suivant :

// 设置事件监听，DOM内容加载完成，和jQuery的$.ready() 效果差不多。 
window.addEventListener("DOMContentLoaded", function() { 
// canvas 元素将用于抓拍 
var canvas = document.getElementById("canvas"), 
context = canvas.getContext("2d"), 
// video 元素，将用于接收并播放摄像头 的数据流 
video = document.getElementById("video"), 
videoObj = { "video": true }, 
// 一个出错的回调函数，在控制台打印出错信息 
errBack = function(error) { 
if("object" === typeof window.console){ 
console.log("Video capture error: ", error.code); 
} 
}; 
// Put video listeners into place 
// 针对标准的浏览器 
if(navigator.getUserMedia) { // Standard 
navigator.getUserMedia(videoObj, function(stream) { 
video.src = stream; 
video.play(); 
}, errBack); 
} else if(navigator.webkitGetUserMedia) { // WebKit-prefixed 
navigator.webkitGetUserMedia(videoObj, function(stream){ 
video.src = window.webkitURL.createObjectURL(stream); 
video.play(); 
}, errBack); 
} 
// 对拍照按钮的事件监听 
document.getElementById("snap").addEventListener("click", function() { 
// 画到画布上 
context.drawImage(video, 0, 0, 640, 480); 
}); 
}, false);

Enfin, pensez à mettre votre page web sous le serveur web, puis à y accéder 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.

Le code est le suivant :

 
 
 
 
 
 
 
<script> 
// 设置事件监听，DOM内容加载完成，和jQuery的$.ready() 效果差不多。 
window.addEventListener(&quot;DOMContentLoaded&quot;, function() { 
// canvas 元素将用于抓拍 
var canvas = document.getElementById(&quot;canvas&quot;), 
context = canvas.getContext(&quot;2d&quot;), 
// video 元素，将用于接收并播放摄像头 的数据流 
video = document.getElementById(&quot;video&quot;), 
videoObj = { &quot;video&quot;: true }, 
// 一个出错的回调函数，在控制台打印出错信息 
errBack = function(error) { 
if(&quot;object&quot; === typeof window.console){ 
console.log(&quot;Video capture error: &quot;, error.code); 
} 
}; 
// Put video listeners into place 
// 针对标准的浏览器 
if(navigator.getUserMedia) { // Standard 
navigator.getUserMedia(videoObj, function(stream) { 
video.src = stream; 
video.play(); 
}, errBack); 
} else if(navigator.webkitGetUserMedia) { // WebKit-prefixed 
navigator.webkitGetUserMedia(videoObj, function(stream){ 
video.src = window.webkitURL.createObjectURL(stream); 
video.play(); 
}, errBack); 
} 
// 对拍照按钮的事件监听 
document.getElementById(&quot;snap&quot;).addEventListener(&quot;click&quot;, function() { 
// 画到画布上 
context.drawImage(video, 0, 0, 640, 480); 
}); 
}, false); 
</script> 
 
 
 
<!-- 
声明： 此p应该在允许使用webcam，网络摄像头之后动态生成 
宽高： 640 *480,当然，可以动态控制啦! 
--> 
<!-- 
Ideally these elements aren&#39;t created until it&#39;s confirmed that the 
client supports video/camera, but for the sake of illustrating the 
elements involved, they are created with markup (not JavaScript) 
--> 
<video id="video" width="640" height="480" autoplay></video> 
<button id="snap">Snap Photo</button> 
<canvas id="canvas" width="640" height="480"></canvas> 
 
 

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!