How do I make a camera that can capture images using React.js and then upload it to firebase?

Question

I have tried multiple ways and finally created a web camera that uploads towards Cloudinary. Is there a way to take these images and upload them into firebase from Cloudinary? If not, can we create a camera in react.js that can upload to the firebase database?

Answer 1

Not sure about cloudinary because i have never used it but you can add camera in react app and then save the image as blob and later use it to save image in firebase storage.

To open camera use the input element with file type and capture attribute

<input
      type="file"
      accept="image/*"
      capture
      />

On taking an image through camera you can create its URL, this is in onchange method in file input

        const {
            target: { files },
        } = e;
        const imageUrl = window.URL.createObjectURL(files[0]);

Now create a blob from the URL

     let resFront = await fetch(imageURL);
     let tempblobFront = await resFront.blob();

and then save blob to firebase storage

firebase
        .storage()
        .ref(put your folder name in firebase storage here)
        .child(put name by which you want to save the image)
        .put(put your image blob over here i.e tempblobFront)
        .then((res) => res)
        .catch((err) => {
            console.log(err);
           }),