React Js Camera Ios and Android Upload
Taking Photos with the Photographic camera
At present for the fun part - adding the ability to accept photos with the device'south camera using the Capacitor Camera API. We'll begin with building it for the web, then make some small tweaks to make it piece of work on mobile (iOS and Android).
To practise so, we will create our own custom React claw that will manage the photos for the gallery.
annotation
If you are not familiar with React Hooks, Introducing React Hooks from the official React docs is a good resource to get-go with.
Create a new file at src/hooks/usePhotoGallery.ts and open information technology up.
A custom hook is just a role that uses other React hooks. And that's what we volition exist doing! We will start by importing the various hooks and utilities we will be using from React core, the Ionic React Hooks project, and Capacitor:
import { useState , useEffect } from 'react' ;
import { isPlatform } from '@ionic/react' ;
import { Camera , CameraResultType , CameraSource , Photograph } from '@capacitor/camera' ;
import { Filesystem , Directory } from '@capacitor/filesystem' ;
import { Storage } from '@capacitor/storage' ;
import { Capacitor } from '@capacitor/core' ;
Next, create a function named usePhotoGallery:
export function usePhotoGallery ( ) {
const takePhoto = async ( ) => {
const photo = await Camera . getPhoto ( {
resultType : CameraResultType . Uri ,
source : CameraSource . Photographic camera ,
quality : 100 ,
} ) ;
} ;
return {
takePhoto ,
} ;
}
Our usePhotoGallery hook exposes a method called takePhoto, which in turn calls into Capacitor's getPhoto method.
Discover the magic here: at that place's no platform-specific code (web, iOS, or Android)! The Capacitor Camera plugin abstracts that away for usa, leaving just 1 method call - getPhoto() - that will open the device's camera and allow us to take photos.
The last stride we need to take is to use the new claw from the Tab2 page. Go back to Tab2.tsx and import the hook:
import { usePhotoGallery } from '../hooks/usePhotoGallery' ;
And right before the render statement in the functional component, get access to the takePhoto method by using the hook:
const Tab2 : React . FC = ( ) => {
const { takePhoto } = usePhotoGallery ( ) ;
// snip - residue of lawmaking
Save the file, and if you're not already, restart the development server in your browser by running ionic serve. On the Photo Gallery tab, click the Camera push button. If your computer has a webcam of whatever sort, a modal window appears. Take a selfie!
(Your selfie is probably much meliorate than mine)
After taking a photo, it disappears. We still demand to display it within our app and save it for hereafter access.
Get-go nosotros will create a new type to define our Photo, which will hold specific metadata. Add the post-obit UserPhoto interface to the usePhotoGallery.ts file, somewhere outside of the master function:
export interface UserPhoto {
filepath : cord ;
webviewPath ? : cord ;
}
Back at the tiptop of the role (right subsequently the call to usePhotoGallery, we will define a country variable to store the assortment of each photo captured with the Camera.
const [ photos , setPhotos ] = useState < UserPhoto [ ] > ( [ ] ) ;
When the camera is done taking a picture, the resulting Photo returned from Capacitor will be stored in the photo variable. We want to create a new photo object and add information technology to the photos state array. We brand sure we don't accidently mutate the current photos array past making a new array, and then phone call setPhotos to shop the array into state. Update the takePhoto method and add this code afterward the getPhoto phone call:
const fileName = new Date ( ) . getTime ( ) + '.jpeg' ;
const newPhotos = [
{
filepath : fileName ,
webviewPath : photograph . webPath ,
} ,
... photos ,
] ;
setPhotos ( newPhotos ) ;
Side by side, let'southward expose the photos array from our hook. Update the return statement to include the photos:
render {
photos ,
takePhoto ,
} ;
And back in the Tab2 component, get access to the photos:
const { photos , takePhoto } = usePhotoGallery ( ) ;
With the photograph(s) stored into the main array we tin brandish the images on the screen. Add a Grid component and then that each photo volition display nicely as photos are added to the gallery, and loop through each photo in the Photos array, adding an Prototype component (<IonImg>) for each. Point the src (source) to the photo's path:
< IonContent >
< IonGrid >
< IonRow >
{ photos . map ( ( photo , index ) => (
< IonCol size = " 6 " key = { index } >
< IonImg src = { photo . webviewPath } />
</ IonCol >
) ) }
</ IonRow >
</ IonGrid >
< ! -- < IonFab > markup -- >
</ IonContent >
Save all files. Within the web browser, click the Camera button and take another photo. This time, the photograph is displayed in the Photo Gallery!
Up side by side, we'll add support for saving the photos to the filesystem, and so they can be retrieved and displayed in our app at a afterward time.
Source: https://ionicframework.com/docs/react/your-first-app/taking-photos
0 Response to "React Js Camera Ios and Android Upload"
Post a Comment