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)
});
};
댓글 0
번호 | 제목 | 글쓴이 | 날짜 | 조회 수 |
---|---|---|---|---|
» | ZXing 라이브러리를 이용하여 후면 카메라를 활성화 하는 코드 예제 | 황제낙엽 | 2024.11.20 | 79 |
3 |
ZXing.js(zxing-js) 에서 후면 카메라를 기본 설정하는 법
![]() | 황제낙엽 | 2023.08.16 | 139 |
2 | 2D 바코드(barcode, QR, PDF417) 제어 프로그램 Zxing | 황제낙엽 | 2023.08.07 | 99 |
1 | TypeScript TS Playgound - 구문 오류 실시간 검사 | 황제낙엽 | 2021.03.07 | 198 |