Flutter - uploading mp4 to Firebase storage - only audio captured

Viewed 545

I am able to successfully upload a .mp4 file, captured with the camera package, to firebase storage but only the audio exists when playing the video from firebase storage.

The actual video is blank.

Here is a code snippet used to upload the file:

Future<String> uploadFile({required String uid, required File file}) async {
    final fileName = file.uri.pathSegments.last;

    final filePath = "$uid/$fileName";

    final uploadTask =
        FirebaseStorage.instance.ref().child(filePath).putFile(file);

    final snapshot = await uploadTask.whenComplete(() {});

    final downloadURL = await snapshot.ref.getDownloadURL();

    return downloadURL;
  }

I can see where the file is temporarily stored on the iphone:

flutter: /var/mobile/Containers/Data/Application/F6913B6A-7282-41D0-AF6A-00DD5EDCEDC3/Documents/camera/videos/REC_43F873D2-A6AB-4BC3-ADDD-3B3EB71B56B7.mp4

And, I can also preview the video in the app that I am creating before uploading it.

But, once uploaded and I go to firebase storage to view it, I am only able to hear the sound, not see the actual video.

Thanks in advance

1 Answers

I don't think that only the audio is captured or saved on Firebase Storage, but rather that only audio is played when reading the file in web browser.

I have a similar problem with videos I also uploaded to Firebase Storage: they play fine on mobile (I am using Expo AV video) but a black screen is shown on web (only audio can be heard). It has actually nothing to do with Firebase, it is an encoding problem: H265 is not supported yet on most of the web browsers.

Since you use Flutter can you try on a mobile device to verify if you see the video?

===

It could also be that your MIME type is not correctly set when you upload the video, in this case your web browser will try to play it as audio.

If when pasting the download URL (+ required token) directly in the address bar, the web browser renders a video tag it is OK but if it is rendering an audio tag then your Content Type is wrong.

see this answer to manually set the Content Type.

Related