1.0.1 • Published 4 years ago
react-camera-control v1.0.1
react-camera-control
The objective of this package is to support both web camera and onvif camera for pan-tilt-zoom control. Non pan-tilt-zoom camera can also use package to display and capture video feed.
Features:
- Web camera photo taking
- Web camera zoom control
- Web camera pan control
- Web camera tilt control
- Onvif camera photo taking
- Onvif camera zoom control
- Onvif camera pan control
- Onvif camera tilt control
- Camera list
Requirement
- react: >=15.0.0
- react-dom: >=15.0.0
- prop-types: >=15.5.4
- Chrome version: > 57
LiveDemo
Install
npm install --save react-camera-control
Usage
import React, { Component } from 'react'
import ReactCameraControl from 'react-camera-control'
export default class App extends Component {
takePicture = async () => {
const blob = await this.camera.capture()
this.img.src = URL.createObjectURL(blob)
this.img.onload = () => {
URL.revokeObjectURL(this.src)
}
};
render() {
return (
<div>
<ReactCameraControl ref={cam => { this.camera = cam }} >
<div style={styles.captureContainer} onClick={this.takePicture}>
<div style={styles.captureButton} />
</div>
</ReactCameraControl>
<img
style={styles.captureImage}
ref={img => { this.img = img }}
alt='' />
</div>
)
}
}
const styles = {
captureContainer: {
display: 'flex',
position: 'absolute',
justifyContent: 'center',
zIndex: 1,
bottom: 0,
width: '100%'
},
captureButton: {
backgroundColor: '#fff',
borderRadius: '50%',
height: 28,
width: 28,
color: '#000',
margin: 20
},
captureImage: {
width: '100%'
}
}
Reference
- MDN web docs - MediaDevices.getUserMedia()
- Google Take Photos and Control Camera Settings
- React Camera
- jslib-html5-camera-photo
License
MIT © AGRID