Untitled

<aside> <img src="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/0343959a-7643-4ec2-b8ba-f21197b48ac9/노션_아이콘_디자인_5.png" alt="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/0343959a-7643-4ec2-b8ba-f21197b48ac9/노션_아이콘_디자인_5.png" width="40px" /> OCR 기술 적용을 위해서 useB.WASM(WebAssembly) 연동하시게 되면 고객사가 웹 브라우저 환경에서 OCR 기술을 활용할 수 있습니다. Native App에 설치형으로만 제공되던 OCR client SDK를 브라우저에서 동작하는 WASM 형식으로 변환한 WEB SDK로서, Native App에 버금가는 빠르고 정확한 성능, 자동 촬영 기능까지 제공합니다.
또한 모바일에 OCR client SDK, WAS서버에 OCR server SDK 설치 등이 필요 없으므로 매우 효과적으로 OCR 기술을 활용하실 수 있습니다.

#OCR #web SDK #WASM #WebAssembly #browser

</aside>

1. 개발 환경 확인

[useB.WASM] 연동 가능 개발 환경

2. 서비스 이용 순서

<aside> <img src="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/cc78e075-7861-479b-be5e-5914182b9891/노션_아이콘_디자인_5.png" alt="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/cc78e075-7861-479b-be5e-5914182b9891/노션_아이콘_디자인_5.png" width="40px" /> useB.WASM(WebAssembly) 서비스 신청 프로세스

  1. WASM 샘플 서비스 성능 체험하기 - 모바일, PC 모두 사용 가능 (eKYC(UI포함 솔루션) 데모 체험 신청하기)
  2. 테스트 라이센스키(도메인 제약 없음, 기간 제약 1개월), 개발 가이드 전달
  3. 견적 확정 및 계약서 날인 완료
  4. 세일즈팀이 전달한 서비스 신청 양식을 작성(연동 테스트 원하는 운영계 도메인 전달)
  5. 운영계 라이센스키(도메인 제약 있음, 기간 제약은 계약조건에 따라), 운영계 WASM 파일을 세일즈팀을 통해서 전달
  6. 서비스 런칭

</aside>

3. 샘플 소스 구성

<aside> <img src="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/3c03a223-fdf4-4f68-9f73-ade6f6f84cc9/노션_아이콘_디자인_5.png" alt="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/3c03a223-fdf4-4f68-9f73-ade6f6f84cc9/노션_아이콘_디자인_5.png" width="40px" /> web 에서 연동하는 경우

[useB.WASM] (고객사) WEB ↔ (ocr.html) iframe 연동 가이드

</aside>

<aside> <img src="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/85136a3a-f4bb-4011-b5af-8a502abc7be2/노션_아이콘_디자인_5.png" alt="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/85136a3a-f4bb-4011-b5af-8a502abc7be2/노션_아이콘_디자인_5.png" width="40px" /> Native App 에서 연동하는 경우

[useB.WASM] (고객사) Native App ↔ (ocr.html) webview 연동 가이드

</aside>

<aside> <img src="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/85136a3a-f4bb-4011-b5af-8a502abc7be2/노션_아이콘_디자인_5.png" alt="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/85136a3a-f4bb-4011-b5af-8a502abc7be2/노션_아이콘_디자인_5.png" width="40px" /> OCR 암호화 사용하는 경우

[useB.WASM] 암호화/복호화 가이드

</aside>

<aside> <img src="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/85136a3a-f4bb-4011-b5af-8a502abc7be2/노션_아이콘_디자인_5.png" alt="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/85136a3a-f4bb-4011-b5af-8a502abc7be2/노션_아이콘_디자인_5.png" width="40px" /> DEMO 가이드(ocr-demo.useb.co.kr)

preloading 사용 가이드

WASM ↔ Server 분기 처리 가이드

UI Simulator 가이드 및 활용 방법

</aside>

4. 샘플소스에 대한 부가설명

<aside> <img src="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/0a0654a8-b121-45a8-83e9-6856ea0129fe/노션_아이콘_디자인_5.png" alt="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/0a0654a8-b121-45a8-83e9-6856ea0129fe/노션_아이콘_디자인_5.png" width="40px" /> 아래 내용은 ocr.js 와 ocr.html 에 관련된 설명입니다. 연동 개발시에 직접 수정할 필요 없으며, 참고사항입니다.

</aside>

5. WASM 에러&성공 메시지 이해하기

<aside> <img src="https://prod-files-secure.s3.us-west-2.amazonaws.com/c7c22caa-f56a-422b-b0ea-5c85a509cdcb/babb577a-8619-49ff-b838-9ad3590fe66a/노션_아이콘_디자인_5.png" alt="https://prod-files-secure.s3.us-west-2.amazonaws.com/c7c22caa-f56a-422b-b0ea-5c85a509cdcb/babb577a-8619-49ff-b838-9ad3590fe66a/노션_아이콘_디자인_5.png" width="40px" /> 에러 케이스 설명

[useB.WASM] 에러 케이스

</aside>

<aside> <img src="https://prod-files-secure.s3.us-west-2.amazonaws.com/c7c22caa-f56a-422b-b0ea-5c85a509cdcb/babb577a-8619-49ff-b838-9ad3590fe66a/노션_아이콘_디자인_5.png" alt="https://prod-files-secure.s3.us-west-2.amazonaws.com/c7c22caa-f56a-422b-b0ea-5c85a509cdcb/babb577a-8619-49ff-b838-9ad3590fe66a/노션_아이콘_디자인_5.png" width="40px" /> 실패 케이스 설명

[useB.WASM] 실패 케이스

</aside>

<aside> <img src="https://prod-files-secure.s3.us-west-2.amazonaws.com/c7c22caa-f56a-422b-b0ea-5c85a509cdcb/babb577a-8619-49ff-b838-9ad3590fe66a/노션_아이콘_디자인_5.png" alt="https://prod-files-secure.s3.us-west-2.amazonaws.com/c7c22caa-f56a-422b-b0ea-5c85a509cdcb/babb577a-8619-49ff-b838-9ad3590fe66a/노션_아이콘_디자인_5.png" width="40px" /> 성공 케이스 설명

[useB.WASM] 성공 케이스

</aside>

SDK Method