Skip to content
A simple react component to take snapshot using webcam
JavaScript HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
app
build
.babelrc
.gitignore
LICENSE
README.md
package.json initial commit Jun 14, 2017
webpack-loader.js
webpack.config.js
yarn.lock initial commit Jun 14, 2017

README.md

Simple react camera by Anh Nguyen

A simple react component to take snapshot using webcam inpired by react-native-camera

Technologies

  • React: JavaScript View library

Live demo

Usage

Install library:

npm i --save simple-react-camera

Example usage

import React from 'react'
import ReactCamera from 'simple-react-camera'

class CameraWrapper extends React.Component {
  constructor(props) {
    super(props);
    this.camera = null
    this.capture = this.capture.bind(this)
  }

  capture() {
    this.camera.snapshot()
      .then(data => {
        /* data: string (base-64-jqeg)
        Process your data here*/
        console.log(data)
      })
      .catch(console.error)
  }

  render() {
    return (
      <div>
        <ReactCamera 
          classNames={'yourCssClassHere'}
          ref={camera => this.camera = camera}
          width={800} 
          height={500} />
        <button onClick={this.capture}>captured</button>
      </div>
    )
  }
}

Start example on port 8080:

yarn start

Compile the distribution build:

yarn build

Thank you and happy coding!

You can’t perform that action at this time.