Is it possible to directly upload images captured by camera to Firebase Storage?

I’m using React.js to create an application that would take a photo and upload it to Firebase Storage. I am using the react-webcam library, which uses this command to take a photo:

const ImageSrc = webcamRef.current.getScreenshot();

This is how I tried uploading the photo to Storage:

 storage.ref(`/images`).put(imageSrc)
 .on("state_changed" , alert("success") , alert)

However, the file that is uploaded is undefined (no photo).

I tried to construct an URL of the photo using blob:

const imageUrl = window.URL.createObjectURL(new Blob(webcamRef.current.getScreenshot()))

But I get this error: >Failed to construct ‘Blob’: The provided value cannot be converted to a sequence.

In the library it is stated that getScreenshot – Returns a base64 encoded string of the current webcam image. So, I tried to use the atob command, but I get the error: Failed to execute ‘atob’ on ‘Window’: The string to be decoded is not correctly encoded.

Does anyone know how I could upload the image to Firebase Storage? Any help would be appreciated!

Answer

Instead of blob, try using putString() command like this:

const task = firebase.storage().ref(`/images`).putString(imageSrc, 'data_url')