使用HTML5拍照示例代碼
發(fā)布時(shí)間：2013-08-06 15:24:51 作者：佚名 
我要評(píng)論
我要評(píng)論HTML5拍照首先，我們看看HTML代碼結(jié)構(gòu)，當(dāng)然，這部分的DOM內(nèi)容應(yīng)該是在用戶允許使用其攝像頭事件出發(fā)后，動(dòng)態(tài)加載生成的，感興趣的朋友可以了解下
演示地址： HTML5拍照演示
首先，我們看看HTML代碼結(jié)構(gòu)，當(dāng)然，這部分的DOM內(nèi)容應(yīng)該是在用戶允許使用其攝像頭事件出發(fā)后，動(dòng)態(tài)加載生成的。
注意： 我們采用的是 640X480的分辨率，如果采用JS動(dòng)態(tài)生成，那么您是可以靈活控制分辨率的。
<!--
聲明： 此div應(yīng)該在允許使用webcam，網(wǎng)絡(luò)攝像頭之后動(dòng)態(tài)生成
寬高： 640 *480,當(dāng)然，可以動(dòng)態(tài)控制啦!
-->
<!--
Ideally these elements aren't created until it'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元素創(chuàng)建完成，那么JavaScript部分將簡(jiǎn)單的超乎你想象的簡(jiǎn)單：
// 設(shè)置事件監(jiān)聽(tīng)，DOM內(nèi)容加載完成，和jQuery的$.ready() 效果差不多。
window.addEventListener("DOMContentLoaded", function() {
// canvas 元素將用于抓拍
var canvas = document.getElementById("canvas"),
context = canvas.getContext("2d"),
// video 元素，將用于接收并播放攝像頭 的數(shù)據(jù)流
video = document.getElementById("video"),
videoObj = { "video": true },
// 一個(gè)出錯(cuò)的回調(diào)函數(shù)，在控制臺(tái)打印出錯(cuò)信息
errBack = function(error) {
if("object" === typeof window.console){
console.log("Video capture error: ", error.code);
}
};
// Put video listeners into place
// 針對(duì)標(biāo)準(zhǔn)的瀏覽器
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);
}
// 對(duì)拍照按鈕的事件監(jiān)聽(tīng)
document.getElementById("snap").addEventListener("click", function() {
// 畫(huà)到畫(huà)布上
context.drawImage(video, 0, 0, 640, 480);
});
}, false);
最后，記得講您的網(wǎng)頁(yè)放到web服務(wù)器下面，然后通過(guò)http協(xié)議來(lái)訪問(wèn)哦。
另外，需要瀏覽器版本較新，并且支持HTML5的相關(guān)新特性才可以。
譯者不算稱(chēng)職啦，沒(méi)有按原文來(lái)翻譯。使用的瀏覽器是chrome 28。
最后，貼上完整的代碼，比較呆板。
<!DOCTYPE html>
<html>
<head>
<title> 瀏覽器webcamera </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="renfufei@qq.com">
<meta name="Description" content="inveted by: http://davidwalsh.name/browser-camera">
<script>
// 設(shè)置事件監(jiān)聽(tīng)，DOM內(nèi)容加載完成，和jQuery的$.ready() 效果差不多。
window.addEventListener("DOMContentLoaded", function() {
// canvas 元素將用于抓拍
var canvas = document.getElementById("canvas"),
context = canvas.getContext("2d"),
// video 元素，將用于接收并播放攝像頭 的數(shù)據(jù)流
video = document.getElementById("video"),
videoObj = { "video": true },
// 一個(gè)出錯(cuò)的回調(diào)函數(shù)，在控制臺(tái)打印出錯(cuò)信息
errBack = function(error) {
if("object" === typeof window.console){
console.log("Video capture error: ", error.code);
}
};
// Put video listeners into place
// 針對(duì)標(biāo)準(zhǔn)的瀏覽器
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);
}
// 對(duì)拍照按鈕的事件監(jiān)聽(tīng)
document.getElementById("snap").addEventListener("click", function() {
// 畫(huà)到畫(huà)布上
context.drawImage(video, 0, 0, 640, 480);
});
}, false);
</script>
</head>
<body>
<div>
<!--
聲明： 此div應(yīng)該在允許使用webcam，網(wǎng)絡(luò)攝像頭之后動(dòng)態(tài)生成
寬高： 640 *480,當(dāng)然，可以動(dòng)態(tài)控制啦!
-->
<!--
Ideally these elements aren't created until it'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>
</div>
</body>
</html>
首先，我們看看HTML代碼結(jié)構(gòu)，當(dāng)然，這部分的DOM內(nèi)容應(yīng)該是在用戶允許使用其攝像頭事件出發(fā)后，動(dòng)態(tài)加載生成的。
注意： 我們采用的是 640X480的分辨率，如果采用JS動(dòng)態(tài)生成，那么您是可以靈活控制分辨率的。
復(fù)制代碼
代碼如下:<!--
聲明： 此div應(yīng)該在允許使用webcam，網(wǎng)絡(luò)攝像頭之后動(dòng)態(tài)生成
寬高： 640 *480,當(dāng)然，可以動(dòng)態(tài)控制啦!
-->
<!--
Ideally these elements aren't created until it'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元素創(chuàng)建完成，那么JavaScript部分將簡(jiǎn)單的超乎你想象的簡(jiǎn)單：
復(fù)制代碼
代碼如下:// 設(shè)置事件監(jiān)聽(tīng)，DOM內(nèi)容加載完成，和jQuery的$.ready() 效果差不多。
window.addEventListener("DOMContentLoaded", function() {
// canvas 元素將用于抓拍
var canvas = document.getElementById("canvas"),
context = canvas.getContext("2d"),
// video 元素，將用于接收并播放攝像頭 的數(shù)據(jù)流
video = document.getElementById("video"),
videoObj = { "video": true },
// 一個(gè)出錯(cuò)的回調(diào)函數(shù)，在控制臺(tái)打印出錯(cuò)信息
errBack = function(error) {
if("object" === typeof window.console){
console.log("Video capture error: ", error.code);
}
};
// Put video listeners into place
// 針對(duì)標(biāo)準(zhǔn)的瀏覽器
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);
}
// 對(duì)拍照按鈕的事件監(jiān)聽(tīng)
document.getElementById("snap").addEventListener("click", function() {
// 畫(huà)到畫(huà)布上
context.drawImage(video, 0, 0, 640, 480);
});
}, false);
最后，記得講您的網(wǎng)頁(yè)放到web服務(wù)器下面，然后通過(guò)http協(xié)議來(lái)訪問(wèn)哦。
另外，需要瀏覽器版本較新，并且支持HTML5的相關(guān)新特性才可以。
譯者不算稱(chēng)職啦，沒(méi)有按原文來(lái)翻譯。使用的瀏覽器是chrome 28。
最后，貼上完整的代碼，比較呆板。
復(fù)制代碼
代碼如下:<!DOCTYPE html>
<html>
<head>
<title> 瀏覽器webcamera </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="renfufei@qq.com">
<meta name="Description" content="inveted by: http://davidwalsh.name/browser-camera">
<script>
// 設(shè)置事件監(jiān)聽(tīng)，DOM內(nèi)容加載完成，和jQuery的$.ready() 效果差不多。
window.addEventListener("DOMContentLoaded", function() {
// canvas 元素將用于抓拍
var canvas = document.getElementById("canvas"),
context = canvas.getContext("2d"),
// video 元素，將用于接收并播放攝像頭 的數(shù)據(jù)流
video = document.getElementById("video"),
videoObj = { "video": true },
// 一個(gè)出錯(cuò)的回調(diào)函數(shù)，在控制臺(tái)打印出錯(cuò)信息
errBack = function(error) {
if("object" === typeof window.console){
console.log("Video capture error: ", error.code);
}
};
// Put video listeners into place
// 針對(duì)標(biāo)準(zhǔn)的瀏覽器
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);
}
// 對(duì)拍照按鈕的事件監(jiān)聽(tīng)
document.getElementById("snap").addEventListener("click", function() {
// 畫(huà)到畫(huà)布上
context.drawImage(video, 0, 0, 640, 480);
});
}, false);
</script>
</head>
<body>
<div>
<!--
聲明： 此div應(yīng)該在允許使用webcam，網(wǎng)絡(luò)攝像頭之后動(dòng)態(tài)生成
寬高： 640 *480,當(dāng)然，可以動(dòng)態(tài)控制啦!
-->
<!--
Ideally these elements aren't created until it'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>
</div>
</body>
</html>
相關(guān)文章
HTML5 和小程序?qū)崿F(xiàn)拍照?qǐng)D片旋轉(zhuǎn)、壓縮和上傳功能
這篇文章主要介紹了HTML5 和小程序?qū)崿F(xiàn)拍照?qǐng)D片旋轉(zhuǎn)、壓縮和上傳功能,需要的朋友可以參考下2018-10-08H5調(diào)用相機(jī)拍照并壓縮圖片的實(shí)例代碼
這篇文章主要介紹了H5調(diào)用相機(jī)拍照并壓縮圖片的實(shí)例代碼,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-20HTML5 Plus 實(shí)現(xiàn)手機(jī)APP拍照或相冊(cè)選擇圖片上傳功能
這篇文章主要為大家詳細(xì)介紹了HTML5 Plus的Camera、GalleryIO、Storage和Uploader，實(shí)現(xiàn)手機(jī)APP拍照或相冊(cè)選擇圖片上傳功能的相關(guān)資料，感興趣的小伙伴們可以參考一下2016-07-13HTML5調(diào)用手機(jī)攝像頭拍照的實(shí)現(xiàn)思路及代碼
HTML5 The Media Capture API提供了對(duì)攝像頭的可編程訪問(wèn)，用戶可以直接用getUserMedia獲得攝像頭提供的視頻流2014-06-15HTML5中5個(gè)簡(jiǎn)單實(shí)用的API（第二篇，含全屏、可見(jiàn)性、拍照、預(yù)加載、電
小編前些日子給家?guī)?lái)過(guò)一篇HTML5中5個(gè)簡(jiǎn)單實(shí)用的API，這是系列文章的第二篇，希望大家喜歡。2014-05-07html5拍照功能實(shí)現(xiàn)代碼(htm5上傳文件)
在HTML5規(guī)范的支持下，WebApp在手機(jī)上拍照已經(jīng)成為可能。在下面，我將講解Web App如何用手機(jī)進(jìn)行拍照，顯示在頁(yè)面上并上傳到服務(wù)器2013-12-11基于HTML5超酷攝像頭（HTML5 webcam）拍照功能實(shí)現(xiàn)代碼
基于HTML5實(shí)現(xiàn)的超酷攝像頭（HTML5 webcam）拍照功能,需要了解的朋友可以參考下2012-12-13
HTML5拍照和攝像機(jī)功能實(shí)戰(zhàn)詳解
這篇文章主要介紹了HTML5拍照和攝像機(jī)功能實(shí)戰(zhàn)詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-01-24
