https://github.com/ccwukong/react-cam

HTML5 Web/Mobile camera for ReactJS
https://github.com/ccwukong/react-cam

hybrid-app pwa react reactjs webcam webcam-capture

Last synced: 16 days ago
JSON representation

HTML5 Web/Mobile camera for ReactJS

• Host: GitHub
• URL: https://github.com/ccwukong/react-cam
• Owner: ccwukong
• License: apache-2.0
• Created: 2018-07-26T04:07:33.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2022-12-10T20:35:02.000Z (almost 2 years ago)
• Last Synced: 2024-09-05T16:38:55.362Z (2 months ago)
• Topics: hybrid-app, pwa, react, reactjs, webcam, webcam-capture
• Language: JavaScript
• Size: 1.14 MB
• Stars: 29
• Watchers: 3
• Forks: 6
• Open Issues: 10
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-cam

![npm](https://img.shields.io/npm/dw/react-cam.svg)

HTML5 Web/Mobile camera for ReactJS

# Installation

## NPM

```console

npm install react-cam

```

## Yarn

```console

yarn add react-cam

```

# How to use it?

## props

| Prop name   | Optional | Default   | Description                                                                    |

| ----------- | -------- | --------- | ------------------------------------------------------------------------------ |

| showFocus   | Yes      | false     | show/hide the blue focus box, basically useless...                             |

| front       | Yes      | false     | true: front camera, false: rear camera                                         |

| capture     | No       | None      | A function to handle base64 string image                                       |

| width       | No       | 480       | Camera pixel width, percentage or absolute value                               |

| height      | No       | 320       | Camera pixel height, percentage or absolute value                              |

| focusWidth  | Yes      | 80%       | Camera focus box width, percentage or absolute value                           |

| focusHeight | Yes      | 50%       | Camera focus box height, percentage or absolute value                          |

| btnColor    | Yes      | '#2acef5' | Set color of the capture button                                                |

| onError     | No       |           | Handles camera error, the error object will be passed as the function argument |

## example

```javascript

import React, { Fragment, useRef } from 'react';

import ReactDOM from 'react-dom';

import { Camera } from 'react-cam';

function capture(imgSrc) {

  console.log(imgSrc);

}

const App = () => {

  const cam = useRef(null);

  return (

    

      

       cam.current.capture(img)}>Take image

    

  );

};

ReactDOM.render(, document.getElementById('root'));

```