h5封装app摄像头

随着智能手机的普及，人们对手机摄像头的要求也越来越高。市场上也出现了很多APP，通过应用程序可以拍照或录制视频。如果我们的网站需要用户上传图片或视频，那么我们如何在Web页面上使用手机摄像头呢？

传统的做法是借助Flash或者第三方APP来完成这个功能。但HTML5已经提供了相关API，我们可以直接利用HTML5的Canvas标签和MediaStream API来实现。这种方式不需要用户安装额外的APP或者插件，使用起来更加方便。

实现的主要原理是利用MediaStream API，将用户的摄像头的视频流转换为Canvas标签可以用来绘制的Bitmap，并使用JavaScript来控制Canvas标签的显示效果。这些功能主要包括获取摄像头、截图、保存和上传等等。

下面我们来看一下如何使用HTML5来实现摄像头功能：

1.获取摄像头

要获取摄像头，我们需要使用`navigator.mediaDevices.getUserMedia(constraints)`方法，其中`constraints`对象可以定义一些限制，如视频的分辨率、帧率、视频质量等等。

```javascript

navigator.mediaDevices.getUserMedia({

video: true,

audio: false

})

.then(function(stream) {

var video = document.querySelector('video');

video.srcObject = stream;

video.onloadedmetadata = function(e) {

video.play();

};

})

.catch(function(err) {

console.log(err.name + ": " + err.message);

});

```

上述代码中，我们使用了`then()`和`catch()`方法来处理回调，其中`then()`方法会在`getUserMedia()`调用成功时触发，`catch()`方法会在调用失败时触发。

2.截图

截图的原理是利用Canvas标签将视频流绘制成位图，并使用`toDataURL()`方法将图像数据转换为Base64字符串。

```javascript

var canvas = document.querySelector('canvas');

var context = canvas.getContext('2d');

canvas.width = video.videoWidth;

canvas.height = video.videoHeight;

context.drawImage(video, 0, 0, canvas.width, canvas.height);

var imgdata = canvas.toDataURL();

```

3.保存和上传

保存和上传的方式有很多，可以使用AJAX发送到服务器等方式。这里我们以保存到本地为例，使用`a`标签来设置下载链接。

```javascript

var a = document.createElement('a');

a.setAttribute('download', 'image.png');

a.setAttribute('href', imgdata);

a.click();

```

以上就是利用HTML5封装APP摄像头的基本原理和详细介绍。需要注意的是，该技术在不同的手机和浏览器上可能会有兼容性问题，需要进行兼容性测试。