ProcessImage.tsx

import * as React from 'react';
import { withStyles } from '@material-ui/core/styles';
import { count } from '@gringlobal/counter/counter';
import { logElapsed, colorMainsClassifier, filterBlur } from '@gringlobal/counter/filters';

const styles = {
  canvases: {
    'flex-flow': 'row wrap',
    'display': 'flex',
  },
  canvasBox: {
    backgroundRepeat: 'no-repeat',
    backgroundSize: 'contain',
    margin: '5px',
    border: 'solid 1px green',
  },
  originalContainer: {
    position: 'relative' as 'relative',
  },
  original: {
    width: '100%',
    position: 'relative' as 'relative',
    // visibility: 'hidden' as 'hidden',
  },
  resultOverlay: {
    width: '100%',
    minHeight: '20px',
    // position: 'absolute' as 'absolute',
    border: 'solid 1px red',
    backgroundColor: 'lime',
    top: -1,
    left: -1,
  },
  canvas: {
    maxHeight: '200px',
    minWidth: '100px',
    minHeight: '100px',
  },
  originalGraphics: {
    // width: '100%',
  },
};

const L = console.log;

class ProcessImage extends React.Component<any> {

  // private MAX_PROCESSING_WIDTH: number = 300;
  private logger: any;
  private loggerDate: number = Date.now();
  private original: any;
  private originalVideo: any;
  private resultOverlay: any;
  private canvasSource: any;

  public constructor(props) {
    super(props);
    this.logger = React.createRef();
    this.original = React.createRef();
    this.originalVideo = React.createRef();
    this.resultOverlay = React.createRef();
    this.canvasSource = React.createRef();
  }

  public state = {
    count: 0,
    video: false,
  };

  public componentDidMount() {
    console.log('Component did mount', this.logger);
    if (this.logger.current && this.logger.current.appendChild) {
      console.log = (text, ...args) => {
        const time = Date.now();
        L(`+${time - this.loggerDate} ${text}`, ...args);
        const msg = document.createElement('pre');
        msg.innerHTML = `+${time - this.loggerDate} ${text}`; // \n${args.map((arg) => `${JSON.stringify(arg, null, 2).substring(0, 300)}\n\n`)}`;
        this.logger.current.appendChild(msg);
        this.loggerDate = time;
      }
    }
  }

  public componentWillUnmount() {
    console.log = L;
    L('Reset console.log');
  }

  private resizeCanvases = () => {
    const source = this.state.video ? this.originalVideo.current : this.original.current;
    console.log(`Source ${this.state.video ? 'Video' : 'Image'} size ${this.state.video ? source.videoWidth : source.width}x${this.state.video ? source.videoHeight : source.height}`);
    // canvas.width = video.videoWidth;
    const ratio = this.state.video ? source.videoWidth / source.videoHeight : source.width / source.height;
    // original.height = original.width / ratio;
    // this.resultOverlay.current.style.width = this.state.video ? source.videoWidth : source.width;
    // this.resultOverlay.current.style.height = this.state.video ? source.videoHeight : source.height;
    this.canvasSource.current.width = this.resultOverlay.current.width = Math.min(640, this.state.video ? source.videoWidth : source.width);
    this.canvasSource.current.height = this.resultOverlay.current.height = this.resultOverlay.current.width / ratio;
    // for (const canvas2 of canvases) {
    //   canvas2.width = canvas.width;
    //   canvas2.height = canvas.height;
    // }
    this.captureImage();
  }

  private captureImage = () => {
    if (this.logger.current) {
      this.logger.current.innerHTML = '';
    }
    const source = this.state.video ? this.originalVideo.current : this.original.current;
    const contextSource = this.canvasSource.current.getContext('2d');
    contextSource.imageSmoothingEnabled = false;
    contextSource.drawImage(source, 0, 0, this.canvasSource.current.width, this.canvasSource.current.height);
    const image = contextSource.getImageData(0, 0, this.canvasSource.current.width, this.canvasSource.current.height);
    console.log(`Image data ${image.width}x${image.height}`);
    let startTime = Date.now();
    // const filtered = filterThinEdges(filterSum(filterSobel(filterSmooth(image))));
    // let filtered = filterBW(image);
    // startTime = logElapsed(startTime, 'filterBw');
    // let filtered = filterSharpenWithMask(image);
    // startTime = logElapsed(startTime, 'filterSharpen');
    let filtered = filterBlur(image);
    startTime = logElapsed(startTime, 'filterBlur');
    filtered = colorMainsClassifier(filtered, 2);
    startTime = logElapsed(startTime, 'colorMainsClassifier');
    // filtered = colorClassifier(filtered, 4);
    // startTime = logElapsed(startTime, 'colorClassifier');
    // filtered = filterSobel(filtered);
    // startTime = logElapsed(startTime, 'filterSobel');
    // filtered = filterTakeHighest(filtered);
    // startTime = logElapsed(startTime, 'filterSum');
    // filtered = filterSharpenWithMask(filtered, 2);
    // startTime = logElapsed(startTime, 'filterSharpenWithMask');
    // filtered = filterOutline(filtered);
    // startTime = logElapsed(startTime, 'filterOutline');
    // filtered = filterBW(filtered);
    // startTime = logElapsed(startTime, 'filterBW');
    // filtered = filterThreshold(filtered, 50);
    // startTime = logElapsed(startTime, 'filterThreshold');
    // filtered = filterThinEdges(filtered);
    // startTime = logElapsed(startTime, 'filterThinEdges');
    const contextResult = this.resultOverlay.current.getContext('2d');
    contextResult.putImageData(filtered, 0, 0);
    contextResult.imageSmoothingEnabled = false;

    if (this.state.video) {
      setTimeout(() => { this.captureImage(); }, 500);
    }
  }

  private toggleCamera = () => {
    console.log('Toggling camera');

    // const supportedConstraints = navigator.mediaDevices.getSupportedConstraints();
    // let constraintStr: string = '';
    // for (const constraint in supportedConstraints) {
    //   if (supportedConstraints.hasOwnProperty(constraint)) {
    //     constraintStr += constraint + '\n';
    //   }
    // }
    // window.alert(`Media constraints:\n${constraintStr}`);

    // this.captureImage();
    const constraints = {
      video: {
        facingMode: 'environment',
        width: { min: 400, ideal: 800, max: 2000 },
        height: { min: 400, ideal: 600, max: 2000 },
      },
    };

    // if (this.originalVideo.current && ! this.originalVideo.current.srcObject) {
    // Get access to the camera!
    if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
      // Not adding `{ audio: true }` since we only want video now
      navigator.mediaDevices.getUserMedia(constraints).then((stream) => {
        this.originalVideo.current.srcObject = stream;
        this.originalVideo.current.play();
      }).catch((err) => {
        window.alert('Error' + JSON.stringify(err));
        console.log('An error occurred: ', err);
      });
    }
    // }

    this.setState({ count: count(this.state.count), video: !this.state.video });
  };

  private fileChanged = (ev) => {
    const files = ev.target.files;
    // FileReader support
    if (FileReader && files && files.length) {
      const fr = new FileReader();
      fr.onload = () => {
        console.log('Original', this.original.current);
        this.original.current.src = fr.result;
      };
      fr.readAsDataURL(files[0]);
    }
  };

  public render(): React.ReactNode {
    const { classes } = this.props;
    return (
      <div>
        { ! this.state.video && <div>
          <form>
            <input type="file" onChange={ this.fileChanged } id="myfile" />
            <input type="reset" value="Clear" />
          </form>
        </div> }
        <h1>Count: { this.state.count }</h1>
        <div className={ classes.originalContainer }>
          <img ref={ this.original } onLoad={ this.resizeCanvases } className={ classes.original } src="examples/G25012 seed.jpg" style={ { display: this.state.video ? 'none' : '' } } />
          <video ref={ this.originalVideo } className={ classes.original } onPlaying={ this.resizeCanvases } style={ { display: this.state.video ? '' : 'none' } } ></video>
          <canvas ref={ this.resultOverlay } className={ classes.resultOverlay }></canvas>
        </div>
        <button onClick={ this.toggleCamera }>Camera</button>
        <h1>Log</h1>
        <div ref={ this.logger }></div>
        <h1>Debugger</h1>
        <div id="canvases" className={ classes.canvases } />
        <canvas ref={ this.canvasSource } className={ classes.originalGraphics }></canvas>
      </div>
    );
  }
}

export default withStyles(styles)(ProcessImage);