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

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

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

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

<video id="video" width="640" height="480" autoplay></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("调用失败");
});

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

可采用如下完整代码：

<!DOCTYPE html">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body><video id="video" autoplay="" style='width:100%;height:100%'></video>  <script type="text/javascript">  //存储视频设备源ID var exArray = [];MediaStreamTrack.getSources(function (sourceInfos) {  for (var i = 0; i < sourceInfos.length; i++) {  var sourceInfo = sourceInfos[i];  if (sourceInfo.kind === 'video') {  exArray.push(sourceInfo.id);  }  }  var getUserMedia = (navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia);  getUserMedia.call(navigator, {  'video': {  'optional': [{  'sourceId': exArray[1] //0为前置摄像头，1为后置  }]  },  }, function(localMediaStream) {  var video = document.getElementById('video');  video.src = window.URL.createObjectURL(localMediaStream);  video.play();  }, function(e) {  alert("调用失败");});  });  </script>
</body>
</html>

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

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

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

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

微信浏览器调用手机摄像头录像
<input type="file" style="/* visibility: hidden */" capture="camera" ...
html5 调用手机摄像头详解
html5 调用手机摄像头详解首先,我们看看HTML代码结构,当然,这部分的DOM内容应该是在用户允许使用其摄像头事件出发后,动态加载生成的. 注意: 我们采用的是 640X480的分辨率,如 ...
html调起苹果手机摄像头_HTML5如何调用手机摄像头拍照实现方法介绍
HTML5如何调用安卓手机摄像头拍照实现方法介绍.HTML5 The Media Capture API提供了对摄像头的可编程访问,可以直接用getUserMedia获得摄像头提供的视频流.其实实际上 ...
python+opencv用电脑调用手机摄像头或其他网路摄像头
python+opencv用电脑调用手机摄像头或其他网路摄像头文章目录: 1 获取手机摄像头或网络摄像头的ip 1.1 获取手机摄像头的ip 1.2 获取网络摄像头的IP 1.3 关于RTSP协议 ...
html5调用手机摄像头，实现拍照上传功能
http://www.glve.net/html5-calls-cell-phone-cameras-to-achieve-photo-upload-feature.html 今天做手机网站,想实现手 ...
H5调用手机摄像头，实时拍照上传（旧）
H5调用手机摄像头,完成拍照,实时上传(旧) 项目开发中,偶尔会遇到网页中调用手机摄像头,通过相册选择或直接实时拍照的方式,完成图片上传的功能型需求. 今天,就通过一个小的案例,演示一下完整的实现流程 ...
python-电脑调用手机摄像头
" 电脑没有摄像头之这不是有手机摄像头" 因为电脑低级或者像我一样本身就是使用台式电脑的兄弟,又不想买摄像头,想想就痛苦. 今天,我们就来解决这个痛苦的问题,虽然我们的电脑没有摄像 ...
使用HTML5+调用手机摄像头和相册
前言: 前端时间使用HTML5做了一个WEB端APP,其中用到了H5页面调用手机摄像头的功能,当时也是花了不少时间去研究.最终是采用了HTML5plus(HTML5+)的方式完成了该功能,现将具体方法 ...
利用JS调用手机摄像头小功能源码
介绍: 一个小功能源码,利用JS调用手机摄像头,当访问网址后就能拍摄照片,前提是客户端给了权限. 1.由于系统安全机制,ios系统必须使用自带的Safari浏览器(或者第三方APP调用的是Safari ...

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

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

最新文章

热门文章