纯H5实现扫一扫功能,亲测PC和手机端可用

前言

最近项目要求实现纯网页中的扫码功能,网上搜素了一些资料, 大都不尽如意。
主要使用MediaDevices.getUserMedia()获取摄像头然后通过扫码解析接口实
现二维码及条形码的解析,且识别率不高。经过测试后,我最终选择了html5-qrcode

效果图如下

scan.gif

主要思路和步骤

  • 使用html5-qrcode github:https://github.com/mebjas/html5-qrcode
  • 若是vue项目则直接npm i html5-qrcode
  • 使用Html5Qrcode自定义面版
  • 获取相机权限并获取相机ID扫描解析二维码
  • 没有获取到相机ID则传递约束来代替相机ID
  • 使用本地图库或者拍照解析二维码

说明:

  • 若要使用相机必须在https协议之下
  • 目前内联扫描和基于文件的扫描是互斥的
    如果您想同时使用两者,请使用html5QrCode.clear()来清除画布
  • PC和真机展示效果不一致,真机请在https下测试

代码如下




    
    
    
    scan
    
    



    
    
    
    

你可能感兴趣的:(纯H5实现扫一扫功能,亲测PC和手机端可用)