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.

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

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

• 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

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

yarn add tesseract-with-html5-camera

Both Yarn and npm download packages from the npm registry.

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;