使用HTML5拍照範例程式碼介紹

HTML5拍照首先，我們看看HTML程式碼結構，當然，這部分的DOM內容應該是在用戶允許使用其攝影機事件出發後，動態載入產生的，有興趣的朋友可以了解下 
首先，我們看看HTML程式碼結構，當然，這部分的DOM內容應該是在用戶允許使用其攝影機事件出發後，動態載入產生的。
注意： 我們採用的是 640X480的分辨率，如果採用JS動態生成，那麼您是可以靈活控制分辨率的。

程式碼如下:

<!-- 
声明： 此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
只要上面的HTML元素建立完成，那麼JavaScript部分將簡單的超乎你想像的簡單：

程式碼如下：

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

最後，記得講您的網頁放到web伺服器下面，然後透過http協定來存取哦。
另外，需要瀏覽器版本較新，支援HTML5的相關新功能才可以。
譯者不算稱職啦，沒有照原文來翻譯。使用的瀏覽器是chrome 28。
最後，貼上完整的程式碼，比較呆板。

程式碼如下:

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

以上是使用HTML5拍照範例程式碼介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！