react instascan

反应 Instascan

将 Instascan 库移植到 React

警告

该库使用instascan-umd而不是instascan作为每个依赖项。如果您要升级到较新的版本，则必须安装istascan-umd 。

安装中

新项目管理

npm install react-instascan react instascan-umd --save

纱

yarn add react-instascan react instascan-umd

使用 unpkg CDN

 < script type =" application/javascript " src =" https://unpkg.com/react-instascan/dist/main.js " > </ script > 

要求

要使用这个库你至少需要：

• 反应 >= 16.3
• instascan-umd >= 1

使用它

输入

React Instascan 公开了两个组件： Cameras和Scanner 。
使用 ESModule：

 import { Cameras , Scanner } from "react-instascan" ;

或使用 CommonsJS：

 const { Cameras , Scanner } = require ( "react-instascan" ) ;

“Cameras”组件带有渲染道具，将获取设备上可用的相机。
扫描仪组件接收相机作为道具，并接收VideoHTMLElement作为子元素。然后在读取代码时会调用onScan监听器。其他事件类型也可用（查看 API 表）：

 < Cameras >
  { cameras => (
    < div >
      < h1 > Scan the code! < / h1 >
      < Scanner camera = { cameras [ 0 ] } onScan = { onScan } >
        < video style = { { width : 400 , height : 400 } } / >
      < / Scanner >
    < / div >
  ) }
< / Cameras >

扫描仪属性

姓名	类型	描述
相机	目的	<Camera /> 返回的相机对象
选项	目的	Instascan.Scanner 的相同选项
停止	布尔值	如果 stop 为真，则相机停止，反之亦然
扫描时	功能	使用相机在连续模式下扫描二维码时发出
启动时	功能	当相机处于活动状态且扫描已开始时调用
停止	功能	当相机和扫描停止时调用
激活状态	功能	当扫描仪由于停止变为错误或选项卡获得焦点而变为活动状态时发出
不活动状态	功能	当扫描仪因 stop 变为 true 或选项卡失去焦点而变为非活动状态时发出

有关更多详细信息，请查看 Instascan API

贡献

直接从源码使用

尽管此项目附带了一个简单的示例，但您可能希望直接在您的代码上使用此代码来测试和修复可能的错误。为此，您只需链接此包即可

 yarn link

转到您的项目根目录（应用程序的package.json所在的位置），然后使用链接的版本：

 yarn link react-instascan

现在只需在监视模式下启动构建过程，您将看到项目中的实时变化

 yarn build --watch

有关贡献的更多信息，请参阅贡献指南

执照

该项目已获得 MIT 许可