메인 콘텐츠로 건너뛰기

문서 캡처

신분증 문서 캡처. SDK가 사용자의 문서 위치를 안내하는 프레임을 제공하며, 위치를 잡은 후 사용자가 버튼을 클릭하여 사진을 캡처합니다.

콘텐츠 유효성 검사 없음

SDK는 캡처되는 내용에 대한 어떠한 유형의 유효성 검사도 수행하지 않습니다.

사용 가능한 문서 프레임
프레임설명
DocumentCameraTypes.CPFCPF 캡처
DocumentCameraTypes.CNH펼쳐진 CNH 캡처
DocumentCameraTypes.CNH_FRENTECNH 앞면 캡처
DocumentCameraTypes.CNH_VERSOCNH 뒷면 캡처
DocumentCameraTypes.RG_FRENTERG 앞면 캡처
DocumentCameraTypes.RG_VERSORG 뒷면 캡처
DocumentCameraTypes.RG_FRENTE_NOVO새 RG 앞면 캡처
DocumentCameraTypes.RG_VERSO_NOVO새 RG 뒷면 캡처
DocumentCameraTypes.OTHERS("descrição")다른 문서를 위한 범용 프레임
범용 프레임

특정 프레임이 없는 문서를 캡처해야 하는 경우(예: RNE), DocumentCameraTypes.OTHERS("description")을 사용하세요 — 모든 캡처를 안내하는 데 사용할 수 있는 범용 직사각형 프레임입니다.

지원되는 문서 유형의 전체 목록은 API 레퍼런스 > Enums를 참조하세요.

프레임 크기

캡처 영역을 최적화하기 위해 애플리케이션 내에서 프레임 크기를 구성하는 것이 권장됩니다.

CSS 간섭

프레임 기능은 그리드 컴포넌트가 있는 디자인 시스템(Bootstrap, Material-UI 등)에 의해 영향을 받을 수 있습니다. 이 위험을 최소화하려면 원치 않는 CSS 규칙을 상속받지 않는 위치에 프레임(id="box-camera")을 배치하세요.

프레임을 부모 요소로 감싸서 크기를 제한합니다:

<div class="container">
<div id="box-camera"></div>
</div>
.container {
width: 800px;
height: 600px;
position: relative;
}

사용자의 얼굴을 프레이밍하기 쉽게 하려면 적절한 높이 대 너비 비율을 유지하세요.

개발자 도구 크기 조정

브라우저의 개발자 모드를 통해 화면 크기를 조정하는 테스트는 예상대로 작동하지 않습니다. 대신 브라우저 창 크기를 직접 조정하세요.

문서 캡처 시작하기
1단계callback 객체 구현

Web SDK는 성공 및 오류 이벤트를 처리하기 위해 open()에 전달되는 callback 객체를 사용합니다. 두 핸들러 모두 필수입니다:

핸들러호출 시점
on.success(obj)캡처가 성공적으로 완료됨 — base64encrypted가 포함된 객체를 받습니다
on.error(error)세션 중 오류가 발생함 — ErrorBio를 받습니다
const callback = {
on: {
success: (obj) => {
console.log(obj.base64);
console.log(obj.encrypted);
},
error: (error) => {
console.error(error);
}
}
};
필수 콜백

callback 객체는 필수입니다. 올바르게 구현되지 않은 경우 (successerror 이벤트를 모두 포함하여), SDK는 예외를 발생시키며, 이 예외가 처리되지 않으면 사용자의 콘솔에 표시됩니다.

2단계 — 카메라 빌드 및 문서 세션 준비

카메라 인스턴스를 빌드하고 UnicoConfig와 원하는 DocumentCameraTypes를 전달하여 prepareDocumentCamera를 호출합니다:

const unicoCamera = unicoCameraBuilder.build();

const config = new UnicoConfig()
.setHostname("<YOUR_HOSTNAME>")
.setHostKey("<YOUR_HOST_KEY>");

unicoCamera.prepareDocumentCamera(
config,
DocumentCameraTypes.CNH
).then(cameraOpener => {
cameraOpener.open(callback);
}).catch(error => {
console.error(error);
});

전체 결과 처리 방법은 결과 수신을 참조하세요.