웹캠에서 QR 코드를 읽기 위한 React 구성 요소

블로그

웹캠에서 QR 코드를 읽기 위한 React 구성 요소

소개

에게 반응 웹캠에서 QR 코드를 읽기 위한 구성 요소입니다. WebRTC 표준을 사용하여 웹캠 데이터를 읽고 jsQR 해당 데이터에서 QR 코드를 감지하는 데 사용됩니다. 속도와 경험을 최적화하기 위해 웹 작업자를 사용하여 별도의 프로세스에서 무거운 QR 코드 알고리즘을 오프로드합니다. 웹 작업자는 구성 요소 생성 시 인라인되고 로드됩니다.

알려진 문제

  • 서버 측 렌더링은 작동하지 않으므로 브라우저 환경에서 렌더링할 때만 구성 요소가 필요합니다.
  • 브라우저 구현으로 인해 카메라는 https 또는 localhost를 통해서만 액세스할 수 있습니다.
  • Firefox에서는 사용할 카메라를 묻는 메시지가 사용자에게 표시되므로 |_+_| 영향을 미치지 않습니다.
  • IOS 11에서는 Apple이 타사 브라우저에서 API를 사용할 수 없도록 하기 때문에 Chrome 또는 Firefox에서는 지원되지 않고 Safari에서만 지원됩니다.

설치

facingMode

예시

npm install --save react-qr-reader

소품

이벤트

소품 논쟁 설명
온스캔 import React, { Component } from 'react' import QrReader from 'react-qr-reader' class Test extends Component { state = { result: 'No result' } handleScan = data => { if (data) { this.setState({ result: data }) } } handleError = err => { console.error(err) } render() { return (

{this.state.result}

Java에서 다른 클래스의 메소드를 인쇄하는 방법
) } }
스캔 이벤트 핸들러. 디코딩된 값 또는 |_+_|로 모든 스캔을 호출합니다. QR 코드를 찾을 수 없는 경우.
오류 발생 result 오류가 발생하면 호출됩니다.
길 위에 null 구성 요소를 사용할 준비가 되면 호출됩니다. 개체 속성은 |_+_|: 부울, |_+_|: 문자열입니다.
이미지로드 img onLoad 이벤트 legacyMode의 이미지가 로드될 때 호출됩니다.

옵션

소품 유형 기본 설명
지연 숫자 또는 |_+_| Error 스캔 간 지연(밀리초)입니다. |_+_|에서 간격 패스를 비활성화하려면.
페이싱 모드 |_+_| 또는 |_+_| object 사용할 카메라를 지정합니다(사용 가능한 경우).
해결 숫자 mirrorVideo 비디오(또는 legacyMode의 이미지)의 해상도입니다. 해상도가 높을수록 정확도는 높아지지만 처리 시간도 느려집니다.
스타일 유효한 React 스타일 없음 컨테이너 요소의 스타일 지정. 경고 미리보기는 항상 1:1 종횡비를 유지합니다.
클래스 이름 없음 컨테이너 요소의 ClassName입니다.
쇼뷰파인더 부울 streamLabel 뷰파인더에서 빌드를 표시하거나 숨깁니다. 데모 보기
제약 물체 false 기본 동작을 재정의하는 사용자 지정 카메라 제약 조건을 사용합니다. MediaTrackConstraints
레거시 모드 부울 500 장치가 카메라 액세스를 허용하지 않는 경우(예: IOS 브라우저, Safari) legacyMode를 활성화하여 사용자가 사진을 찍거나(모바일 장치에서) 기존 사진을 사용하도록 할 수 있습니다. 이미지 대화 상자를 트리거하려면 |_+_| 메서드를 호출하기만 하면 됩니다. 상위 구성 요소에서. 경고 사용자 작업에서 메서드를 호출해야 합니다(예: 일부 요소에 대한 클릭 이벤트).

개발자

종속성 설치

false

짓다

user

데모

environment

dmt 어디서 사나요

구르는

environment

터미널에서 github에 파일 업로드

테스트된 플랫폼

  • 크롬 맥 OS 및 안드로이드
  • 파이어폭스 맥OS & 안드로이드
  • 사파리 macOS 및 IOS

다운로드 세부 정보:

작가: 조두스노두스

라이브 데모: https://jodusnodus.github.io/react-qr-reader

깃허브: https://github.com/JodusNodus/react-qr-reader

#reactjs #자바스크립트 #반응