html5qrcode 카메라 감지 및 초기화 : getCameras () 메소드의 오용을 피하십시오.

html5qrcode 라이브러리를 사용하는 경우 개발자는 종종 ucted typeerror : html5qrcode.getCameras를 만나는 것이 기능 오류가 아닙니다. 이 기사는 getCameras () 메소드의 올바른 사용법을 명확히하는 것을 목표로하고, 인스턴스 메소드가 아닌 html5qrcode 클래스의 정적 메소드로 불려야한다고 지적하고, 이용 가능한 카메라를 올바르게 감지하고 QR 코드 스캔 함수를 초기화하는 방법을 안내하여 이러한 유형의 오류를 효과적으로 피하고 카메라 기능이 정상적으로 작동하도록하는 방법을 안내하는 완전한 코드 예제를 제공합니다.

getCameras () 메소드를 호출하는 올바른 방법을 이해하십시오

HTML5QRCODE는 웹 페이지에서 QR 코드 스캔 기능을 구현하는 데 사용되는 강력한 JavaScript 라이브러리입니다. 장치에서 사용 가능한 카메라 목록을 얻으려고 할 때 많은 개발자들은 html5qrcode.getCameras ()와 같은 생성 된 html5qrcode 인스턴스에서 getCameras () 메소드를 습관적으로 호출합니다. 그러나 getCameras ()는 인스턴스 방법이 아니라 html5qrcode 클래스의 정적 메소드 이기 때문에 TypeError가 발생합니다.

정적 메소드는 클래스의 특정 인스턴스가 아니라 클래스 자체에 직접적으로 속하는 메소드입니다. 즉, 클래스 이름, 즉 html5qrcode.getCameras ()별로 직접 호출해야합니다. 특정 스캐너 인스턴스가 필요하지 않고 장치 레벨 카메라 정보를 제공 할 책임이 있으므로 HTML5QRCODE 인스턴스를 작성하기 전에 호출 할 수 있습니다.

사용 가능한 카메라를 올바르게 감지하고 스캐너를 초기화하십시오

장치 카메라를 올바르게 감지하고 결과에 따라 해당 UI를 초기화하거나 표시하려면 다음 단계를 수행해야합니다.

1. 라이브러리 파일 소개 : html5-qrcode.min.js가 올바르게 소개되었는지 확인하십시오.
2. 정적 메소드를 호출하십시오 : html5qrcode.getCameras ()를 사용하여 카메라 목록을 얻습니다.
3. 비동기 결과 처리 : getCameras ()는 약속을 반환합니다. 카메라 목록의 성공적인 획득 및 실패한 획득 (예 : 카메라 또는 권한 거부)을 처리하려면 .then () 및 .catch ()를 사용해야합니다.
4. 스캐너 초기화 : 카메라가 감지되면 HTML5QRCODE 인스턴스를 작성하고 스캔을 시작하십시오.
5. 오류 처리 및 UI 피드백 : 카메라가 감지되지 않았거나 사용자가 카메라 권한을 거부 한 경우 사용자에게 친숙한 프롬프트 메시지로 표시되어야합니다.

다음은이 프로세스를 올바르게 구현하는 방법을 보여주는 완전한 코드 예입니다.

 


    <meta charset="utf-8">
    <meta name="viewport" content="width = device-width, 초기 스케일 = 1.0">
    <title> html5qrcode 카메라 감지 및 스캔 </title>
    
        /* 디스플레이 제어를위한 간단한 CSS 스타일*/
        . 내용이없는 {디스플레이 : 없음; }
        .hide {디스플레이 : 없음; }
        #스캐너-포함 {너비 : 300px; 높이 : 300px; 국경 : 1px Solid #CCC; 마진 바닥 : 10px; }
        .message {색상 : 빨간색; 글꼴 중량 : 대담한; }
    스타일>


    <h1> html5qrcode QR 코드 스캔 자습서 </h1>

    <div id="스캐너 컨테이너"> </div>
    <div class="scan-dom">
        <p> QR 코드 스캔 ... </p>
    </div>
    <div class="nocameramessage hide message">
        <p> 사용 가능한 카메라가 감지되지 않았거나 카메라 권한이 거부되었습니다. </p>
        <p> 장치에 카메라가 있고 브라우저 카메라 액세스 권한을 부여했는지 확인하십시오. </p>
    </div>
    <div class="decoded-result hide">
        <p> 스캔 결과 : <span id="decodedText"> </span> </p>
    </div>

    
    <script src="https://unpkg.com/html5-qrcode@2.3.8/html5-qrcode.min.js"> </script>
     ->

    <cript>
        // 스캐너 컨테이너의 ID를 정의합니다
        Const ScannerContainerId = "스캐너 컨테이너";
        html5qrcode를하자; // html5qrcode 인스턴스를 저장할 변수를 선언합니다. // 콜백 함수로 성공적으로 스캔 함 const qrcodesuccesscallback = (decodedText, decodedResult) => {{
            console.log (`QR 코드 감지 : $ {decodedText}`, decodedResult);
            // 스캔 중지 html5qrcode.stop (). 그런 다음 (() => {
                Console.log ( "QR 코드 스캔 중지.");
                // 결과 스캔 결과 표시 문서 .getElementById ( 'decodedText'). textContent = decodedText;
                document.querySelector ( '. decoded-result'). classlist.remove ( 'hide');
                document.querySelector ( '. scan-dom'). classList.add ( 'notvisible');
            }). catch ((err) => {
                Console.error ( "QR 코드 스캔 중지 오류 :", err);
            });
        };

        // configuration const config = {스캔
            FPS : 10, // 프레임 속도 QRBOX : {너비 : 250, 높이 : 250}, // 스캔 상자 크기 // preferfrontCamera : false, // 후면 카메라의 기본 사용};

        // 코어 로직 : 카메라를 감지하고 스캔을 시작합니다 html5qrcode.getCameras ().
            if (device && devices.length> 0) {
                // console.log에서 최소한 하나의 카메라를 사용할 수 있습니다 ( "사용 가능한 카메라 :", 장치);

                // 스캔 관련 UI가 document.querySelector ( ". scan-dom")로 표시되는지 확인하십시오. ClassList.Remove ( "Notvisible");
                document.querySelector ( ". nocamerAmessage"). classList.add ( "숨기기");

                // html5qrcode 인스턴스 생성 html5qrcode = new html5qrcode (ScannerContainerId);

                // 스캔 시작 // 카메라 ID를 지정하거나 FaceMode를 사용할 수 있습니다 : "환경"(뒤로) 또는 "사용자"(Front)
                // 여기서 우리는 후면 카메라를 사용하려고합니다 html5qrcode.start ({faceMode : "환경"}, config, qrcodesuccessCallback)
                    .catch (err => {
                        Console.error ( "스캔을 시작할 수없고 카메라가 점유되거나 허가 문제가있을 수 있습니다 :", err);
                        documb
                        document.querySelector ( ". nocamerAmessage"). ClassList.remove ( "HIDE");
                    });

            } 또 다른 {
                // 카메라 콘솔이 없음 ( "이 장치에 카메라가 없음");
                documb
                document.querySelector ( ". nocamerAmessage"). ClassList.remove ( "HIDE");
            }
        }). Catch (err => {
            // 허가 문제로 인한 카메라 목록을 가져 오지 못했거나 브라우저가 Console.error를 지원하지 않습니다 ( "카메라 가져 오기 :", err);
            documb
            document.querySelector ( ". nocamerAmessage"). ClassList.remove ( "HIDE");
        });
    스크립트>

</cript>

위 내용은 html5qrcode 카메라 감지 및 초기화 : getCameras () 메소드의 오용을 피하십시오.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!