15年软件开发经验 只做源码定制 互联网+定制化解决方案

15年软件开发经验,只做源码定制!

原创设计 定制开发

满足您的个性化需求

当前位置:首页 前端开发 js

Js原生扫码(支持二维码,条形码)

闫志林| 发布于 2021-12-23 18:42:52| 1007阅读| 0点赞| 0评论
举报

zxing开源库的基本使用

 ZXing,一个支持在图像中解码和生成条形码(如二维码、PDF 417、EAN、UPC、Aztec、Data Matrix、Codabar)的库。ZXing(“zebra crossing”)是一个开源的项目。支持多语言

GitHub地址:https://github.com/zxing/zxing

因为项目需求研究了下js的基本使用方法,直接上代码

 

window.addEventListener('load', function () {
      // 老的浏览器可能根本没有实现 mediaDevices,所以我们可以先设置一个空的对象
      if (navigator.mediaDevices === undefined) {
        navigator.mediaDevices = {};
      }
      if (navigator.mediaDevices.getUserMedia === undefined) {
        navigator.mediaDevices.getUserMedia = function (constraints) {
          var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
          if (!getUserMedia) {
            return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
          }
          return new Promise(function (resolve, reject) {
            getUserMedia.call(navigator, constraints, resolve, reject);
          });
        }
      }
      if (
        navigator.mediaDevices != undefined &&
        navigator.mediaDevices.getUserMedia != undefined
      ) {
     
        const constraints = {
          video: {
            facingMode: "environment", //后置摄像头
            width: 720, height: 1280, //可以调节宽度 超出范围有时候无法显示
            // width: {
            //   min: 1280,
            //   ideal: 1920,
            //   max: 2560,
            // },
            // height: {
            //   min: 720,
            //   ideal: 1080,
            //   max: 1440,
            // },
          },
        };
        navigator.mediaDevices.getUserMedia(constraints).then(stream => {
          const video = document.getElementById("video");
          if ("srcObject" in video) {
            video.srcObject = stream;

          } else {
  
            video.src = window.URL.createObjectURL(stream);

          }
          video.onloadedmetadata = function (e) {
            video.play();
          };

          codeReaderFn();

        }).catch(err => {
          alert(err);
          //document.getElementById('result2').textContent = err;
          // reject(err);
        })
      }
    })

    function codeReaderFn() {
      let selectedDeviceId;
      const codeReader = new ZXing.BrowserMultiFormatReader()
      // 获取摄像头列表
      codeReader.listVideoInputDevices()
        .then((videoInputDevices) => {
          //const sourceSelect = document.getElementById('sourceSelect')

          //document.getElementById('result2').textContent = selectedDeviceId;
          
          if (videoInputDevices.length >= 1) {
            // 遍历摄像头个数
            videoInputDevices.forEach((element) => {
              const sourceOption = document.createElement('option')
              sourceOption.text = element.label
              sourceOption.value = element.deviceId
              if (element.label.indexOf('back') != -1) {
                selectedDeviceId = element.deviceId;
              } else {
                selectedDeviceId = videoInputDevices[videoInputDevices.length - 1].deviceId
              }

            })
            decodeFromVideoDevice(codeReader, selectedDeviceId, 'video');
          }
        

        })
        .catch((err) => {
          console.error(err)
        })
    }

    function decodeFromVideoDevice(codeReader, selectedDeviceId, domId) {

      codeReader.decodeFromVideoDevice(selectedDeviceId, domId, (result, err) => {
        // 扫码结果回调
        if (result) {
           
            getGoods(result.text);
        }
        if (err && !(err instanceof ZXing.NotFoundException)) {
          console.error(err);
        }
      })
    
    }

Zxing项目非常大,按需引入

0

0条评论

别默默看啦~登录/注册一起参与讨论吧~

热门标签

闫志林
微信扫一扫立即咨询
账号登录|扫码登录

立即注册 |忘记密码?

欢迎注册

已有账号马上登录

重置密码

扫码绑定微信
微信扫一扫

绑定手机号

分享到-微信

举报

  • 举报类型:

  • 举报描述:

您好,当前积分不足。

在线客服
拨打电话
17330196230 13230981129
顶部