12/31/2022 0 Comments React native access camera roll![]() On dia-devices, call that getUserMedia function, and tell it that we want video. We'll also immediately ask for access to the user's camera. When that video mounts, we need to save the ref. That's where we'll show the live camera feed. ![]() In that function, we'll set some state to turn on the camera, and when that state gets set, we can render a new video component. Let's make a new onClick function called startChangeImage. Then we can change the file upload to just a button, and make a new onClick function. To interact more directly with the camera, first, we have to check that the browser supports the camera, by checking that media devices is in navigator. That's the easiest way to get an image upload into our app. Since this is for a user profile image, we can even specify that we want to default to the front-facing camera and specify user as the capture prop. If we want it to default to the camera instead of to photos, we can add a capture prop to the file input. When the PWA is installed on a mobile device, that will also allow the user to upload from the camera roll. ![]() When we build and start that in a browser, we can go to the profile page and upload a new image to be displayed as the profile image. That will allow us to display it directly as a user's profile image. We'll make an object URL from the inputs file that was uploaded. For now, we'll just have a bit of state called image, which we'll start as null. Instructor: In app.js, on the profile page, we can add a file and put component that accepts images, which is the easiest way to add an image upload to a PWA. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |