h5调用摄像头识别二维码

張葒兵

已于 2024-07-26 16:37:30 修改

阅读量75

点赞数 3

分类专栏： JAVA WEB JQuery JS 文章标签： html5

于 2024-07-26 16:14:32 首次发布

本文链接：https://blog.csdn.net/zhb2010zhb/article/details/140717458

版权

JAVA WEB 同时被 3 个专栏收录

9 篇文章 0 订阅

订阅专栏

JQuery

3 篇文章 0 订阅

订阅专栏

3 篇文章 0 订阅

订阅专栏

h5调用摄像头识别二维码

html5-qrcode
- - 支持二维码和条形码同时识别的demo
  - 支持条形码识别的demo

html5-qrcode

由于一个h5项目需要调用摄像头来识别条码，本来想着用微信公众号实现，但是客户暂时不准备开公众号，测试号也不支持微信扫一扫，就在网上搜到一个别人都说比较好用的插件

github地址: click me
https://github.com/mebjas/html5-qrcode?tab=readme-ov-file#supported-code-formats

支持二维码和条形码同时识别的demo

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
  </head>
  <body>
    <div style="width: 100%" id="reader"></div>
    <div id="qr-reader-results"></div>
    <div id="qr-reader-error-results"></div>
    <button onclick="start()">开始</button>
    <button onclick="stop()">结束</button>
  </body>
<script src="./html5-qrcode.min.js"></script>
<script>
    let config = {
    fps: 10,
    //aspectRatio: 1.333334,
    qrbox: {width:250,height:250}, //设置后镜头内会有一个框
    rememberLastUsedCamera: true, //记住上一次使用的相机
    supportedScanTypes: [Html5QrcodeScanType.SCAN_TYPE_CAMERA]
     };
    const html5QrCode = new Html5Qrcode("reader"); 
const qrCodeSuccessCallback = (decodedText, decodedResult) => {
    /* handle success */
   document.getElementById('qr-reader-results').innerHTML= decodedText;
   html5QrCode.stop();
};
function start(){
// user前置摄像头 environment：后置摄像头
html5QrCode.start({ facingMode: "environment" }, config, qrCodeSuccessCallback);
}
function stop(){
// user前置摄像头 environment：后置摄像头
html5QrCode.stop();
}
</script>
</html>

注意：仅支持localhost 和https的方式访问

支持条形码识别的demo

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
  </head>
  <body>
    <div style="width: 100%" id="reader"></div>
    <div id="qr-reader-results"></div>
    <div id="qr-reader-error-results"></div>
    <button onclick="start()">开始</button>
    <button onclick="stop()">结束</button>
  </body>
<script src="./html5-qrcode.min.js"></script>
<script>
    let config = {
    fps: 10,
    //aspectRatio: 1.333334,
    qrbox: {width:500,height:200}, //设置后镜头内会有一个框
    rememberLastUsedCamera: true, //记住上一次使用的相机
    supportedScanTypes: [Html5QrcodeScanType.SCAN_TYPE_CAMERA],
    useBarCodeDetectorIfSupported: true };
    const html5QrCode = new Html5Qrcode("reader", { formatsToSupport: [ Html5QrcodeSupportedFormats.CODABAR,Html5QrcodeSupportedFormats.CODE_39,Html5QrcodeSupportedFormats.CODE_93,Html5QrcodeSupportedFormats.CODE_128] }); //暂时只需要支持这几种类型的条形码即可
const qrCodeSuccessCallback = (decodedText, decodedResult) => {
   document.getElementById('qr-reader-results').innerHTML= decodedText;
   html5QrCode.stop();
};
function start(){
// user前置摄像头 environment：后置摄像头
html5QrCode.start({ facingMode: "environment" }, config, qrCodeSuccessCallback);
}
function stop(){
// user前置摄像头 environment：后置摄像头
html5QrCode.stop();
}
</script>
</html>