html5-qrcode 사용정리
html5-qrcode 사용해서 Android WebView QR적용을 하려한다.
이 라이브러리는 다 좋은데 https, localhost에서만 작동한다.
그래서 안드로이드로 테스트를 하고싶다면 ngrok라는 프로그램을 사용해서 로컬호스트를 외부접속이 가능하게 해줘야한다. 사용법은 어렵지 않으니 구글링해서 찾아보면 바로 나온다.
공통사항
resources/static/js파일 안에 html5-qrcode.min.js 파일을 넣어주고 아래와 같이 넣어준다.
<div id="reader" style="position: relative;"></div><script src="./js/html5-qrcode.min.js"></script>기본UI가 있는 QRscan사용법
위에 사진처럼 기본 UI를 사용하고 싶다면
function onScanSuccess(decodedText, decodedResult) {
// Handle on success condition with the decoded text or result.
console.log(`Scan result: ${decodedText}`, decodedResult);
}
var html5QrcodeScanner = new Html5QrcodeScanner(
"reader", { fps: 10, qrbox: 250 });
html5QrcodeScanner.render(onScanSuccess);위와 같이 사용하면 된다.
qr스캔에 비율을 조절하고싶다면 aspectRatio를 추가해준다.
var html5QrcodeScanner = new Html5QrcodeScanner(
"reader", { fps: 10, qrbox: 250, aspectRatio: 1.0});
html5QrcodeScanner.render(onScanSuccess);
/*
1.0 / 1.333334 / 1.777778 <--여기서 골라서 설정해준다.
1:1 / 4:3 / 16:9
*/
pro mode (커스텀모드)
pro모드도 별거 없다.
let html5QrCode;
const config = { fps: 10, qrbox: { width: 250, height: 250 }, aspectRatio: 1.55557};
$(function () {
$("#QRScan").on("click", function () {
$("#info").css("display", "none");
html5QrCode.start({ facingMode: "environment" }, config, qrCodeSuccessCallback);
});
});
html5QrCode = new Html5Qrcode(
"reader", { formatsToSupport: [ Html5QrcodeSupportedFormats.QR_CODE ] });
const qrCodeSuccessCallback = (decodedText, decodedResult) => {
console.log(decodedText);
};
/*
스캔 종료 코드
html5QrCode.stop().then((ignore) => {
}).catch((err) => {
console.log(err);
});
*/
위에 내용들만 보면 깃에 있는 내용을 복붙할거면 왜 정리하나 싶을 수도 있겠다.
사실 내가 이 내용을 정리하는 것은 안드로이드에서 나는 오류를 정리하고 싶었기 때문이다.
두가지 오류가 났는데
1. 권한문제
2. 프레임 프리징
1. 권한문제
이 문제는 금방해결했다.
AndroidManifest.xml에 아래와 같이 권한을 넣어주고
<uses-permission android:name="android.permission.CAMERA"/>
<uses-feature android:name="android.hardware.camera" android:required="true"/>
<uses-feature android:name="android.hardware.camera.autofocus"/>
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />WebChromeClient을 상속받은 클래스에 onPermissionRequest 메소드를 추가해준다.
@Override
public void onPermissionRequest(final PermissionRequest request) {
final String[] requestedResources = request.getResources();
for (String r : requestedResources) {
if (r.equals(PermissionRequest.RESOURCE_VIDEO_CAPTURE)) {
request.grant(new String[]{PermissionRequest.RESOURCE_VIDEO_CAPTURE});
break;
}
}
}
2. 프레임 프리징
권한문제를 해결하면 카메라가 뜨는데 오오~~~하다가 첫프레임 이후로 멈추는 현상을 보게된다. -_-.
해결책으로 애니메이션을 추가하라길래 뭔 개소린가 했는데...
곰곰히 생각해보니까 gif파일을 추가하면되는 것이였다.
귀여운 퐁퐁이 gif파일 올려놓으니 필요한 사람은 가져다 쓰시라..
css파일과 html 파일에 각각 넣어준다.
.hidden-img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}<!--프레임 멈춤현상 문제로 넣은 gif파일-->
<img class="hidden-img" src="./image/animation.gif" loop=infinite>끗~
참고자료
https://ngrok.com/
https://github.com/mebjas/html5-qrcode
https://scanapp.org/html5-qrcode-docs/docs/intro
https://stackoverflow.com/questions/61495505/android-webcam-error-in-webview-camera-permission-not-working
https://github.com/mebjas/html5-qrcode/issues/779
https://blog.outsider.ne.kr/1159