Skip to content

A simple react component to take snapshot using webcam

License

Notifications You must be signed in to change notification settings

anhnguyen1618/react-camera

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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!

About

A simple react component to take snapshot using webcam

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published