HTML5学习之摄像头拍照组件的封装
来源:互联网 发布:趣味性软件使用教程 编辑:程序博客网 时间:2024/05/01 11:16
在HTML5开发中,摄像头调用主要使用了navigator.getUserMedia()函数。为了将摄像头的画像实时展现,可以将录像数据流导入到video或者canvas中。在展示的时候,建议使用video作为视频流容易,因为canvas绘画视频帧时存在一定的卡顿。 在像素数据分析和将画像转成图片,则应将视频流导到canvas中,使用canvas API中进行数据提取。
在这里,我使用了一个隐藏起来的canvas,对视频流的关键帧数据进行收集。
详看以下代码:
组件代码:
/**
* 组件:调用摄像头拍摄的构造函数
* @params {Object} options 参数如下:
* video {DOM} video元素
* width {Number} 画布宽度
* height {Number} 画布高度
* onShoot {Function} 录像回调函数
* onError {Function} error回调函数
* 调用:
* Camera.create(options);
*/
function Camera(options) {
this.video = options.video;
this.width = options.width || 640;
this.height = options.height || 480;
this.onError = options.onError;
this.onShoot = options.onShoot;
}
Camera.prototype = {
init: function() {
navigator.getUserMedia = navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia;//获取媒体对象
this.video.autoplay = 'ture';
this.canvasDom = document.createElement('canvas');
this.canvasDom.width = this.width;
this.canvasDom.height = this.height;
this.canvasDom.style.display = 'none';
document.querySelector('body').appendChild(this.canvasDom);
},
// 检查摄像头是否可用
canCameraUse: function() {
return (navigator.getUserMedia && window.URL);
},
// 获取录像流到video中
shoot: function() {
var self = this;
var video = self.video;
if(self.canCameraUse) {
navigator.getUserMedia(
{video:true},
function (stream) {
video.src = URL.createObjectURL(stream);
video.play();
video.addEventListener('error', function(error) {
stream.stop();
self.onError && self.onError(error);
}, false);
},
function (error) {
self.onError && self.onError(error);
}
);
}
},
// 将录像绘制到canvas
drawVideo: function() {
var canvasDom = this.canvasDom;
var ctx = canvasDom.getContext('2d');
ctx.fillStyle = "#000000";
ctx.fillRect(0, 0, canvasDom.width, canvasDom.height);
ctx.drawImage(this.video, 0, 0, canvasDom.width, canvasDom.height);
},
// 录像事件绑定
addShootEvent: function() {
var self = this;
var video = self.video;
// 正在录像
video.addEventListener('timeupdate', function() {
self.drawVideo();
self.onShoot && self.onShoot();
}, false);
},
// 将录像成图片
snapshot: function(cb, imageType) {
var self = this;
var video = self.video;
var canvas = self.canvasDom;
var ctx = canvas.getContext('2d');
imageType = imageType || 'png';
imageSrc = canvas.toDataURL('image/' + imageType);
cb && cb(imageSrc);
},
// 开始录像
play: function() {
this.video.play();
},
// 停止录像
pause: function() {
this.video.pause();
},
render: function() {
this.init();
this.shoot();
this.drawVideo();
this.addShootEvent();
}
};
Camera.create = function(options) {
var camera = new Camera(options);
camera.render();
return camera;
};
调用:
<!-- HTML -->
<video id='video'></video>
<div>
<button id='shootBtn'>拍照</button>
</div>
<div id='imageBox'></div>
<!-- JS -->
<script>
var camera = Camera.create({
video: document.querySelector('#video'),
width: 640,
height: 480,
onError: function(error) {
alert(error);
}
});
// 拍照
document.querySelector('#shootBtn').addEventListener('click', function() {
camera.snapshot(function(imageUrl) {
var imageBox = document.querySelector('#imageBox');
var image = imageBox.querySelector('img');
if(!image) {
var image = document.createElement('img');
image.src = imageUrl;
document.querySelector('#imageBox').appendChild(image);
} else {
image.src = imageUrl;
}
});
}, false);
</script>
来源:凳子
在这里,我使用了一个隐藏起来的canvas,对视频流的关键帧数据进行收集。
详看以下代码:
组件代码:
/**
* 组件:调用摄像头拍摄的构造函数
* @params {Object} options 参数如下:
* video {DOM} video元素
* width {Number} 画布宽度
* height {Number} 画布高度
* onShoot {Function} 录像回调函数
* onError {Function} error回调函数
* 调用:
* Camera.create(options);
*/
function Camera(options) {
this.video = options.video;
this.width = options.width || 640;
this.height = options.height || 480;
this.onError = options.onError;
this.onShoot = options.onShoot;
}
Camera.prototype = {
init: function() {
navigator.getUserMedia = navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia;//获取媒体对象
this.video.autoplay = 'ture';
this.canvasDom = document.createElement('canvas');
this.canvasDom.width = this.width;
this.canvasDom.height = this.height;
this.canvasDom.style.display = 'none';
document.querySelector('body').appendChild(this.canvasDom);
},
// 检查摄像头是否可用
canCameraUse: function() {
return (navigator.getUserMedia && window.URL);
},
// 获取录像流到video中
shoot: function() {
var self = this;
var video = self.video;
if(self.canCameraUse) {
navigator.getUserMedia(
{video:true},
function (stream) {
video.src = URL.createObjectURL(stream);
video.play();
video.addEventListener('error', function(error) {
stream.stop();
self.onError && self.onError(error);
}, false);
},
function (error) {
self.onError && self.onError(error);
}
);
}
},
// 将录像绘制到canvas
drawVideo: function() {
var canvasDom = this.canvasDom;
var ctx = canvasDom.getContext('2d');
ctx.fillStyle = "#000000";
ctx.fillRect(0, 0, canvasDom.width, canvasDom.height);
ctx.drawImage(this.video, 0, 0, canvasDom.width, canvasDom.height);
},
// 录像事件绑定
addShootEvent: function() {
var self = this;
var video = self.video;
// 正在录像
video.addEventListener('timeupdate', function() {
self.drawVideo();
self.onShoot && self.onShoot();
}, false);
},
// 将录像成图片
snapshot: function(cb, imageType) {
var self = this;
var video = self.video;
var canvas = self.canvasDom;
var ctx = canvas.getContext('2d');
imageType = imageType || 'png';
imageSrc = canvas.toDataURL('image/' + imageType);
cb && cb(imageSrc);
},
// 开始录像
play: function() {
this.video.play();
},
// 停止录像
pause: function() {
this.video.pause();
},
render: function() {
this.init();
this.shoot();
this.drawVideo();
this.addShootEvent();
}
};
Camera.create = function(options) {
var camera = new Camera(options);
camera.render();
return camera;
};
调用:
<!-- HTML -->
<video id='video'></video>
<div>
<button id='shootBtn'>拍照</button>
</div>
<div id='imageBox'></div>
<!-- JS -->
<script>
var camera = Camera.create({
video: document.querySelector('#video'),
width: 640,
height: 480,
onError: function(error) {
alert(error);
}
});
// 拍照
document.querySelector('#shootBtn').addEventListener('click', function() {
camera.snapshot(function(imageUrl) {
var imageBox = document.querySelector('#imageBox');
var image = imageBox.querySelector('img');
if(!image) {
var image = document.createElement('img');
image.src = imageUrl;
document.querySelector('#imageBox').appendChild(image);
} else {
image.src = imageUrl;
}
});
}, false);
</script>
来源:凳子
0 0
- HTML5学习之摄像头拍照组件的封装
- HTML5摄像头拍照组件的封装
- HTML5摄像头拍照组件的封装
- JS工具库封装:HTML5摄像头拍照组件的封装
- html5调用摄像头实现拍照
- html5调用摄像头实现拍照
- HTML5调用手机摄像头拍照
- HTML5调用手机摄像头拍照
- HTML5调用手机摄像头拍照
- HTML5获取手机摄像头拍照
- html5调用摄像头实现拍照
- HTML5调用手机摄像头拍照
- AFORGE库学习之封装对摄像头的操作
- 基于HTML5实现的超酷摄像头(HTML5 webcam)拍照功能 - photobooth.js
- HTML5调用手机摄像头拍照 - getUserMedia.js
- html5调用摄像头实现拍照(未测试)
- AngularJS中使用HTML5手机摄像头拍照
- HTML5 + JS 调取摄像头拍照下载
- 《剑指Offer》递归和循环——斐波那契数列
- HAProxy+Keepalived的配置(二)(及重要问题说明)
- 205. Isomorphic Strings
- java利用url实现网页内容的抓取
- 设计模式----装饰模式(C++实现)
- HTML5学习之摄像头拍照组件的封装
- 1
- 【设计模式】整洁代码
- 34. Search for a Range
- imx6q内核定时器实现led闪烁
- WEB-AJAX和JQuery篇
- AWS RDS设置参数组:修改character_set_server为UTF8
- 用Java实现给图片添加文字水印
- 各种排序算法的JAVA实现