欢迎光临杨雨的个人博客站!

杨雨个人网站-杨雨个人博客-杨照佳

杨雨个人博客网站

关注互联网和搜索引擎的个人博客网站

首页 > WEB开发 > html5案例分享 >

行使HTML5照相示例代码

发布时间:2016-11-24  编辑:杨雨个人博客网站   点击:   

演示地点: HTML5照相演示
起首,我们看看HTML代码布局,虽然,这部门的DOM内容应该是在用户应承行使其摄像头变乱出发后,动态加载天生的。
留意: 我们回收的是 640X480的判别率,假如回收JS动态天生,那么您是可以机动节制判别率的。


代码如下:
<!--
声明: 此div应该在应承行使webcam,收集摄像头之后动态天生
宽高: 640 *480,虽然,可以动态节制啦!
-->
<!--
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元素建设完成,那么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。
最后,贴上完备的代码,较量机械。


代码如下:
<!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>
// 配置变乱监听,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);
</script>
</head>
<body>
<div>
<!--
声明: 此div应该在应承行使webcam,收集摄像头之后动态天生
宽高: 640 *480,虽然,可以动态节制啦!
-->
<!--
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>
本文地址:http://itbyc.com/web/html5/13095.html
转载请注明出处。
分享是一种快乐,也是一种美德:
评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
博客首页 | WEB开发 | 网站运营 | CMS使用教程 滇ICP备14002061号-1