vue qrcode reader
v5.5.11
브라우저에서 바로 QR 코드 및 기타 다양한 바코드 형식을 감지하기위한 vue.js 구성 요소 세트 :
QrcodeStream 카메라 스트림에서 프레임을 계속 스캔합니다.
QrcodeDropZone 은 이미지를 해독 할 수있는 빈 영역입니다.
QrcodeCapture 는 클래식 파일 업로드 필드로, 선택한 모든 파일을 즉시 스캔합니다.
모든 구성 요소는 반응합니다. 그 외에도 제로 스타일에 가깝습니다. 레이아웃에 맞게 만드십시오. 사용량은 간단하고 간단합니다.
<qrcode-stream @detect = "ondetect"> </qrcode-stream>
방법 : {
ondetect (detectedCodes) {// ...
}}달리다
NPM 설치 vue-Qrcode-Reader
구성 요소를 독립적으로 가져올 수 있습니다
import {qrcodestream, qrcodedropzone, qrcodecapture} 'vure-qrcode-Reader'Const mycomponent = {
//
구성 요소 : {qrcodestream, qrcodedropzone, qrcodecapture}
// ...}또는 전 세계적으로 바로 등록하십시오
'vue'import vueqrcodeReader에서 vue vue'vue-qrcode-Reader'Vue.use (vueqrcodeReader)
다음 JS 파일 포함 :
https://unpkg.com/vue-qrcode-reader/dist/vue-qrcode-reader.umd.js
Vue 다음에 포함시켜야합니다.
<script src = "./ vue.js"> </script> <script src = "./ vue-qrcode-reader.umd.js"> </script>
모든 구성 요소는 전 세계적으로 자동으로 등록됩니다. 케밥 케이스를 사용하여 템플릿에서 참조하십시오.
<qrcode-stream> </qrcode-stream> <qrcode-drop-zone> </qrcode-drop-zone> <qrcodecapture> </qrcode-capture>
QrcodeStream 사용할 때 카메라가 보이지 않습니다.데모 페이지에서 작동하는지 확인하십시오. 특히 핸들 오류는 오류 메시지를 렌더링하므로 데모를 데모합니다.
데모는 작동하지만 내 프로젝트에서는 작동하지 않습니다. error 조사하여 오류를 조사하십시오.
데모는 작동하지 않습니다. 위의 브라우저 지원 섹션을주의 깊게 검토하십시오. 장치가 지원되지 않을 수도 있습니다.
설정이 데스크탑 크롬 + 안드로이드 크롬 인 경우 원격 디버깅을 사용하여 Android 장치가 로컬 서버에 로컬 호스트에 액세스 할 수 있습니다.
그렇지 않으면 NGROK 또는 SERVO와 같은 역 프록시를 사용하여 HTTPS와 함께 로컬 서버를 일시적으로 공개적으로 사용할 수 있도록하십시오.
또한 기본적으로 HTTPS가 가능하고 무료로 웹 앱을 무료로 배포 할 수있는 서버리스/정적 호스팅 서비스가 많이 있습니다 (예 : Github 페이지 , Gitlab 페이지 , Google Firebase , Netlify , Heroku , Zeit Now ...)
QR 코드 주변에는 흰색 테두리가 있는지 확인하십시오.
업스트림 패키지에서 QR 코드를 테스트하십시오. barcode-detector -> zxing-wasm > zxing-cpp 및 문제가 처음 발생한 가장 높은 수준의 저장소에서 파일 감지 문제.
formats 소품의 기본값은 "['qr_code']" 이며, 이는 formats 을 사용할 수 있기 전에 설정을 반영합니다. 이러한 유형의 바코드를 감지하려면이 소품에 다른 바코드 형식을 추가해야합니다. 이 데모를 확인하십시오.
지원이 삭제되지만 vue-Qrcode-Reader v3.*로 다운 그레이드 할 수 있습니다.
WASM 파일은 QR 코드 감지기를 구현합니다. 불행히도,이 파일을 패키지와 함께 묶는 것은 편리하지 않습니다. 따라서 기본적으로 CDN에서 런타임에 가져옵니다. 이는 엄격한 CSP 정책이있는 네트워크에서 실행되는 오프라인 응용 프로그램 또는 응용 프로그램의 문제입니다. 해결 방법은 다음을 참조하십시오. #354
torch 내 장치에서 지원되지 않습니다. torch 지원은 장치, 카메라 및 브라우저 및 운영 체제에서 일치하지 않습니다. 일부 장치에서 후면 카메라는 torch 지원하지만 전면 카메라에 실제로 손전등이 있더라도 전면 카메라는 그렇지 않습니다.
또한 torch iOS에서 전혀 지원되지 않습니다 (마지막으로 확인 된 iOS 17.1).
장치와 함께이 페이지를 방문하십시오. 링크 목록은 장치에 설치된 모든 카메라를 나타냅니다. 클릭하면 카메라를로드해야합니다. 카메라보기 아래에서 "기능"의 JSON 개체가 인쇄됩니다. 키/값 쌍 "torch": true Flashlight는 해당 카메라에 지원되지 않습니다.
이 JSON 객체는 camera-on 이벤트의 페이로드로 제공되었습니다.
