Introduction to sample code for taking pictures using HTML5

HTML5Taking photos First, let’s take a look at the HTML code structure. Of course, this part of the DOM content should be dynamically loaded and generated after the user allows the use of their cameraevent, Interested friends can learn about it
First, let’s take a look at the HTML code structure. Of course, this part of the DOM content should be dynamically loaded and generated after the user allows the use of his camera event.
Note: We use the resolution of 640X480. If you use JS to dynamically generate it, you can flexibly control the resolution.

The code is as follows:

<!-- 
声明： 此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
As long as the above HTML element is created, the JavaScript part will be simpler than you think:

The code is as follows:

// 设置事件监听，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);

Finally, remember to put your web page under the web server and access it through the http protocol.
In addition, the browser version needs to be newer and support the new features of HTML5.
The translator is not considered competent because he did not translate according to the original text. The browser used is chrome 28.
Finally, paste the complete code, which is relatively dull.

The code is as follows:

 
 
 
 
 
 
 
<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> 
 
 

The above is the detailed content of Introduction to sample code for taking pictures using HTML5. For more information, please follow other related articles on the PHP Chinese website!