purple-technology / react-camera-pro Goto Github PK

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

how can i get the file size

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

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.

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

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

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

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.

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

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.

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

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.

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.

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.)

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.

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!

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

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

Install styled-components is a must ?

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

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

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

thanks!

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?

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?!?

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!