拒绝访问 |
| 百度云加速
请打开cookies.
此网站 () 的管理员禁止了您的访问。原因是您的访问包含了非浏览器特征(391c9dc0f7974364-ua98).
重新安装浏览器，或使用别的浏览器h5端呼起摄像头扫描二维码并解析
最近公司项目有个需求，微博客户端中， h5 的页面上的某个按钮能够与native交互呼起摄像头，扫描二维码并且解析。在非微博客户端中（微信或者是原生，如：safari）呼起的拍照或者上传图片按钮，通过拍照或者上传图片解析二维码。
第二种方案需要在前端 js 解析二维码。这样依赖一个第三方的解析库jsqrcode。这个库已经支持在浏览器端呼起摄像头的操作了，但是依赖一个叫getUserMedia的属性。该属性移动端的浏览器支持的都不是很好，所以只能间接的上传图片的方式解析二维码。
getUserMedia属性兼容浏览器列表：
首先感谢jsqrcode的开发者，提供这么优秀的解析二维码的代码，为我减少了很大的工作量。jsqrcode 地址：
我的代码库地址：
1.解决的问题：
1.能够在微博客户端呼起摄像头扫描二维码并且解析;
2.能够在原生浏览器和微信客户端中扫描二维码并且解析;
web端或者是 h5端可以直接完成扫码的工作；
图片不清晰很容易解析失败(拍照扫描图片需要镜头离二维码的距离很近)，相对于native呼起的摄像头解析会有1-2秒的延时。
此插件需要配合zepto.js或者jQuery.js使用
使用方法：
1.在需要使用的页面按照下面顺序引入lib目录下的 js 文件
&code class=&sourceCode javascript hljs&&
&!--{cke_protected}%3Cscript%20src%3D%22lib%2Fzepto.js%22%3E%3C%2Fscript%3E--&
&!--{cke_protected}%3Cscript%20src%3D%22lib%2Fqrcode.lib.min.js%22%3E%3C%2Fscript%3E--&
&!--{cke_protected}%3Cscript%20src%3D%22lib%2Fqrcode.js%22%3E%3C%2Fscript%3E--&&/code&
2.自定义按钮的 html 样式
因为该插件需要使用，该 html 结构在网页上面是有固定的显示样式，为了能够自定义按钮样式，我们可以按照下面的示例代码结构嵌套代码
&code class=&sourceCode html hljs xml&&
扫描二维码1
&input node-type=&jsbridge& data-cke-saved-name=&myPhoto& name=&myPhoto& value=&扫描二维码1& data-cke-editable=&1& contenteditable=&false& type=&file&&
然后设置input按钮的css隐藏按钮，比如我使用的是属性选择器
input[node-type=jsbridge]{
visibility:
这里我们只需要按照自己的需要定义class=&qr-btn&的样式即可。
3.在页面上初始化 Qrcode 对象
//初始化扫描二维码按钮，传入自定义的 node-type 属性
$(function() {
Qrcode.init($('[node-type=jsbridge]'));
主要代码解析
(function($) {
var Qrcode = function(tempBtn) {
//该对象只支持微博域下的解析，也就是说不是微博域下的页面只能用第二种方案解析二维码
if (window.WeiboJSBridge) {
$(tempBtn).on('click', this.weiBoBridge);
$(tempBtn).on('change', this.getImgFile);
Qrcode.prototype = {
weiBoBridge: function() {
WeiboJSBridge.invoke('scanQRCode', null, function(params) {
//得到扫码的结果
location.href=params.
getImgFile: function() {
var _this_ =
var imgFile = $(this)[0].
var oFile = imgFile[0];
var oFReader = new FileReader();
var rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;
if (imgFile.length === 0) {
if (!rFilter.test(oFile.type)) {
alert(&选择正确的图片格式!&);
//读取图片成功后执行的代码
oFReader.onload = function(oFREvent) {
qrcode.decode(oFREvent.target.result);
qrcode.callback = function(data) {
//得到扫码的结果
location.href =
oFReader.readAsDataURL(oFile);
destory: function() {
$(tempBtn).off('click');
Qrcode.init = function(tempBtn) {
var _this_ =
var inputD
tempBtn.each(function() {
new _this_($(this));
$('[node-type=qr-btn]').on('click', function() {
$(this).find('[node-type=jsbridge]')[0].click();
window.Qrcode = Q
})(window.Zepto ? Zepto : jQuery);
1.呼起前的页面
2.呼起后的页面
如果您觉得对您有帮助，请点击下面的 star 给我一颗星。谢谢啦！输入关键字或相关内容进行搜索
webview为什么不支持HTML5的navigator.getUserMedia？
想直接调用html5的摄像头功能，hb的框架不支持？
代码如下：（三种调用形式均不支持）&html&
&video id=&video& width=&640& height=&480& autoplay&&/video&
&button id=&snap& class=&sexyButton&&Snap Photo&/button&
&canvas id=&canvas& width=&640& height=&480&&&/canvas&
// Put event listeners into place
window.addEventListener(&DOMContentLoaded&, function() {
// Grab elements, create settings, etc.
var canvas = document.getElementById(&canvas&),
context = canvas.getContext(&2d&),
video = document.getElementById(&video&),
videoObj = { &video&: true },
errBack = function(error) {
console.log(&Video capture error: &, error.code);
// Put video listeners into place
if(navigator.getUserMedia) { // Standard
navigator.getUserMedia(videoObj, function(stream) {
video.src =
video.play();
}, errBack);
} else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
navigator.webkitGetUserMedia(videoObj, function(stream){
video.src = window.webkitURL.createObjectURL(stream);
video.play();
}, errBack);
} else if(navigator.mozGetUserMedia) { // WebKit-prefixed
navigator.mozGetUserMedia(videoObj, function(stream){
video.src = window.URL.createObjectURL(stream);
video.play();
}, errBack);
alert('这里失败了！！！！！！');//失败
// Trigger photo take
document.getElementById(&snap&).addEventListener(&click&, function() {
context.drawImage(video, 0, 0, 640, 480);
}, false);
5+app虽然是网页模式，但是不是浏览器的内核，这是测试好久得出的结论，
我想调用网络摄像头，还是没有头绪呢
用H5+ API吧（mui交流Q群：）
官方有事例！你看看这个http://www.dcloud.io/docs/api/zh_cn/camera.html
要回复问题请先或
浏览: 1163
关注: 4 人H5调用摄像头
WebRTC（Web Real-Time Communication，网页实时通信），是一个支持网页浏览器进行实时语音对话或视频对话的API。&
1、getUserMedia
要播放摄像头的影像，首先需要一个video标签：
&video &&/video&
获取摄像头影像主要是通过navigator.getUserMedia这个接口，这个接口的支持情况已经逐渐变好了：
不过，使用的时候还是要加上前缀的，兼容代码：
navigator.getUserMedia =
navigator.getUserMedia
|| navigator.webkitGetUserMedia
|| navigator.mozGetUserM
参数说明：
constraints：Object类型，指定了请求使用媒体的类型
succeCallback：启用成功时的函数，它传入一个参数，为视频流对象，可以进一步通过window.URL.createObjectURL()接口把视频流转换为对象URL。
errorCallback：启动失败时的函数。它传入一个参数，为错误对象（chrome）或错误信息字符串（Firefox），可能值：
PERMISSION_DENIED：用户拒绝提供信息。
& &NOT_SUPPORTED_ERROR：浏览器不支持硬件设备。
& &MANDATORY_UNSATISFIED_ERROR：无法发现指定的硬件设备。
例如：要启用视频设备（摄像头），可这样：
navigator.getUserMedia({
video: true
如果要同时启用视频设备和音频设备，可这样：
navigator.getUserMedia({
video: true,
audio: true
2、 获取摄像头
var URL = window.URL || window.webkitURL; // 获取到window.URL对象
navigator.getUserMedia({
video: true
}, function(stream) {
video.src = URL.createObjectURL(stream);// 将获取到的视频流对象转换为地址
video.play();
}, function(error) {
console.log(error.name || error);
除了实时直播外，我们还可以做实时截图效果，这时我们需要利用&canvas&元素来画图，代码如下：
&canvas &&/canvas&
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var width = video.
var height = video.
canvas.width =
canvas.height =
ctx.drawImage(video, 0, 0, width, height);
4、 保存图片
当然，截图后，你也可以保存下来：
&a download='snap.png' &下载图片&/a&
var url = canvas.toDataURL('image/png');
document.getElementById('download').src =
5、 完整实例
实例代码（由于安全限制问题，请将代码复制到本地运行）：
&!DOCTYPE html&
&meta charset="UTF-8"&
&title&&/title&
#canvas,#video {
margin-right: 10
background: #
margin-bottom: 10
&div class="box"&
width="400" height="300"&&/video&
&canvas &&/canvas&
&button &直播&/button&
&button &截图&/button&
var video = document.getElementById('video');
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var width = video.
var height = video.
canvas.width =
canvas.height =
function liveVideo(){
var URL = window.URL || window.webkitURL;
// 获取到window.URL对象
navigator.getUserMedia({
video: true
}, function(stream){
video.src = URL.createObjectURL(stream);
// 将获取到的视频流对象转换为地址
video.play();
//点击截图
document.getElementById("snap").addEventListener('click', function() {
ctx.drawImage(video, 0, 0, width, height);
var url = canvas.toDataURL('image/png');
document.getElementById('download').href =
}, function(error){
console.log(error.name || error);
document.getElementById("live").addEventListener('click',function(){
liveVideo();
前言 上一章中,我们讨论了环境的配置,这本章中我们,写一个小模块来贯通学习,phonegap对摄像头的调用,已经phonegap对于拍下来的照片的处理,已经,使用本地数据库保存我们的数据,让在程序重新运行的时候能够保留我们的结果.先说明一下,为了,减少工作量,很多地方由于,官方文档已经很详细了我就难得在描述了,如果有些地方,没有而官方文档也没有的话,可以来问 ...
&免费下载DevExpress Winforms Controls v15.1.5&WinForms Accordion控件新版本中的WinForms Accordion控件是一个先进的导航控件,用来查找现有XtraNavBar控件中的功能.Accordion控件允许您创建具有多个项目(操作)的全功能的导航栏.项目可以合并为一个组,组可以包含嵌套 ...
文档简介:贴吧在进行HTML5技术应用的过程中,进行了一系列的技术调研:本文对HTML5的技术调研进行总结,尽可能客观的分析解答对HTML5技术的一些疑问,给出产品.技术上的一些决策建议.对于文中的内容以及表述,也热切希望能得到大家进一步的指正和交流.1. HTML5的发展现状及趋势1.1 HTML5简介HTML5是一套技术标准.规范,它定义了一系列的API ...
RFID刷卡拍照,如果是传统意义上的开发,我们一般需要先知道是什么型号的RFID刷卡器,自己动手编写一套读写RFID的代码,用来读取RFID标签.摄像头驱动开发也是这样的,先要知道摄像头驱动的协议,然后自己编写读取图像并显示的代码.如果是windows平台,一般厂家还会提供dll等调用库,这样只需调用相关接口函数就能实现相关的功能,不过如果是嵌入式平台,就 ...
一. JS: /hacke2/hacke2.github.io/issues/11 霸天 月刊 1.基础知识: /question/ 有哪些经常被误用的 HTML.JavaScript.CSS 的元素.方法和属性 /questi ...
引子: 最近公司项目有个需求,微博客户端中, h5 的页面上的某个按钮能够与native 交互呼起摄像头,扫描二维码并且解析.在非微博客户端中(微信或者是原生浏览器,如:safari)呼起系统的拍照或者上传图片按钮,通过拍照或者上传图片解析二维码. 第二种方案需要在前端 js 解析二维码.这样依赖一个第三方的解析库jsqrcode.这个库已经支持在浏览器端呼 ...
© CopyRight
Inc All Rights Reserved.
管理员邮箱: info @}