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:

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.