메인 콘텐츠로 건너뛰기

문서 캡처

신분증 캡처. 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 등)으로 인해 프레임 기능이 영향을 받을 수 있습니다. 이 위험을 최소화하려면 프레임(id="box-camera")을 원하지 않는 CSS 규칙을 상속받지 않는 위치에 배치하세요.

프레임을 부모 요소로 감싸 치수를 제한하세요:

<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);
});

전체 결과 처리에 대해서는 결과 수신을 참조하세요.