sitelink1 https://developer.mozilla.org/ko/docs/Web/API/WebRTC_API 
sitelink2  
sitelink3  
sitelink4  
extra_vars4  
extra_vars5  
extra_vars6  

ZXing 라이브러리의 카메라 접근 코드로 카메라를 활성화하는 로직 샘플이다.

아래 코드 실행은 가능하지만 카메라가 활성화되면 줌 배율이 0.5가 되어 있다. (시스템 기본 설정에 따른 것으로 보임)

Web RTC 에 대한 내용은 sitelink1 을 참고하자.

 

<script type="text/javascript" src="https://unpkg.com/@zxing/library@latest/umd/index.min.js"></script>

<script>

        async function activateCamera(rearCameraId) {

            try {

                // 후면 카메라 ID 저장 (이전과 동일한 saveRearCameraId 함수를 사용)

                const rearCameraId = window.rearCameraId;

 

                // 카메라 활성화 옵션 설정

                const cameraOptions = {

                    video: {

                        width: { exact: 1920 },  // 원하는 너비 (예: 1920px)

                        height: { exact: 1080 }, // 원하는 높이 (예: 1080px)

                        deviceId: { exact: rearCameraId },

                        facingMode: 'environment' // 또는 'rear'

                    },

                    audio: false // 오디오는 필요 없다고 가정

                };

 

                // 저장된 후면 카메라 ID 사용하여 카메라 활성화

                const stream = await navigator.mediaDevices.getUserMedia(cameraOptions);

 

                // 비디오 요소 찾기

                const videoElement = document.querySelector('video');

 

                if (videoElement) {

                    videoElement.srcObject = stream;

                    videoElement.play();

                } else {

                    console.error('비디오 요소가 없습니다.');

                }

            } catch (error) {

                console.error('카메라 활성화 실패:', error);

            }

        }

        window.onload = function() {

            //barcode reader 라이브러리를 이용하여 camera 객체 참조

            const codeReader = window.document.barcodeReader = new ZXing.BrowserMultiFormatReader();

                console.log('ZXing code reader initialized');

                codeReader.listVideoInputDevices()

                    .then((videoInputDevices) => {

                            if (videoInputDevices.length >= 1) {

                                videoInputDevices.forEach((element) => {

                                    if (element.label.indexOf("back") > -1) {

                                        activateCamera(element.deviceId);

                                    }

                                })

                            }

                    })

                    .catch((err) => {

                        console.error(err)

                    });

        };