purple-technology / react-camera-pro Goto Github PK
View Code? Open in Web Editor NEWMobile first camera component for React.
License: MIT License
Mobile first camera component for React.
License: MIT License
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
react-camera-pro/src/components/Camera/styles.ts
Lines 12 to 25 in a655126
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.
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!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.