首先申明下本篇文章并没有彻底解决h5纯网页扫码问题，这儿只是将我的研究过程，以及收集到的有用资料记录下，以抛砖引玉，一来给后来人以参考，二来也为我之后继续研究做个记录，省的每次都从头开始研究。
h5网页扫码实现上去比较困难，在陌陌中我们可以利用陌陌的api，实际好多都是陌陌做的工作。而且单纯的联通浏览器中呢？我之前探求过多次都是无果，网上也查阅了好多资料，并不是这么顺利。好多人都是退而求其次采用照相上传的方式，也就是使用inputtype=file，并且采用这个方案的话要完成辨识过程得经过1.点击按键调用照相2.点击照相按键（通常手机照相中间有个矩形的按键）3.确认图片上传（拍完了右下角有个√的图标），这三步二维码解码器，实际顾客可能没对好焦就上传或则距离不合适，这样就得重新执行这三步，造成顾客体验十分不好。倘若能像原生app那样，直接一点就手动辨识就好了，但是现今的浏览器厂家几乎没有任何一家对接h5扫二维码功能，追根追溯应当是还没列入HTML标准吧，假如都像陌陌那样提供一个调用扫码的插口就好了，惠及广大程序员。屁话不多说了，下边记录我早已探求到的资料。
之前看某个案例使用的调用摄像头不停的在canvas上绘图二维码解码器，之后后台差不多每秒向后台上传一个图片，直至辨识出结果停止，这样比较接近于原生，然而因为兼容性问题，例如qq外置浏览器，陌陌外置浏览器常常会失常，在手机自带浏览器或则uc等浏览器表现也是时好时坏。不过这样的逻辑应当是可以的。就是不停的从摄像头获取数据绘制到canvas上，同时每隔一秒向后台上传一次图，直至辨识完成。
后来见到饲料网上的疗效实现得很不错，可惜是调用后置摄像头的，不晓得只能后置还是可以设置的，你们可以用手机访问饲料二维码解码器来测试。
确实可行，倘若能调用前置就完美了。通过查看元素，发觉是用的video标签显示摄像头数据的。至于究竟是只能后置还是说后置前置可以选择呢？依据对饲料网的代码剖析，发觉如此个关键性的js文件：
并且难以继续，上面还调用了其他的文件，不晓得怎么追踪。
function ajaxFileUploaddeqr() {
$("#deqr_result").hide(),
$(".deqr_prompt").hide(),
$(".deqr_loading").show(),
seajs.use(["lib/plug/ajaxfileupload", "uploadfile/uploaddeqr"],
function(e, t) {
t.ajaxFileUpload()
})
}
function checkURL(e) {
var t = e,
n = /http(s)?://([w-]+.)+[w-]+(/[w- ./?%&=]*)?/,
a = new RegExp(n);
return 1 == a.test(t) ? !0 : !1
}
var oldIE;
$(function() {
function e() {
n.onScan = function(e, t) {
var a = "";
if (!e) if ("onlineScan" === t.type && 1 === t.data.status) {
var a = t.data.info.data[0];
n.stopScan(!1),
$(".scanner").hide(),
$("#scan-content").show().text(a),
$("#continueToScan").show(),
$("#copyResultBtn").show(),
$("#htmlScanModal .modal-footer").show()
} else if ("webScan" === t.type && t.data) {
var a = t.data.data;
n.stopScan(!1),
$(".scanner").hide(),
$("#scan-content").show().text(a),
$("#continueToScan").show(),
$("#copyResultBtn").show(),
$("#htmlScanModal .modal-footer").show()
}
},
n.scan(document.querySelector("#scanVideo")),
$(".scanner").show(),
$("#continueToScan").hide(),
$("#scan-content").hide(),
$("#copyResultBtn").hide(),
$("#htmlScanModal").modal("show"),
$("#htmlScanModal .modal-footer").hide()
}
$("html").is(".lt-ie9") && (oldIE = !0),
oldIE && $('input[type="text"], textarea').placeholder();
var t = document.documentElement.clientHeight - 70 - 360;
$("#warper").css("min-height", t + "px"),
$(document).click(function(e) {
$(".deqr_url").is(e.target) || $(".deqr_url").has(e.target).length > 0 || "" != $("#deqr_urls").val() ? ($("#deqr_url_show").removeClass("none"), $("#qr-url").hide()) : ($("#deqr_url_show").addClass("none"), $("#qr-url").show())
}),
$("#deqr_url_btn").click(function() {
var e = $("#deqr_urls").val();
e.indexOf("http://") < 0 && e.indexOf("https://") < 0 && $("#deqr_urls").val("http://" + e),
$("#deqr_result").hide(),
$(".deqr_prompt").hide(),
$("#modal-alert-deqr-result").modal("show"),
$(".deqr_loading").show();
var e = $("#deqr_urls").val();
$.post("/Api/Browser/deqr", {
data: e
},
function(e) {
1 == e.status ? ($(".deqr_loading").hide(), $("p#deqrresult").text(e.data.RawData), $("#deqr_result").show()) : ($(".deqr_loading").hide(), alert(e.data.info), $(".deqr_prompt").show())
},
"json")
});
var n = null;
$("#toggleToFlash").click(function() {
$("#htmlScanModal").modal("hide"),
n.stopScan(!1),
seajs.use("m/deqrCamera",
function(e) {
e.openCamera()
})
}),
$("#stopScan").click(function() {
$("#htmlScanModal").modal("hide")
}),
$("#copyResultBtn").click(function() {
if (!window.getSelection || !document.createRange) return void alert("您的浏览器不支持复制功能");
var e = window.getSelection();
e.removeAllRanges();
var t = document.createRange();
t.selectNodeContents($("#scan-content")[0]),
e.addRange(t),
document.execCommand("copy"),
alert("复制成功")
}),
$("#continueToScan").click(function() {
e()
}),
$("#htmlScanModal").on("hide.bs.modal",
function() {
setTimeout(function() {
n.stopScan(!1)
},
300)
}),
$("#deqrcamera").click(function() {
try {
if (n = new $QRCodeScanner, n.canIUse()) return n.openWebScan = !0,
n.scanFrequency = 1e3,
void e();
throw Error("Can not use cam to scan.")
} catch(t) {
seajs.use("m/deqrCamera",
function(e) {
e.openCamera()
})
}
}),
$("input#filedatacode").click(function() {
var e = $(this).attr("uptype");
seajs.use(["//static.clewm.net/public/upload.js?v=20170503", "m/upload"],
function(t, n) {
n.upload(e)
})
})
});带着这个问题继续搜索，一个网友提供了这个链接：
ZXing|ScanQRCodefromVideoCamera
尽管上面写的能选择后置和前置，并且经过测试发觉还是只能调用后置摄像头。
两个手机都是这么，均不能调用前置摄像头。不晓得如何回事，问题暂时调查到这里。
参考文章：
补充目前见到的早已实现或半实现的：
1.打开速率极慢，要耐心等待。许久之前听到的。辨识确切率不太好。
2.无效。普通浏览器会死机未能正常录象，在陌陌环境下完全无效果
3.疗效很棒。只是默认调用的后置摄像头。在陌陌下也可以使用。目前见到的实现最好的一款。
