HTML5学习之摄像头拍照组件的封装

在 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> 来源：凳子