html5移动端页面上调用手机摄像头扫描二维码并获取二维码信息代码？

Posted 2023-04-12

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html5移动端页面上调用手机摄像头扫描二维码并获取二维码信息代码？相关的知识，希望对你有一定的参考价值。

html5移动端调用手机摄像头扫描二维码并获取二维码信息代码如下：

[html] view plain copy

<!DOCTYPE html>

<title>HTML5 code Reader</title>

</head>

html, body height: 100%; width: 100%; text-align:center;

</style>

//这段代主要是获取摄像头的视频流并显示在Video 签中

var canvas=null,context=null,video=null;

window.addEventListener("DOMContentLoaded", function ()

try

canvas = document.getElementById("canvas");

context = canvas.getContext("2d");

video = document.getElementById("video");

var videoObj = "video": true,audio:false,

flag=true,

MediaErr = function (error)

flag=false;

if (error.PERMISSION_DENIED)

alert('用户拒绝了浏览器请求媒体的权限', '提示');

else if (error.NOT_SUPPORTED_ERROR)

alert('对不起，您的浏览器不支持拍照功能，请使用其他浏览器', '提示');

else if (error.MANDATORY_UNSATISFIED_ERROR)

alert('指定的媒体类型未接收到媒体流', '提示');

else

alert('系统未能获取到摄像头，请确保摄像头已正确安装。或尝试刷新页面，重试', '提示');

;

//获取媒体的兼容代码，目前只支持（Firefox,Chrome,Opera）

if (navigator.getUserMedia)

//qq浏览器不支持

if (navigator.userAgent.indexOf('MQQBrowser') > -1)

alert('对不起，您的浏览器不支持拍照功能，请使用其他浏览器', '提示');

return false;

navigator.getUserMedia(videoObj, function (stream)

video.src = stream;

video.play();

, MediaErr);

else if(navigator.webkitGetUserMedia)

navigator.webkitGetUserMedia(videoObj, function (stream)

video.src = window.webkitURL.createObjectURL(stream);

video.play();

, MediaErr);

else if (navigator.mozGetUserMedia)

navigator.mozGetUserMedia(videoObj, function (stream)

video.src = window.URL.createObjectURL(stream);

video.play();

, MediaErr);

else if (navigator.msGetUserMedia)

navigator.msGetUserMedia(videoObj, function (stream)

$(document).scrollTop($(window).height());

video.src = window.URL.createObjectURL(stream);

video.play();

, MediaErr);

else

alert('对不起，您的浏览器不支持拍照功能，请使用其他浏览器');

return false;

if(flag)

alert('为了获得更准确的测试结果，请尽量将二维码置于框中，然后进行拍摄、扫描。请确保浏览器有权限使用摄像功能');

//这个是拍照按钮的事件，

$("#snap").click(function () startPat();).show();

catch(e)

printHtml("浏览器不支持HTML5 CANVAS");

, false);

//打印内容到页面

function printHtml(content)

$(window.document.body).append(content+"<br/>");

//开始拍照

function startPat()

setTimeout(function()//防止调用过快

if(context)

context.drawImage(video, 0, 0, 320, 320);

CatchCode();

,200);

//抓屏获取图像流，并上传到服务器

function CatchCode()

if(canvas!=null)

//以下开始编数据

var imgData = canvas.toDataURL();

//将图像转换为base64数据

var base64Data = imgData;//.substr(22); //在前端截取22位之后的字符串作为图像数据

//开始异步上

$.post("saveimg.php", "img": base64Data ,function (result)

printHtml("解析结果："+result.data);

if (result.status == "success" && result.data!="")

printHtml("解析结果成功！");

else

startPat();//如果没有解析出来则重新抓拍解析

,"json");

</script>

<body>

</video>

</canvas> <br/>

</div>

</body></html>

参考技术A 首先感谢 jsqrcode 的开发者，提供这么优秀的解析二维码的代码，为我减少了很大的工作量。jsqrcode 地址百度
我的代码库地址百度
1.解决的问题：
1.能够在微博客户端呼起摄像头扫描二维码并且解析;
2.能够在原生浏览器和微信客户端中扫描二维码并且解析;
2.优点：
web端或者是 h5端可以直接完成扫码的工作；
3.缺点：
图片不清晰很容易解析失败(拍照扫描图片需要镜头离二维码的距离很近)，相对于 native 呼起的摄像头解析会有1-2秒的延时。
说明：
此插件需要配合zepto.js 或者 jQuery.js使用
使用方法：
1.在需要使用的页面按照下面顺序引入lib目录下的 js 文件

复制代码
代码如下:

<script src="lib/zepto.js"></script>
<script src="lib/qrcode.lib.min.js"></script>
<script src="lib/qrcode.js"></script>

2.自定义按钮的 html 样式
因为该插件需要使用<input type="file" /> ，该 html 结构在网页上面是有固定的显示样式，为了能够自定义按钮样式，我们可以按照下面的示例代码结构嵌套代码

复制代码
代码如下:

<div class="qr-btn" node-type="jsbridge">扫描二维码1
<input node-type="jsbridge" type="file" name="myPhoto" value="扫描二维码1" />
</div>

然后设置 input 按钮的 css 隐藏按钮，比如我使用的是属性选择器

复制代码
代码如下:

input[node-type=jsbridge]
visibility: hidden;

这里我们只需要按照自己的需要定义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);
else
$(tempBtn).on('change', this.getImgFile);

;
Qrcode.prototype =
weiBoBridge: function()
WeiboJSBridge.invoke('scanQRCode', null, function(params)
//得到扫码的结果
location.href=params.result;
);
,
getImgFile: function()
var _this_ = this;
var imgFile = $(this)[0].files;
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)
return;

if (!rFilter.test(oFile.type))
alert("选择正确的图片格式!");
return;

//读取图片成功后执行的代码
oFReader.onload = function(oFREvent)
qrcode.decode(oFREvent.target.result);
qrcode.callback = function(data)
//得到扫码的结果
location.href = data;
;
;
oFReader.readAsDataURL(oFile);
,
destory: function()
$(tempBtn).off('click');

;
//初始化
Qrcode.init = function(tempBtn)
var _this_ = this;
var inputDom;
tempBtn.each(function()
new _this_($(this));
);
$('[node-type=qr-btn]').on('click', function()
$(this).find('[node-type=jsbridge]')[0].click();
);
;
window.Qrcode = Qrcode;
)(window.Zepto ? Zepto : jQuery);