purple-technology / react-camera-pro

Mobile first camera component for React.

react-camera-pro

Universal Camera component for React.

Designed with focus on Android and iOS cameras. Works with standard webcams as well.

See this for browser compatibility.

Note: WebRTC is only supported on secure connections. So you need to serve it from https. You can test and debug in Chrome from localhost though (this doesn't work in Safari).

Features

• mobile friendly camera solution (tested on iOS and Android)
• video element is fully responsive
  • you can setup parameter to cover your container
  • you can define aspectRatio of view: 16/9, 4/3, 1/1, ...
• taking photo to base64 jpeg file - with same aspect Ratio as view, with FullHD resolution (or maximum supported by camera).
• working with standard webcams or other video input devices
• supports autofocus
• switching facing/environment cameras (with your own button)
• detect number of cameras
• facing camera is mirrored, environment is not
• controlled by react Ref
• public functions to take photo, to switch camera and to get number of cameras
• typescript library

Installation

npm install --save react-camera-pro

Demo

https://purple-technology.github.io/react-camera-pro/

Example

https://github.com/purple-technology/react-camera-pro/blob/master/example/src/App.tsx

Usage

import React, { useState, useRef } from "react";
import {Camera} from "react-camera-pro";

const Component = () => {
  const camera = useRef(null);
  const [image, setImage] = useState(null);

  return (
    <div>
      <Camera ref={camera} />
      <button onClick={() => setImage(camera.current.takePhoto())}>Take photo</button>
      <img src={image} alt='Taken photo'/>
    </div>
  );
}

export Component;

Props

prop	type	default	notes
facingMode	'user'|'environment'	'user'	default camera - 'user' or 'environment'
aspectRatio	'cover'|number	'cover'	aspect ratio of video (16/9, 4/3);
numberOfCamerasCallback	(numberOfCameras: number):void	() => null	callback is called if number of cameras change
errorMessages	object? see below	see below	Error messages object (optional)

Error messages (prop errorMessages)

Type:

errorMessages: {
  noCameraAccessible?: string;
  permissionDenied?: string;
  switchCamera?: string;
  canvas?: string;
};

Default:

  {
    noCameraAccessible: 'No camera device accessible. Please connect your camera or try a different browser.',
    permissionDenied: 'Permission denied. Please refresh and give camera permission.',
    switchCamera:
    'It is not possible to switch camera to different one because there is only one video device accessible.',
    canvas: 'Canvas is not supported.'
  }

Methods

• takePhoto(): string - Returns a base64 encoded string of the taken image.
• switchCamera(): 'user'|'environment' - Switches the camera - user to environment or environment to user. Returns the new value 'user' or 'environment'.
• getNumberOfCameras(): number - Returns number of available cameras.

See demo

See example code

const Component = () => {
  const camera = useRef(null);
  const [numberOfCameras, setNumberOfCameras] = useState(0);
  const [image, setImage] = useState(null);

  //...

  return (
    <Camera ref={camera} numberOfCamerasCallback={setNumberOfCameras} />
      <img src={image} alt='Image preview' />
      <button
        onClick={() => {
            const photo = camera.current.takePhoto();
            setImage(photo);
        }}
      />
      <button
        hidden={numberOfCameras <= 1}
        onClick={() => {
          camera.current.switchCamera();
        }}
      />
  )

Camera options

User/Enviroment camera

  const Cam = () => <Camera ref={camera} facingMode='environment'} />

Aspect ratio

const Cam = () => <Camera ref={camera} aspectRatio={16 / 9} />;

Using within an iframe

<iframe src="https://example.com/camera-pro-iframe" allow="camera;"/>

Credits

• Thanks for boilerplate to: https://medium.com/@xfor/developing-publishing-react-component-library-to-npm-styled-components-typescript-cc8274305f5a
• Thanks for Camera Template to: https://www.kasperkamperman.com/blog/camera-template/

License

MIT

react-camera-pro's Issues

Flash

Hey guys,
Would it not be great to have the possibility to use the flash?
And have the opportunity to switch it on and off?!?

Camera zoom

Hi all!
Somehow is the video feed of my camera zoomed in.
Why is that?

How can you use the auto focus mode?

Hi there!

How can you use the auto focus mode? I cannot seem to find a reference to it in the readme or in the code base.

Thanks in advance!

How to set the width/height?

I don't see any props for that or specific styling instructions. Consider that some may not want a full screen camera.

warnings with mirrored and aspectRatio

Hello, I have two warnings with the lib, it's errors that we wan only fix in the lib:

Warning: Received `false` for a non-boolean attribute `mirrored`.

If you want to write it to the DOM, pass a string instead: mirrored="false" or mirrored={value.toString()}.

If you used to conditionally omit it with mirrored={condition && value}, pass mirrored={condition ? value : undefined} instead.

react-dom.development.js:86 Warning: React does not recognize the `aspectRatio`$ prop on a DOM element.

If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `aspectratio` instead.

If you accidentally passed it from a parent component, remove it from the DOM element.

Cannot load the camera into the canvas for iOS WKWebView

Hi, i am using WKWebView running on iOS 16.5. I tried to load the example https://purple-technology.github.io/react-camera-pro/ but I cannot see the camera loaded into the canvas. It just completely white

I already give the permission for camera access but still didn't load the live camera. I get error on my xcode when running the project

RealtimeMediaSource::selectSettings failed constraint 10

Is there any issue? Thanks

unsupported to node version 18.2.0

i am not able to install this module in my react app version 18.2.0 please update asap

Not the maximum resolution of the camera.

Hi.

In the Features part, there is "with FullHD resolution (or maximum supported by camera)."
How can I get the maximum resolution of the camera?

The camera supports 4K size, but even if aspectRatio is set to "16/9",
When you do "takePhoto", it is a FullHD (1980 x 1080) photo.

Is there any other way to set it?

Best regard.

incorrect logic when switching to a different "environment" camera

react-camera-pro/src/components/Camera/Camera.tsx

Line 245 in d0cce40

if (switchToCamera) {

the code straightly ignore the specified videoDeviceId if shouldSwitchToCamera() returns true, instead it picks an "environment" camera itself. This is undesired when I want to select a specific "environment" camera (e.g. the ultra wide, etc.)

Remove icon play and pause on iphone 11 ++ with battery saving mode is on

I found an issue that on iphone 11 ++ with saving battery mode is on will show an icon play and pause. How do I remove it ?. Thank you in advance

how can i know the file size

how can i get the file size

Module not found: Can't resolve 'styled-components'

a

When switchCamera is called twice in a row, the message "noCameraAccessible" is displayed.

Steps:

1. open your own example in mobile browser
2. Quickly click the button to switch camera, the message "noCameraAccessible" is displayed and never disappear.

Analysis:

This is because method getUserMedia was called again before it finished

Fetching the camera stream

Hi,

foremost, thanks for this nice repo! I would like to use this together with a machine learning model and draw boxes on top of the camera display. Is it feasible to catch every image of the camera stream and put it into a machine learning model?

thanks!

fail install

npm ERR! peer react@"^16.12.0" from [email protected]
npm ERR! node_modules/react-camera-pro
npm ERR! react-camera-pro@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry

Camera doesn't accept className props

I was initially trying to style the camera component to be circular , adding some boderRadius to it ,never worked

demo outward facing camera is showing white screen.

The demo at:

https://purple-technology.github.io/react-camera-pro/

does not work with the outward facing camera of mobile phone with front and rear cameras - shows only a white screen.

Ive tested this alongside phone camera app and other react camera solutions so sure the camera is working

thanks

Issues - Aspect Ratio on Samsung S10+ and Galaxy Z flip browser

Hello everyone, I am having issue when I test on Samsung S10+ and Galaxy Z flip phone chrome browser. Seems like the aspect ratio a bit weird in Samsung chrome browser.

So far I tested using iPhone 8+ and Vivo no issues.

aspectRatio={cover} bottom, top, left and right style not being applied correctly.

react-camera-pro/src/components/Camera/styles.ts

Lines 12 to 25 in a655126

	export const Container = styled.div<{ aspectRatio: AspectRatio }>`
	width: 100%;
	${({ aspectRatio }) =>
	aspectRatio === 'cover'
	? `
	position: absolute;
	bottom: 0
	top: 0
	left: 0
	right: 0`
	: `
	position: relative;
	padding-bottom: ${100 / aspectRatio}%;`}
	`;

should be:

export const Container = styled.div<{ aspectRatio: AspectRatio }>`
  width: 100%;
  ${({ aspectRatio }) =>
    aspectRatio === 'cover'
      ? `
    position: absolute;
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;`
      : `
    position: relative;
    padding-bottom: ${100 / aspectRatio}%;`}
`;

the positioning is not being applied correctly and aspectRatio={cover} is not working correctly, which is the default.

Module not found: Can't resolve 'styled-components'

I am getting the error Module not found: Can't resolve 'styled-components' when i first tried to implement the module in my Nextjs app.

I did not see any note regarding dependencies in the Readme docs so i assumed it would work out of the box.

My project does not use any CSS-in-js solution but rather depends on Tailwind and custom simple CSS so i am not too keen on adding styled-components just for one module.

Having a look at the demo here, the screen does not look overly complex and could be built with simple CSS. I was wondering if having a hard dependency on something as critical as a styling solution could be avoided since not everybody would be keen on adding a dependency, especially if they have a similar alternate solution (maybe Glamour, Radium, Emotion etc) already implemented in their projects.

Camera has extremally low resolution

I started using react-camera-pro, but since then all user-uploaded images are extremally slow.

The reason I originally migrated from using <input type="camera"> to an in-app camera was because, on some phones, the images weren't saving after capture. This was likely because of the extreme high resolution of some phone cameras were overloading memory hence not gettting over the image from phones camera to browser.

But I can't have such low resolution.

Any solution?

Is there a way to record mp4 video?

Hey, great repo! I was wondering if there is a way to use it to record mp4 videos?

thanks!

errorMessages in props is not optional

The errorMessages in the props of the Camera component is not optional.

Therefore, the following error occurs if props is omitted as follows.

 <Camera ref={cameraRef} />

Property 'errorMessages' is missing in type '{ ref: RefObject<CameraType>; aspectRatio: number; }' but required in type 'CameraProps'.ts

To resolve the error, it should be stated as such.

 <Camera ref={cameraRef} errorMessages={{}} />

The README is marked as optional, as shown below, so this is considered to be an implementation error.
https://github.com/purple-technology/react-camera-pro/blob/master/README.md?plain=1#L74

After upgrade to iOS 17.2.1, camera video preview shows only half width.

After my iPhone 12 Pro auto-updated to iOS 17.2.1, I see a brand new problem with the react-camera-pro video element that previews the stream coming from the camera. I saw this first in my own application, but I notice it happens also in the demo. I see near-identical behavior in Chrome, Safari, and Firefox browsers.

The issue is that when the camera preview first appears, it fills only half of the video element width. Interestingly, if I switch facing mode, it fills the other half of the video element (see below).

Here it is in the demo app on Safari:

Initial portrait view	After switching the facing mode

The problem disappears in all browsers if I switch the orientation to landscape mode. If I then switch back to portrait mode, it's still fine, and stays fine thereafter until I destroy and recreate the component. By "fine", I mean that the preview fills the entire video element like normal.

Since the issue appeared with an iOS update, it's likely an iOS problem. We can cross our fingers it will be fixed with a subsequent iOS update, but in the meantime I'm wondering if there might be a workaround or a patch we can apply to the library. I've locally forked the repo and tried some naïve tricks in the video constraints with no luck yet.

Unable to compile ?

./node_modules/react-camera-pro/dist/index.esm.js
Module not found: Can't resolve 'styled-components'

Install styled-components is a must ?

Can it be implemented using Class Component?

Just wondering if this can be implemented in a class component, I'm not very well versed with functional components, unfortunately.