tesseract-with-html5-camera

The objective of this package is to recongnize text from captured image from mobile camera or webcam. This package also have same look and feel of a native mobile camera app but with a react component.

Requirement

• react: >=16.8.0
• react-dom: >=16.8.0

Demo link

• http://PayalBhalerao.github.io/tesseract-with-html5-camera-demo

Required Working Environment for getUserMedia()

• https or localhost : The getUserMedia() method is only available in secure contexts (https or localhost). If a document isn't loaded in a secure context, the navigator.mediaDevices property is undefined, making access to getUserMedia() impossible. Attempting to access getUserMedia() in this situation will result in a TypeError. See developer.mozilla.org

• iOS >= 11 WebRTC issue with webkit (Chrome & Firefox) : Apple restricts WebRTC to Safari only so it mean that you can't use the getUserMedia() with Firefox and Chrome. So getUserMedia() is not supported yet, for "security reasons". See Stackoverflow

Installation

npm install --save tesseract-with-html5-camera

yarn add tesseract-with-html5-camera

Both Yarn and npm download packages from the npm registry.

Getting started

parameter | Description --- | --- onTextRecognize(text): | Event function called when a photo is taken and text get recognized . the text is passed as a parameter.

Minimum ES6 example

import React from 'react';
import CameraTesseract from 'tesseract-with-html5-camera/dist/lib/index.js';

function App (props) {
  const handleTakePhoto = (text) => {
    // Do stuff with recognized text...
    console.log('Recognize text: ', text);
  }

  return (
    <>
      <h3>Check result in console</h3>
      <CameraTesseract
        onTextRecognize = { (text) => { handleTakePhoto(text); } }
      />
    </>
  );
}

export default App;

API

PropTypes

Properties | Type | Default | Description --- | --- | --- | --- onTextRecognize(text): (Optional) | Event || The function called when a photo is taken. the text is passed as a parameter after recognizing the text. showLogsOnConsole: (optional) | Boolean | true | If true, Show text recognizing logs in console isFullscreen: (Optional) | Boolean | false | If true, Show full screen camera view isImageMirror: (Optional) | Boolean | true | If is true, the camera image will be mirror. imageType:: (Optional) | String | png | String used to get the desired image type between jpg or png. to specify the imageType use the constant IMAGE_TYPES, for example to specify jpg format use IMAGE_TYPES.JPG. Use IMAGE_TYPES constant to get the right image type Example:. IMAGE_TYPES.JPG or IMAGE_TYPES.PNG onCameraError(error): (Optional) | Event || Callback called with the error object as parameter when error occur while opening the camera. Often the permission. onCameraStart(): (optional) | Event || Callback called when the camera is started. onCameraStop(): (optional) | Event || Callback called when the camera is stopped.