Html5网页中用JavaScript调用本地手机摄像头扫描识别微信二维码、条形码:postMessage跨域https传递扫码结果消息

QR Scanner

qr-scanner是一个支持HTML5网页扫描条形码、二维码的开源库。

轻量级：〜48.7 kB（〜12.4 kB压缩后）。
性能优内存占用少。
在WebWorker中运行，不阻塞主进程
在彩色QR码上获得性能优
根据我们的基准测试，该项目较jsqrcode提升约2-3倍。
错误识别率低。
支持扫描网络摄像头的以及扫描图片文件。

项目地址：https://github.com/nimiq/qr-scanner
项目示例：https://nimiq.github.io/qr-scanner/demo

效果：

使用摄像头扫描时需要使用HTTPS连接。

QR Code Scanner

这是另一个在HTML5网页中利用摄像头扫码的示例，使用全屏扫码，并带有动画效果，同样只支持HTTPS。

https://github.com/code-kotis/qr-code-scanner

BarCode 一维码扫描

QuaggaJS是完全用JavaScript编写的条形码扫描器，支持实时定位和解码各种类型的条形码，例如EAN，CODE 128，CODE 39，EAN 8，UPC-A，UPC-C，I2of5、2of5，CODE 93和 CODABAR。 

https://github.com/serratus/quaggaJS

本地调用摄像头扫码解决思路

postMessage [放弃]

出于安全考虑，网页只允许在HTTPS连接的情况下，打开摄像头。如果是本地域名，可以使用如下解决调用摄像头扫码：

1) 架设一台HTTPS扫码服务器，为https域名

2) 本地网页i用frame嵌套一个HTTPS页面，将本域名 origin 参数传递给 https 页面

3) 本地网页侦听事件： window.addEventListener('message', function() { console.log('message', arguments) }, false)

4) https 页面扫码后发送事件并带orgian域名，如： parent.window.postMessage('areyou ok', 'http://192.168.2.105:8064') 

注意* 以上步骤仅支持嵌套的 iframe 向父级 postMessage。使用 window.open 打开的页面仅在同域名情况下能 postMessage 传递消息，否则会报错：

parent.window.postMessage('areyou ok', 'http://192.168.2.105:8064')
undefined
VM739:1 Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('http://192.168.2.105:8064') does not match the recipient window's origin ('https://abcdeefdXXX.com').

 此方法消息机制正常，但在手机上测试发现，最新版的手机不允许http嵌套的https页面打开摄像头，此方案己不可行。

localStorage

与上文方法类似：

1）制作一个后端页面，用来生成写locaStorage的script代码

2) 本地页面点击扫码后，将回调地址给 https 扫码页面，启动timer检查

 $idScan.on('click', function(e) {
  e.preventDefault()
  var callbak = window.origin + '/oncedb-extension/json/data/scanqr/'
  var url = $idScan.attr('href') + '?callbak=' + encodeURIComponent(callbak)

  window.open(url)
  setQRTimer()
 })

3）https完成扫码完成后将值写入回调地址并跳转

4）回调页面在后台输出写入 localStorage 的脚本到前端执行，代码采用 onceio 编写

app.get('/oncedb-extension/json/data/scanqr/:value$', function(req, res) {
 var value = req.params.value
 var msgInfo = { type: 'qrscan', result: value }

 var script = `<script>
 window.localStorage.setItem("qrcode", "${value}");
 window.close();
 </script>`

 res.send(script)
})

5) 扫码发起页面刷新检测 localStorage，有值则停止检测，将扫码结果填入输入框

var qrCodeTimer
var setQRTimer = function() {
 if (qrCodeTimer) {
   return
 }

 qrCodeTimer = setInterval(function() {
 var qrcode = localStorage.getItem('qrcode')
   if (!qrcode) {
     return
   }

   clearInterval(qrCodeTimer)
   qrCodeTimer = null
   localStorage.removeItem('qrcode')

   $id.val(qrcode)
   gotoByID()
 }, 1000)
}