react-webcamera/README.md

React webcamera component with direct access to the camera data

# React-Webcamera
With the react-webcamera library you can simple implement a webcamera component. The difference to other webcamera components is that you have direct access to the video data and you can change it, filter it , do what ever you like...

## Installation:
Using npm:

```
$ npm -i --save react-webcamera
```

## Usage:

Example:

```javascript
import React from 'react';
import ReactDOM from 'react-dom';
import Webcam from 'react-webcamera';

function grayScale(data){
  for(let i = 0; i < data.length; i+=4){
    let r = data[i];
    let g = data[i+1];
    let b = data[i+2];
    let a = data[i+3];
    var brightness = (3*r+4*g+b)>>>3;
    data[i] = brightness;
    data[i+1] = brightness;
    data[i+2] = brightness;
  }
  return data;
}

ReactDOM.render(<Webcam filter={grayScale} width="640" height="480", document.querySelector('#app'));
```

## Properties:

### Required properties:

``width``: String/Number Width of the final webcamera component.

``height``: String/Number Height of the final webcamera component.

### Optional properties:

``demo``: Boolean If set to true the intermediate canvas (with image data before filtering) is shown as well

``filter``: Function A function that takes an array (the ImageData.data array) and returning an array with the changed image data.

## Filter examples

I have published some example filter functions. They are situated in the folder `node_modules/react-webcamera/lib/filter-demos`.

## Source code

The source code before running babel is also publically available in the node_modules `node_modules/react-webcamera/src`

## Support:
The component was tested in Chrome 61.0.3163.100/64-bit and Firefox 56.0 (64-bit). In Firefox an deprecation warning will be shown in the console. This will be fixed in the next minor release.