html5 qrcode 다운로드 - html5 qrcode 소스 코드 다운로드

html5 qrcode

기타 소스코드

Version 2.3.8

다운로드

HTML5-QR코드

중요 - 이 프로젝트의 새로운 소유자를 찾고 있습니다.

관심이 있으시면 [email protected] 으로 연락주세요.

HTML5-QR코드

중요 프로젝트는 추후 공지가 있을 때까지 유지 관리 모드입니다. 작성자는 당분간 어떠한 버그 수정이나 개선도 할 수 없습니다. 끌어오기 요청도 당분간 병합되지 않습니다. 유지 관리할 수 있는 포크가 있는 경우 [email protected]으로 세부 정보를 공유해 주세요. 여기에 광고하게 되어 기쁘게 생각합니다! 프로젝트를 그대로 사용해도 좋습니다. 예: scanapp.org.

웹용 경량 및 크로스 플랫폼 QR 코드 및 바코드 스캐닝 라이브러리

이 경량 라이브러리를 사용하여 QR 코드, 바코드 및 기타 일반적인 코드 스캔 기능을 웹 애플리케이션에 쉽고 빠르게 통합하세요.

주요 하이라이트

? 다양한 유형의 바코드 및 QR 코드 스캔을 지원합니다.
? Android, IOS, MacOs, Windows 또는 Linux 등 다양한 플랫폼을 지원합니다.
Chrome, Firefox, Safari, Edge, Opera와 같은 다양한 브라우저를 지원합니다.
? 카메라 및 로컬 파일을 사용한 스캔 지원
➡️ UI가 포함된 엔드투엔드 라이브러리와 자신만의 UI를 구축할 수 있는 하위 수준 라이브러리가 함께 제공됩니다.
? 플래시/토치 지원, 확대/축소 등과 같은 사용자 정의를 지원합니다.

두 종류의 API를 지원합니다.

Html5QrcodeScanner — UI가 포함된 엔드투엔드 스캐너로 10줄 미만의 코드로 통합됩니다.
Html5Qrcode — 카메라 설정, 권한 처리, 코드 읽기 등에 대한 걱정 없이 UI를 구축하는 데 사용할 수 있는 강력한 API 세트입니다.

장치에서 로컬 파일을 검색하는 지원은 새로 추가되었으며 스마트폰의 인라인 웹 카메라 액세스를 지원하지 않는 웹 브라우저에 유용합니다. 참고: 파일을 서버에 업로드하지 않으며 모든 작업이 로컬에서 수행됩니다.


scanapp.org의 데모	qrcode.minhazav.dev의 데모 - 다양한 유형의 코드 스캔

여러분의 도움이 필요합니다!

이 프로젝트의 후원 목표를 지원하여 기능 개발, 버그 수정에 대한 인센티브를 제공합니다. 여기에서 후원 기능 요청 목록을 확인하세요.

선적 서류 비치

이 프로젝트에 대한 문서는 scanapp.org/html5-qrcode-docs로 이동되었습니다.

시작하기
지원되는 프레임워크
지원되는 1D 및 2D 코드 형식
자세한 API 문서

지원되는 플랫폼

우리는 점점 더 많은 플랫폼에 대한 지원을 추가하기 위해 지속적으로 노력하고 있습니다. 라이브러리가 작동하지 않는 플랫폼이나 브라우저를 발견하면 언제든지 문제를 제기해 주세요. 데모 링크를 확인하여 테스트해보세요.

전설

완전한 지원을 의미합니다 — 인라인 웹캠 및 파일 기반
부분적 지원을 의미합니다. 파일 기반만 지원되며 웹캠은 진행 중입니다.

PC / 맥

파이어폭스	크롬	원정 여행	오페라	가장자리

기계적 인조 인간

크롬	파이어폭스	가장자리	오페라	오페라 미니	UC

IOS

원정 여행	크롬	파이어폭스	가장자리
	*	*

* IOS 버전 >= 15.1에서 지원됨
버전 15.1 이전에는 IOS용 Webkit은 IOS의 Chrome, Firefox 및 기타 브라우저에서 사용되며 아직 웹캠 권한이 없습니다. iOS 지원을 수정하는 데 지속적인 문제가 있습니다 - 문제/14

프레임워크 지원

이 라이브러리는 여러 다른 프레임워크와 함께 쉽게 사용할 수 있으며, 그 중 몇 가지에 대한 예제를 추가해 왔으며 계속해서 더 추가할 예정입니다.


HTML5	VueJ	ElectronJ	반응하다	문학

지원되는 코드 형식

코드 스캔은 Zxing-js 라이브러리에 따라 다릅니다. 우리는 더 많은 유형의 코드 스캔에 대한 지원을 추가하기 위해 노력할 것입니다. 특정 유형의 코드가 있으면 도움이 될 것이라고 생각되면 기능 요청을 제출하세요.

암호	예
QR코드
아즈텍
CODE_39
CODE_93
CODE_128
ITF
EAN_13
EAN_8
PDF_417
UPC_A
UPC_E
DATA_MATRIX
맥시코드*
RSS_14*
RSS_확장됨*

*기본 BarcodeDetector API 통합과의 실험적 통합에서는 형식이 지원되지 않습니다(자세히 알아보기).

설명 - 데모 보기

scanapp.org에서 엔드투엔드 스캐너 경험을 확인하세요.

이는 HTML5 호환 브라우저에서 실행되는 애플리케이션에 QR 코드, 바코드 및 기타 몇 가지 유형의 코드 스캔 기능을 통합하는 크로스 플랫폼 JavaScript 라이브러리입니다.

지원:

기기에서 카메라 쿼리 중(사용자 권한 포함)
스캔을 위한 사용하기 쉬운 사용자 인터페이스로 라이브 카메라 피드 렌더링
다양한 종류의 QR 코드, 바코드 및 기타 형식 스캔 지원
코드 스캔을 위해 장치에서 이미지 파일 선택 지원

사용방법

scanapp.org/html5-qrcode-docs에서 이 라이브러리를 사용하는 방법에 대한 자세한 지침을 찾아보세요.

데모

이 이미지를 스캔하거나 blog.minhazav.dev/research/html5-qrcode.html을 방문하세요.

자세한 내용은

이 라이브러리를 사용하는 방법에 대한 다음 기사를 확인하세요.

HTML 및 JavaScript를 사용하는 QR 및 바코드 스캐너
HTML5 QR 코드 스캔 — jQuery 종속성 없이 v1.0.1을 출시하고 Promise 기반 API를 리팩터링했습니다.
JavaScript를 사용한 HTML5 QR 코드 스캔 — 로컬 파일 스캔 및 추가된 기본 카메라 사용 지원(v1.0.5)

스크린샷

그림: MacBook Pro에서 실행되는 Google Chrome의 스크린샷

선적 서류 비치

scanapp.org/html5-qrcode-docs/docs/apis에서 전체 API 문서를 찾아보세요.

`start()` 메소드의 추가 선택적 `configuration`

스캔 동작과 사용자 인터페이스(UI)를 모두 구성하는 데 사용할 수 있는 구성 개체입니다. 대부분의 필드에는 다른 값이 제공되지 않는 한 사용되는 기본 속성이 있습니다. 아무것도 재정의하지 않으려면 빈 객체 {} 를 전달하면 됩니다.

`fps` — 정수, 예 = 10

초당 프레임이라고도 하며 기본값은 2이지만 스캔 속도를 높이기 위해 늘릴 수 있습니다. 값을 너무 높이면 성능에 영향을 줄 수 있습니다. 값 >1000 단순히 실패합니다.

`qrbox` — `QrDimensions` 또는 `QrDimensionFunction` (선택 사항), 예 = `{ width: 250, height: 250 }`

스캔에 사용할 뷰파인더의 영역을 제한하려면 이 속성을 사용하십시오. 뷰파인더의 나머지 부분은 음영 처리됩니다. 예를 들어 config { qrbox : { width: 250, height: 250 } } 를 전달하면 화면은 다음과 같습니다.

다음과 같은 구성으로 직사각형 스캔 영역을 설정하는 데 사용할 수 있습니다.

 let config = { qrbox : { width : 400 , height : 150 } }

이 구성은 다음 유형의 기능도 허용합니다.

 /**
  * A function that takes in the width and height of the video stream 
* and returns QrDimensions.
* 
* Viewfinder refers to the video showing camera stream.
*/
type QrDimensionFunction =
    ( viewfinderWidth : number , viewfinderHeight : number ) => QrDimensions ;

이를 통해 비디오 크기에 따라 동적 QR 상자 크기를 설정할 수 있습니다. 예를 들어 다음 블로그 기사를 참조하세요. Html5-qrcode에서 동적 QR 상자 크기 설정 - ScanApp 블로그

이는 바코드 스캐닝에 바람직할 수 있습니다.

이 값이 설정되지 않으면 음영처리된 QR 상자가 렌더링되지 않으며 스캐너는 비디오 스트림의 전체 영역을 스캔합니다.

`aspectRatio` — 부동 소수점, 16:9 종횡비의 경우 예 1.777778

특정 종횡비로 비디오 피드를 렌더링하려면 이 속성을 사용합니다. 100000:1 과 같은 비표준 종횡비를 전달하면 비디오 피드가 표시되지 않을 수도 있습니다. 이상적인 값은 다음과 같습니다.

값	종횡비	사용 사례
1.333334	4:3	표준 카메라 종횡비
1.777778	16:9	전체 화면, 영화
1.0	1:1	정사각형 보기

값을 전달하지 않으면 전체 뷰파인더가 스캔에 사용됩니다. 참고 : 이 값은 QR code HTML element 의 너비와 높이보다 작아야 합니다.

`disableFlip` — 부울(선택 사항), 기본값 = false

기본적으로 스캐너는 가로로 뒤집힌 QR 코드를 스캔할 수 있습니다. 또한 때로는 미러링되는 모바일 장치의 전면 카메라를 사용하여 QR 코드를 스캔할 수도 있습니다. 이는 기본적으로 false 이며 다음과 같은 경우에만 이를 변경하는 것이 좋습니다.

카메라 피드를 미러링할 수 없는 것이 확실합니다(가로로 뒤집기).
이 기능을 활성화하면 성능 문제가 발생합니다.

다음은 일반 QR 코드와 미러링된 QR 코드의 예입니다.

일반 QR코드	미러링된 QR 코드

`rememberLastUsedCamera` — 부울(선택 사항), 기본값 = true

true 인 경우 사용자가 마지막으로 사용한 카메라와 날씨 또는 권한이 부여되지 않은 것이 로컬 저장소에 기억됩니다. 사용자가 이전에 권한을 부여한 경우 UI의 권한 요청 옵션을 건너뛰고 마지막으로 선택한 카메라가 스캔을 위해 자동으로 실행됩니다.

true 인 경우 라이브러리는 카메라 권한이 이전에 부여되었는지, 마지막으로 사용된 카메라를 기억해야 합니다. "카메라"에 대한 권한이 이미 부여된 경우 이전에 사용한 카메라에 대해 QR 코드 스캔이 자동으로 시작됩니다.

`supportedScanTypes` - `Array<Html5QrcodeScanType> | []`

이는 Html5QrcodeScanner 에만 지원됩니다.

기본값 = [Html5QrcodeScanType.SCAN_TYPE_CAMERA, Html5QrcodeScanType.SCAN_TYPE_FILE]

이 필드는 다음 용도로 사용될 수 있습니다.

Camera 또는 File 기반 스캔으로 지원을 제한합니다.
기본 스캔 유형을 변경합니다.

사용 방법:

 function onScanSuccess ( decodedText , decodedResult ) {
  // handle the scanned code as you like, for example:
  console . log ( `Code matched = ${ decodedText } ` , decodedResult ) ;
}

let config = {
  fps : 10 ,
  qrbox : { width : 100 , height : 100 } ,
  rememberLastUsedCamera : true ,
  // Only support camera scan type.
  supportedScanTypes : [ Html5QrcodeScanType . SCAN_TYPE_CAMERA ]
} ;

let html5QrcodeScanner = new Html5QrcodeScanner (
  "reader" , config , /* verbose= */ false ) ;
html5QrcodeScanner . render ( onScanSuccess ) ;

파일 기반 검사의 경우에만 다음을 선택하십시오.

supportedScanTypes: [ Html5QrcodeScanType . SCAN_TYPE_FILE ]

현재와 같이 두 가지를 모두 지원하려면 이 필드를 무시하거나 다음과 같이 설정할 수 있습니다.

supportedScanTypes: [
  Html5QrcodeScanType . SCAN_TYPE_CAMERA ,
  Html5QrcodeScanType . SCAN_TYPE_FILE ]

파일 기반 검사를 기본으로 설정하려면 순서를 변경하세요.

supportedScanTypes: [
  Html5QrcodeScanType . SCAN_TYPE_FILE ,
  Html5QrcodeScanType . SCAN_TYPE_CAMERA ]

`showTorchButtonIfSupported` - `boolean | undefined`

이는 Html5QrcodeScanner 에만 지원됩니다.

true 인 경우 렌더링된 UI에는 장치 + 브라우저 지원에 따라 플래시를 켜거나 끄는 버튼이 있습니다. 값은 기본적으로 false 입니다.

특정 형식만 스캔

기본적으로 카메라 스트림과 이미지 파일 모두 지원되는 모든 코드 형식에 대해 검사됩니다. Html5QrcodeScanner 및 Html5Qrcode 클래스는 모두 지원되는 형식의 하위 집합만 지원하도록 구성할 수 있습니다. 지원되는 형식은 enum Html5QrcodeSupportedFormats에 정의되어 있습니다.

 enum Html5QrcodeSupportedFormats {
  QR_CODE = 0 ,
  AZTEC ,
  CODABAR ,
  CODE_39 ,
  CODE_93 ,
  CODE_128 ,
  DATA_MATRIX ,
  MAXICODE ,
  ITF ,
  EAN_13 ,
  EAN_8 ,
  PDF_417 ,
  RSS_14 ,
  RSS_EXPANDED ,
  UPC_A ,
  UPC_E ,
  UPC_EAN_EXTENSION ,
}

특정 형식에 대한 지원을 명시적으로 생략해야 하거나 성능상의 이유로 초당 수행되는 검색 수를 줄이려는 경우에만 이 방법을 사용하는 것이 좋습니다.

`Html5Qrcode` 로 QR 코드만 스캔하기

 const html5QrCode = new Html5Qrcode (
  "reader" , { formatsToSupport : [ Html5QrcodeSupportedFormats . QR_CODE ] } ) ;
const qrCodeSuccessCallback = ( decodedText , decodedResult ) => {
    /* handle success */
} ;
const config = { fps : 10 , qrbox : { width : 250 , height : 250 } } ;

// If you want to prefer front camera
html5QrCode . start ( { facingMode : "user" } , config , qrCodeSuccessCallback ) ;

`Html5QrcodeScanner` 를 사용하여 QR 코드 및 UPC 코드만 스캔

 function onScanSuccess ( decodedText , decodedResult ) {
  // Handle the scanned code as you like, for example:
  console . log ( `Code matched = ${ decodedText } ` , decodedResult ) ;
}

const formatsToSupport = [
  Html5QrcodeSupportedFormats . QR_CODE ,
  Html5QrcodeSupportedFormats . UPC_A ,
  Html5QrcodeSupportedFormats . UPC_E ,
  Html5QrcodeSupportedFormats . UPC_EAN_EXTENSION ,
] ;
const html5QrcodeScanner = new Html5QrcodeScanner (
  "reader" ,
  {
    fps : 10 ,
    qrbox : { width : 250 , height : 250 } ,
    formatsToSupport : formatsToSupport
  } ,
  /* verbose= */ false ) ;
html5QrcodeScanner . render ( onScanSuccess ) ;

실험적 기능

이제 라이브러리는 라이브러리에서 지원되지만 제한된 테스트 또는 사용된 기본 API에 대한 제한된 호환성으로 인해 프로덕션 용도로 권장되지 않는 일부 실험적 기능을 지원합니다. 여기에서 자세한 내용을 읽어보세요. 일부 실험적 기능은 다음과 같습니다.

BarcodeDetector JavaScript API 지원

수정 및 빌드 방법

코드 변경은 /src에만 적용되어야 합니다.
모든 종속성을 설치하려면 npm install 실행하세요.
npm run-script build 실행하여 JavaScript 출력을 빌드합니다. 출력 JavaScript 배포판은 /dist/html5-qrcode.min.js에 구축됩니다. Windows OS에서 개발하는 경우 npm run-script build-windows 실행하세요.
테스트
- npm test 실행
- 풀 요청을 보내기 전에 테스트를 실행하세요. 모든 테스트가 실행되어야 합니다.
- PR로 전송되는 새로운 동작에 대한 테스트를 추가하세요.
풀 요청 보내기
- ./src 에만 코드 변경 사항을 포함합니다. ./dist 수동으로 변경하지 마십시오.
- 끌어오기 요청에 다음과 같은 주석을 추가하세요.
```
 @all-contributors please add @mebjas for this new feature or tests
```
- 귀하의 기여를 호출하기 위해 봇은 기여 파일을 업데이트합니다.
- 코드는 작성자가 일괄적으로 구축하고 게시합니다.