Colin's Blog
자바스크립트와 MediaStream API를 사용한 웹에서의 실시간 OCR 앱 개발하기

OCR

이번 기술 블로그에서는 자바스크립트와 MediaStream API를 사용하여 웹에서 실시간 OCR(광학 문자 인식) 앱을 개발하는 방법을 알아보겠습니다. OCR은 이미지 또는 비디오에서 텍스트를 인식하고 추출할 수 있는 강력한 도구로, 웹 애플리케이션에서의 활용이 크게 중요해지고 있습니다.

필요한 도구

1. 웹캠 스트림 가져오기

앱 시작 시 사용자의 웹캠 스트림을 가져와야 합니다. 이를 위해 MediaStream API를 사용하겠습니다.

navigator.mediaDevices.getUserMedia({ video: true })
  .then(stream => {
    const video = document.getElementById('video');
    video.srcObject = stream;
    video.play();
  })
  .catch(error => {
    console.error('웹캠 스트림 가져오기 실패:', error);
  });

위의 코드는 웹캠 스트림을 성공적으로 가져오면 <video> 요소에 스트림을 할당하고 재생합니다.

2. 비디오 프레임 캡처하기

이제 웹캠에서 비디오 프레임을 캡처하여 OCR 서비스에 전달할 수 있습니다.

const captureButton = document.getElementById('captureButton');
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

captureButton.addEventListener('click', () => {
  ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
  const imageData = canvas.toDataURL('image/png');
  
  // OCR 서비스에 이미지 데이터 전달 및 텍스트 추출
});

위의 코드에서는 captureButton을 클릭할 때마다 <canvas> 요소에 현재 웹캠 프레임을 그립니다. toDataURL() 메서드를 사용하여 그려진 이미지를 base64 형식의 데이터 URL로 변환합니다.

3. OCR 서비스와의 통신

OCR 서비스를 위해 선택한 외부 서비스에 이미지 데이터를 전달해야 합니다. 이를 위해 서비스의 API를 호출하는 방법을 알아야 합니다. 또한, API 호출에 필요한 인증 정보를 설정해야 합니다.

const OCR_API_KEY = 'YOUR_API_KEY';
const OCR_ENDPOINT = 'YOUR_API_ENDPOINT';

async function performOCR(imageData) {
  const response = await fetch(OCR_ENDPOINT, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${OCR_API_KEY}`
    },
    body: JSON.stringify({ image: imageData })
  });

  const result = await response.json();
  
  // 텍스트 추출 결과 처리
}

위의 코드는 performOCR() 함수를 통해 OCR 서비스에 API 요청을 보냅니다. 필요한 경우 API 헤더에 인증 정보를 추가해야 합니다. API 응답을 JSON 형식으로 파싱하여 텍스트 추출 결과를 활용할 수 있습니다.

4. 텍스트 결과 처리

OCR 서비스에서 받아온 텍스트 결과를 알맞게 처리하고 표시하는 작업을 해야합니다. 결과는 웹 페이지에서 사용자에게 제공되며 이를 위해 자바스크립트를 사용하여 DOM 요소를 조작하면 됩니다.

function processResults(result) {
  const textElement = document.getElementById('textResult');
  textElement.textContent = result.text;
}

위의 코드는 processResults() 함수를 사용하여 결과를 처리하고 <p> 요소에 표시합니다. 결과를 다른 방식으로 처리하고 싶다면 이 코드를 알맞게 수정하면 됩니다.

마치며

이제 자바스크립트와 MediaStream API를 활용하여 웹에서 실시간 OCR 앱을 개발하는 방법에 대해 알아보았습니다. OCR은 다양한 분야에서 유용하게 활용될 수 있으며, 이를 기반으로 한 웹 애플리케이션을 개발한다면 더욱 흥미로울 것입니다.

자세한 내용은 여기를 참고하십시오.

#javascript #OCR

© 2018 Colin. All rights reserved.