聊聊H5浏览器实现扫一扫

我们开发了一款H5产品，原本是由小程序跳转进入的，结果客户因为域名未备案原因，导致产品无法在移动端使用。继而我们将程序嵌入APP，奈何客户方APP里面居然米有提供扫一扫接口导致产品无法使用。于是自己调研了一下怎样不借助平台自己实现扫一扫功能。找了相当多的资料，结果在某哥的文章中找到了解决方法，点此可看（掘金），在此也谢谢这位大神的文章，让我脱离苦海。接下来我讲下我的实现：

我们移动端用的是react

第一步引入插件zxing

cnpm i -S @zxing/library@0.15.1

此处注意，一定要使用0.15.x或者0.16.0版本，其他版本会报错

第二步，测试页面代码

import React, {useState, useEffect} from 'react';
import { Toast, Button } from 'antd-mobile';
import { BrowserQRCodeReader } from '@zxing/library';

// 此方法是为了兼容ios无法获取设备ID而写的
async function getVedioPermission(){
    let m = await navigator.mediaDevices.getUserMedia({video:true, audio:true}).catch(function(){Promise.resolve(null)})
    if(!