문서 캡처
신분증 문서 캡처. SDK가 사용자의 문서 위치를 안내하는 프레임을 제공하며, 위치를 잡은 후 사용자가 버튼을 클릭하여 사진을 캡처합니다.
SDK는 캡처되는 내용에 대한 어떠한 유형의 유효성 검사도 수행하지 않습니다.
| 프레임 | 설명 |
|---|---|
DocumentCameraTypes.CPF | CPF 캡처 |
DocumentCameraTypes.CNH | 펼쳐진 CNH 캡처 |
DocumentCameraTypes.CNH_FRENTE | CNH 앞면 캡처 |
DocumentCameraTypes.CNH_VERSO | CNH 뒷면 캡처 |
DocumentCameraTypes.RG_FRENTE | RG 앞면 캡처 |
DocumentCameraTypes.RG_VERSO | RG 뒷면 캡처 |
DocumentCameraTypes.RG_FRENTE_NOVO | 새 RG 앞면 캡처 |
DocumentCameraTypes.RG_VERSO_NOVO | 새 RG 뒷면 캡처 |
DocumentCameraTypes.OTHERS("descrição") | 다른 문서를 위한 범용 프레임 |
특정 프레임이 없는 문서를 캡처해야 하는 경우(예: RNE), DocumentCameraTypes.OTHERS("description")을 사용하세요 — 모든 캡처를 안내하는 데 사용할 수 있는 범용 직사각형 프레임입니다.
지원되는 문서 유형의 전체 목록은 API 레퍼런스 > Enums를 참조하세요.
캡처 영역을 최적화하기 위해 애플리케이션 내에서 프레임 크기를 구성하는 것이 권장됩니다.
프레임 기능은 그리드 컴포넌트가 있는 디자인 시스템(Bootstrap, Material-UI 등)에 의해 영향을 받을 수 있습니다. 이 위험을 최소화하려면 원치 않는 CSS 규칙을 상속받지 않는 위치에 프레임(id="box-camera")을 배치하세요.
- Desktop
- Mobile
프레임을 부모 요소로 감싸서 크기를 제한합니다:
<div class="container">
<div id="box-camera"></div>
</div>
.container {
width: 800px;
height: 600px;
position: relative;
}
사용자의 얼굴을 프레이밍하기 쉽게 하려면 적절한 높이 대 너비 비율을 유지하세요.
브라우저의 개발자 모드를 통해 화면 크기를 조정하는 테스트는 예상대로 작동하지 않습니다. 대신 브라우저 창 크기를 직접 조정하세요.
웹 모바일 뷰의 경우, 컴퓨터 비전 알고리즘 문제를 방지하기 위해 캡처 프레임이 기기 화면의 100%(100vw/100vh)를 차지해야 합니다. 가로 또는 세로 스크롤을 피하세요 — 모달을 사용하면 이를 최소화하는 데 도움이 됩니다.
브라우저 개발자 모드를 사용한 테스트는 작동하지 않습니다 — 브라우저가 사용하는 카메라는 데스크탑 카메라와 동일하며, 모바일 기기 카메라와 해상도가 매우 다릅니다. 기기에서 직접 테스트하세요.
1단계 — callback 객체 구현
Web SDK는 성공 및 오류 이벤트를 처리하기 위해 open()에 전달되는 callback 객체를 사용합니다. 두 핸들러 모두 필수입니다:
| 핸들 러 | 호출 시점 |
|---|---|
on.success(obj) | 캡처가 성공적으로 완료됨 — base64 및 encrypted가 포함된 객체를 받습니다 |
on.error(error) | 세션 중 오류가 발생함 — ErrorBio를 받습니다 |
const callback = {
on: {
success: (obj) => {
console.log(obj.base64);
console.log(obj.encrypted);
},
error: (error) => {
console.error(error);
}
}
};
callback 객체는 필수입니다. 올바르게 구현되지 않은 경우 (success 및 error 이벤트를 모두 포함하여), 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);
});
전체 결과 처리 방법은 결과 수신을 참조하세요.