react instascan 다운로드 - react instascan 소스 코드 다운로드

react instascan

기타 소스코드

1.0.0

다운로드

리액트 인스타스캔

Instascan 라이브러리를 React로 포팅

경고

이 라이브러리는 종속성별로 instascan 대신 instascan-umd 사용하고 있습니다. 최신 버전으로 업그레이드하는 경우 istascan-umd 설치해야 합니다.

설치 중

npm

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
인스타스캔-umd >= 1

그것을 사용하여

가져오기

React Instascan은 카메라 와 스캐너라는 두 가지 구성 요소를 노출합니다.
ESModules를 사용하면:

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

또는 CommonsJS를 사용하여:

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

렌더 소품이 있는 "카메라" 구성 요소는 장치에서 사용 가능한 카메라를 가져옵니다.
Scanner 구성 요소는 카메라를 소품으로 받고 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이 true이면 카메라가 멈추고 그 반대의 경우도 마찬가지입니다.
onScan	기능	연속 모드에서 카메라를 사용하여 QR 코드를 스캔할 때 발생합니다.
시작 시	기능	카메라가 활성화되고 스캔이 시작되면 호출됩니다.
onStop	기능	카메라와 스캔이 중지되면 호출됩니다.
onActive	기능	false가 중지되거나 탭이 포커스를 얻은 결과로 스캐너가 활성화될 때 발생합니다.
비활성	기능	stop이 true가 되거나 탭이 초점을 잃어서 스캐너가 비활성화될 때 발생합니다.