关于采用浏览器调用手机摄像头问题

之前一直做后台开发，最近项目客户想要采用android平板扫描物品条码，所以开始在网上看了众多关于采用浏览器调用摄像头的问题，让我十分疑惑的是，为什么很多解决案例并没有讲到移动端浏览器的支持问题，以致自己走了很多弯路。下面就具体对采用浏览器调用手机摄像头问题进行一些说明。

最开始采用navigator.getUserMedia这个接口：

这个接口先要有一个video标签

接口的原型如下：

navigator.getUserMedia(constraints, successCallback, errorCallback);

第一个参数是Object类型，里面包含了需要启用的多媒体设备，例如要启用视频设备（摄像头），就要传入：

{ video: true }

另外两个参数分别是启用成功和失败时的回调函数。启用成功的时候，successCallback的第一个参数为视频流对象，可以进一步通过window.URL.createObjectURL接口把视频流转换为对象URL；启用失败的时候，errorCallback的第一个参数是错误对象（Chrome）或错误信息字符串（Firefox）。

navigator.getUserMedia的调用代码如下：

var video = document.getElementById('video');
navigator.getUserMedia({
  video: true
}, function(stream) {
  video.src = window.URL.createObjectURL(stream);
  video.play();
}, function(error) {
  alert("调用失败");
});

浏览器执行这段代码的时候，会提示用户是否允许使用摄像头，允许之后，网页上就可以实时显示摄像头影像了。如果不允许，就会触发错误事件。

可采用如下完整代码：

结论：1、此方式在PC端Chrome浏览器，调用电脑前置摄像头没有问题。

2、移动端android手机或平板，Chrome浏览器测试无法调用摄像头，FireFox测试调用后置摄像头没有问题。

关于移动端采用浏览器调用摄像头实现扫描二维码的问题，一种思路是采用上诉方式调用手机后置摄像头配合canvas标签，将视频流绘制成图片，然后可以采用前台js解析(解析库地址https://github.com/LazarSoft/jsqrcode)，也可以此采用后台ZXing库解析。这两种方式我并未测试。其实 不建议采用这种方式。因为如果是这种需求建议采用H5 +app的方式，这种方式有很方便的接口，当然就不能用浏览器访问了，需要将html5页面打包成app。