<aside> 💡 iframe을 통해 ocr.html(OCR 모듈)을 연동하는 샘플 코드입니다.

  1. iframe 영역에 카메라가 활성화
  2. 촬영 가이드 박스에 신분증 또는 신용카드를 위치 시키면 OCR이 수행
  3. 결과를 다시 index.html에 postMessage 형태로 전달

</aside>

”샘플 소스” 구성

<aside> 💡 Github 링크 에서 Clone https://github.com/useb-inc/wasm-ocr-sample-iframe

</aside>

⬆️ 또는 위 파일을 다운받으시면 됩니다.

”샘플 소스” 내 구조 설명

**demo/ --> ocr.html 을 iframe 으로 연동하는 데모가 들어있는 폴더입니다.**
├── css/
│   └── demo.css
├── img/
│   └── bg_graphic.svg
├── js/
│   ├── ui_simulator.js
│   └── util.js
├── lib/
│   └── lodash.min.js
├── demo.js --> index.html 에서 실행될 샘플 js script 입니다.
└── index.html --> ocr.html 을 불러오는 샘플 예제 입니다.

**sdk/ --> ocr.html 자체의 소스코드가 들어있는 폴더입니다.** 
├── css/
│   └── sdk.css
├── helpers/ -- ocr.js 에서 사용되는 유틸 스크립트 입니다.
│   ├── detector.js 
│   └── parser.js
├── lib/
│   └── lodash.min.js
├── ocr.html  --> ocr 모듈의 카메라를 활성화 시키는 샘플 예제 입니다.
├── useb-ocr-wasm-sdk.js --> ocr.html 에서 실행될 샘플 js script 입니다.
├── ocr.js  --> ocr 인식을 수행하는 라이브러리 wrapper script 입니다.
├── quram.js
├── quram.wasm
└── quram.data
파일 설명 비고
index.html 예제 html 파일 (ocr.html 모듈을 연동한 샘플 html) web에서 연동하시는 경우, 참고하여 개발에 활용
ocr.html OCR이 구현된 html 파일, index.html 또는 native app 에 연동됨. 변경 불필요
ocr.js 웹어셈블리 용 SDK js 파일 변경 불필요
quram.js 웹어셈블리 바이너리와 데이터를 사용할 수 있도록 wrapping 된 js 파일 변경 불필요
quram.wasm 웹어셈블리 바이너리 파일 변경 불필요
quram.data 웹어셈블리 데이터 파일 변경 불필요
helpers 폴더 SDK js 파일에서 사용되는 유틸리티 js 파일 폴더 변경 불필요

index.html - ocr.html 이 iframe으로 연동된 샘플입니다.

demo.js - index.html → ocr.html 의 iframe을 연동호출 하는 샘플 js 입니다

useb-ocr-wasm-sdk.js - ocr.html 에서 ocr 진행 후 index.html 에 postMessage 를 송신하는 샘플 js 입니다 (그대로 사용 권장)