Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/xulihang/react-vision-camera

React Camera component
https://github.com/xulihang/react-vision-camera

Last synced: 3 months ago
JSON representation

React Camera component

Awesome Lists containing this project

README 

        

## React Vision Camera



Camera component for React using `getUserMedia`. We can use this component for computer vision tasks like barcode scanning, text recognition, etc.



[Online demo](https://shiny-naiad-b61af3.netlify.app/)



### Installation



```

npm install react-vision-camera

```



### Usage



```jsx



import {VisionCamera} from 'react-vision-camera';



function App() {

  const [isActive,setIsActive] = React.useState(true); //whether the camera is active

  const [isPause,setIsPause] = React.useState(false); //whether the video is paused

  const onOpened = (cam:HTMLVideoElement,camLabel:string) => { // You can access the video element in the onOpened event

    console.log("opened"); 

  }



  const onClosed = () => {

    console.log("closed");

  }

  

  const onDeviceListLoaded = (devices:MediaDeviceInfo[]) => {

    console.log(devices);

  }

  

  return (

    


      

      

    


  )

}



```



### FAQ



How to specify which camera to use?



1. Use the `desiredCamera` prop. If one of the camera's name contains it, then it will be used. You can get the devices list in the `onDeviceListLoaded` event.

2. Use the `facingMode` prop. Set it to `environment` to use the back camera. Set it to `user` to use the front camera. Please note that this is not supported on Desktop.



You can use the two props together. `facingMode` has a higher priority.



### License



MIT