Gathering detailed insights and metrics for react-html5-camera-photo-web
Gathering detailed insights and metrics for react-html5-camera-photo-web
Installations
npm install react-html5-camera-photo-webDeveloper Guide
BETA
Typescript
No
Module System
CommonJS
Node Version
16.20.0
NPM Version
8.19.4
Languages
3
JavaScript
CSS
HTML
JavaScript (96.36%)
CSS (2.37%)
HTML (1.27%)
Developer
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
GitHub Statistics
MIT License
216 Stars
268 Commits
94 Forks
2 Watchers
5 Branches
6 Contributors
Updated on Jun 26, 2025
Maintainers
1
Package Meta Information
Latest Version
1.0.0
Package Id
react-html5-camera-photo-web@1.0.0
Unpacked Size
239.86 kB
Size
75.33 kB
File Count
9
NPM Version
8.19.4
Node Version
16.20.0
Published on
Jun 26, 2023
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
1
Dev Dependencies
46
autoprefixerbabel-corebabel-eslintbabel-jestbabel-loaderbabel-preset-react-appbabel-runtimecase-sensitive-paths-webpack-pluginchalkcopy-webpack-plugincss-loaderdotenveslinteslint-config-react-appeslint-config-standardeslint-loadereslint-plugin-flowtypeeslint-plugin-importeslint-plugin-jsx-a11yeslint-plugin-nodeeslint-plugin-promiseeslint-plugin-reacteslint-plugin-standardeslint-watchextract-text-webpack-pluginfile-loaderfs-extragh-pageshtml-webpack-pluginjestobject-assignpostcss-flexbugs-fixespostcss-loaderpromiseprop-typesrafreactreact-dev-utilsreact-domstyle-loadersw-precache-webpack-pluginurl-loaderwebpackwebpack-dev-serverwebpack-manifest-pluginwhatwg-fetch
react-html5-camera-photo
The first objective of this package comes from the need to get the same look and feel of a native mobile camera app but with a react component.
For those who want to build with their own css and need an abstraction of getUserMedia() take a look of jslib-html5-camera-photo with react.
Requirement
- react: >=16.8.0
- react-dom: >=16.8.0
LiveDemo
Demo of react-html5-camera-photo
Required Working Environment for getUserMedia()
-
https or localhost : The
getUserMedia()method is only available in secure contexts(https or localhost). If a document isn't loaded in a secure context, the navigator.mediaDevices property is undefined, making access to getUserMedia() impossible. Attempting to accessgetUserMedia()in this situation will result in a TypeError. See developer.mozilla.org -
iOS >= 11 WebRTC issue with webkit (Chrome & Firefox) : Apple restricts WebRTC to Safari only so it mean that you can't use the
getUserMedia()with Firefox and Chrome. SogetUserMedia()is not supported yet, for "security reasons". See Stackoverflow
Installation
1npm install --save react-html5-camera-photo
1yarn add react-html5-camera-photo
TypeScript Definitions
TypeScript definitions are available from Definitely Typed
1npm install --save-dev @types/react-html5-camera-photo
1yarn add --dev @types/react-html5-camera-photo
Getting started
| parameter | Description |
|---|---|
| onTakePhoto(dataUri): | Event function called when a photo is taken. the dataUri is passed as a parameter. |
Minimum ES6 example
1import React from 'react'; 2import Camera from 'react-html5-camera-photo'; 3import 'react-html5-camera-photo/build/css/index.css'; 4 5function App (props) { 6 function handleTakePhoto (dataUri) { 7 // Do stuff with the photo... 8 console.log('takePhoto'); 9 } 10 11 return ( 12 <Camera 13 onTakePhoto = { (dataUri) => { handleTakePhoto(dataUri); } } 14 /> 15 ); 16} 17 18export default App;
API
PropTypes
| Properties | Type | Default | Description |
|---|---|---|---|
| onCameraStart(): (optional) | Event | Callback called when the camera is started. | |
| onCameraStop(): (optional) | Event | Callback called when the camera is stopped. | |
| onCameraError(error): (Optional) | Event | Callback called with the error object as parameter when error occur while opening the camera. Often the permission. | |
| onTakePhoto(dataUri): (Optional) | Event | The function called when a photo is taken. the dataUri is passed as a parameter. | |
| onTakePhotoAnimationDone(dataUri): (Optional) | Event | The function called when a photo is taken and the animation is done. the dataUri is passed as a parameter. | |
| idealFacingMode: (Optional) (Dynamic) | String | Browser default | The ideal facing mode of the camera, environment or user. Use FACING_MODES constant to get the right string. Example :. FACING_MODES.ENVIRONMENT or FACING_MODES.USER |
| idealResolution: (Optional) (Dynamic) | Object | Browser default | Object of the ideal resolution of the camera, {width: Integer, height: Integer}. |
| isMaxResolution: (Optional) (Dynamic) | Boolean | false | If is true, the camera will start with his own maximum resolution. |
| isImageMirror: (Optional) | Boolean | true | If is true, the camera image will be mirror. |
| isSilentMode:(Optional) | Boolean | false | If is true, the camera do not play click sound when the photo was taken. |
| isFullscreen: (Optional) | Boolean | false | If is true, the camera image will be set fullscreen to force the maximum width and height of the viewport. |
| isDisplayStartCameraError: (Optional) | Boolean | true | If is true, if the camera start with error, it will show the error between h1 tag on the top of the component. Useful to notify the user about permission error. |
| sizeFactor: (Optional) | Number | 1 | Number of the factor resolution. Example, a sizeFactor of 1 get the same resolution of the camera while sizeFactor of 0.5 get the half resolution of the camera. The sizeFactor can be between range of ]0, 1]. |
| imageType:: (Optional) | String | png | String used to get the desired image type between jpg or png. to specify the imageType use the constant IMAGE_TYPES, for example to specify jpg format use IMAGE_TYPES.JPG. Use IMAGE_TYPES constant to get the right image type Example:. IMAGE_TYPES.JPG or IMAGE_TYPES.PNG |
| imageCompression:: (Optional) | Number | 0.92 | Number used to get the desired compression when jpg is selected. choose a compression between [0, 1], 1 is maximum, 0 is minimum. |
Dynamic : If the prop is dynamic, it mean that you can change that prop dynamically without umount the component (removing it). You can do it by a setState() inside the parent component. Checkout the demo example: ./src/demo/AppWithDynamicProperties.js
Example of closing the camera and image preview after take a photo
Probably the typical usage of using this component is to preview the image and close the camera after take a photo. You can take a look of all the code including the ImagePreview component here : ./src/demo/AppWithImagePreview
1import React, { useState } from 'react'; 2import Camera from 'react-html5-camera-photo'; 3import 'react-html5-camera-photo/build/css/index.css'; 4 5import ImagePreview from './ImagePreview'; // source code : ./src/demo/AppWithImagePreview/ImagePreview 6 7function App (props) { 8 const [dataUri, setDataUri] = useState(''); 9 10 function handleTakePhotoAnimationDone (dataUri) { 11 console.log('takePhoto'); 12 setDataUri(dataUri); 13 } 14 15 const isFullscreen = false; 16 return ( 17 <div> 18 { 19 (dataUri) 20 ? <ImagePreview dataUri={dataUri} 21 isFullscreen={isFullscreen} 22 /> 23 : <Camera onTakePhotoAnimationDone = {handleTakePhotoAnimationDone} 24 isFullscreen={isFullscreen} 25 /> 26 } 27 </div> 28 ); 29} 30 31export default App;
Example with all props used
1import React from 'react'; 2import Camera, { FACING_MODES, IMAGE_TYPES } from 'react-html5-camera-photo'; 3import 'react-html5-camera-photo/build/css/index.css'; 4 5function App (props) { 6 function handleTakePhoto (dataUri) { 7 // Do stuff with the photo... 8 console.log('takePhoto'); 9 } 10 11 function handleTakePhotoAnimationDone (dataUri) { 12 // Do stuff with the photo... 13 console.log('takePhoto'); 14 } 15 16 function handleCameraError (error) { 17 console.log('handleCameraError', error); 18 } 19 20 function handleCameraStart (stream) { 21 console.log('handleCameraStart'); 22 } 23 24 function handleCameraStop () { 25 console.log('handleCameraStop'); 26 } 27 28 return ( 29 <Camera 30 onTakePhoto = { (dataUri) => { handleTakePhoto(dataUri); } } 31 onTakePhotoAnimationDone = { (dataUri) => { handleTakePhotoAnimationDone(dataUri); } } 32 onCameraError = { (error) => { handleCameraError(error); } } 33 idealFacingMode = {FACING_MODES.ENVIRONMENT} 34 idealResolution = {{width: 640, height: 480}} 35 imageType = {IMAGE_TYPES.JPG} 36 imageCompression = {0.97} 37 isMaxResolution = {true} 38 isImageMirror = {false} 39 isSilentMode = {false} 40 isDisplayStartCameraError = {true} 41 isFullscreen = {false} 42 sizeFactor = {1} 43 onCameraStart = { (stream) => { handleCameraStart(stream); } } 44 onCameraStop = { () => { handleCameraStop(); } } 45 /> 46 ); 47} 48 49export default App;
Bug report (issues)
Before sending a bug report of camera error, make sure that getUserMedia() is supported by your browser. Please test your camera on : DetectRTC | Is WebRTC Supported In Your Browser? If the System has Webcam is supported, please send the screenshot of the first 7 first rows of the table.
FAQ
- What if i want to improve the code or add functionalities?
- Please take a look into the CONTRIBUTING.md
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: MIT License: LICENSE:0
Reason
Found 3/18 approved changesets -- score normalized to 1
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 22 are checked with a SAST tool
Reason
131 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-6chw-6frg-f759
- Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw
- Warn: Project is vulnerable to: GHSA-whgm-jr23-g3j9
- Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
- Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25
- Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
- Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
- Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw
- Warn: Project is vulnerable to: GHSA-cwfw-4gq5-mrqx
- Warn: Project is vulnerable to: GHSA-g95f-p29q-9xw4
- Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
- Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw
- Warn: Project is vulnerable to: GHSA-257v-vj4p-3w2h
- Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c
- Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
- Warn: Project is vulnerable to: GHSA-3wcq-x3mq-6r9p
- Warn: Project is vulnerable to: GHSA-ff7x-qrg7-qggm
- Warn: Project is vulnerable to: GHSA-vh7m-p724-62c2
- Warn: Project is vulnerable to: GHSA-r9p9-mrjm-926w
- Warn: Project is vulnerable to: GHSA-434g-2637-qmqr
- Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m
- Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw
- Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p
- Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747
- Warn: Project is vulnerable to: GHSA-vjh7-7g9h-fjfh
- Warn: Project is vulnerable to: GHSA-4gmj-3p3h-gm8h
- Warn: Project is vulnerable to: GHSA-6h5x-7c5m-7cr7
- Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc
- Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx
- Warn: Project is vulnerable to: GHSA-74fj-2j2h-c42q
- Warn: Project is vulnerable to: GHSA-pw2r-vq6v-hr8c
- Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc
- Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp
- Warn: Project is vulnerable to: GHSA-8r6j-v8pm-fqw3
- Warn: Project is vulnerable to: MAL-2023-462
- Warn: Project is vulnerable to: GHSA-8mmm-9v2q-x3f9
- Warn: Project is vulnerable to: GHSA-pfrx-2q88-qq97
- Warn: Project is vulnerable to: GHSA-62gr-4qp9-h98f
- Warn: Project is vulnerable to: GHSA-f52g-6jhx-586p
- Warn: Project is vulnerable to: GHSA-2cf5-4w76-r9qv
- Warn: Project is vulnerable to: GHSA-3cqr-58rm-57f8
- Warn: Project is vulnerable to: GHSA-g9r4-xpmj-mj65
- Warn: Project is vulnerable to: GHSA-q2c6-c6pm-g3gh
- Warn: Project is vulnerable to: GHSA-765h-qjxv-5f44
- Warn: Project is vulnerable to: GHSA-f2jv-r9rf-7988
- Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj
- Warn: Project is vulnerable to: GHSA-pfq8-rq6v-vf5m
- Warn: Project is vulnerable to: GHSA-6x33-pw7p-hmpq
- Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27
- Warn: Project is vulnerable to: GHSA-qqgx-2p2h-9c37
- Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22
- Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
- Warn: Project is vulnerable to: GHSA-7r28-3m3f-r2pr
- Warn: Project is vulnerable to: GHSA-r8j5-h5cx-65gg
- Warn: Project is vulnerable to: GHSA-2pr6-76vf-7546
- Warn: Project is vulnerable to: GHSA-8j8c-7jfh-h6hx
- Warn: Project is vulnerable to: GHSA-896r-f27r-55mw
- Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
- Warn: Project is vulnerable to: GHSA-6c8f-qphg-qjgp
- Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq
- Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488
- Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g
- Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw
- Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9
- Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm
- Warn: Project is vulnerable to: GHSA-4xcv-9jjx-gfj3
- Warn: Project is vulnerable to: GHSA-7wpw-2hjm-89gp
- Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
- Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
- Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m
- Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h
- Warn: Project is vulnerable to: GHSA-92xj-mqp7-vmcj
- Warn: Project is vulnerable to: GHSA-wxgw-qj99-44c2
- Warn: Project is vulnerable to: GHSA-5rrq-pxf6-6jx5
- Warn: Project is vulnerable to: GHSA-8fr3-hfg3-gpgp
- Warn: Project is vulnerable to: GHSA-gf8q-jrpm-jvxq
- Warn: Project is vulnerable to: GHSA-2r2c-g63r-vccr
- Warn: Project is vulnerable to: GHSA-cfm4-qjh2-4765
- Warn: Project is vulnerable to: GHSA-x4jg-mjrx-434g
- Warn: Project is vulnerable to: GHSA-5fw9-fq32-wv5p
- Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr
- Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9
- Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
- Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w
- Warn: Project is vulnerable to: GHSA-h7cp-r72f-jxh6
- Warn: Project is vulnerable to: GHSA-v62p-rq8g-8h59
- Warn: Project is vulnerable to: GHSA-566m-qj78-rww5
- Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
- Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
- Warn: Project is vulnerable to: GHSA-5q6m-3h65-w53x
- Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
- Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
- Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
- Warn: Project is vulnerable to: GHSA-h9rv-jmmf-4pgx
- Warn: Project is vulnerable to: GHSA-hxcc-f52p-wc94
- Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
- Warn: Project is vulnerable to: GHSA-g4rg-993r-mgx7
- Warn: Project is vulnerable to: GHSA-c9g6-9335-x697
- Warn: Project is vulnerable to: GHSA-vx3p-948g-6vhq
- Warn: Project is vulnerable to: GHSA-3jfq-g458-7qm9
- Warn: Project is vulnerable to: GHSA-r628-mhmh-qjhw
- Warn: Project is vulnerable to: GHSA-9r2w-394v-53qc
- Warn: Project is vulnerable to: GHSA-5955-9wpr-37jh
- Warn: Project is vulnerable to: GHSA-qq89-hq3f-393p
- Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
- Warn: Project is vulnerable to: GHSA-jgrx-mgxx-jf9v
- Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
- Warn: Project is vulnerable to: GHSA-7p7h-4mm5-852v
- Warn: Project is vulnerable to: GHSA-3329-pjwv-fjpg
- Warn: Project is vulnerable to: GHSA-p6j9-7xhc-rhwp
- Warn: Project is vulnerable to: GHSA-89gv-h8wf-cg8r
- Warn: Project is vulnerable to: GHSA-gcv8-gh4r-25x6
- Warn: Project is vulnerable to: GHSA-gmv4-r438-p67f
- Warn: Project is vulnerable to: GHSA-8h2f-7jc4-7m3m
- Warn: Project is vulnerable to: GHSA-3vjf-82ff-p4r3
- Warn: Project is vulnerable to: GHSA-g694-m8vq-gv9h
- Warn: Project is vulnerable to: GHSA-9m6j-fcg5-2442
- Warn: Project is vulnerable to: GHSA-hh27-ffr2-f2jc
- Warn: Project is vulnerable to: GHSA-rqff-837h-mm52
- Warn: Project is vulnerable to: GHSA-8v38-pw62-9cw2
- Warn: Project is vulnerable to: GHSA-hgjh-723h-mx2j
- Warn: Project is vulnerable to: GHSA-jf5r-8hm2-f872
- Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6
- Warn: Project is vulnerable to: GHSA-cf66-xwfp-gvc4
- Warn: Project is vulnerable to: GHSA-4v9v-hfq4-rm2v
- Warn: Project is vulnerable to: GHSA-9jgg-88mc-972h
- Warn: Project is vulnerable to: GHSA-g78m-2chm-r7qv
- Warn: Project is vulnerable to: GHSA-c4w7-xm78-47vh
- Warn: Project is vulnerable to: GHSA-p9pc-299p-vxgp
Score
2.1
/10
Last Scanned on 2025-07-07
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More