在react中调用后置扫码，获取二维码内容

这里我们为了方便直接使用一个库react-qr-reader

安装

npm insstall react-qr-reader

使用

直接在组件中引用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import React, { useState } from 'react';
import { QrReader } from 'react-qr-reader';

const Test = (props) => {
  const [data, setData] = useState('No result');

  return (
    <>
      <QrReader
        onResult={(result, error) => {
          if (!!result) {
            setData(result?.text);
          }

          if (!!error) {
            console.info(error);
          }
        }}
        style={{ width: '100%' }}
      />
      <p>{data}</p>
    </>
  );
};

关于react-qr-reader

API
Properties Types Default Value Description
constraints MediaTrackConstraints { facingMode: 'user' } 可以控制开启哪个摄像头，user是前置摄像头，environment是
onResuly function none 回调函数参数是 扫描结果

如果我们需要在手机调试，是需要在https协议下，才可以使用该组件，因为组件本身使用的navigator.mediaDevices.getUserMedia（）,这个API只能在 https localhost file 下调用。

结语：本次分享到这结束==下次再讲如何在本地使用https==