Firebase Storage Video Streaming

I'm working on an app that has video streaming functionality. I'm using firebase database and firebase storage. I'm trying to find some documentation on how firebase storage handles video files, but can't really find much.

There's mentioning in the docs that firebase storage works with other google app services to allow for CDN and video streaming, but all searches seem to lead to a dead end. Any advice?

I think there are several types of video streaming, which could change our answer here:

• Live streaming (subscribers are watching as an event happens)
• Youtube style (post a video and end users watch at their convenience)

Having built a live streaming Periscope style app using Firebase Storage and the Firebase Realtime Database, I pretty strongly recommend against it--we uploaded three second chunks and synced them via the Realtime Database. While it worked (surprisingly well), there was ~5 second latency over very good internet, and it also wasn't the most efficient solution (after all, you're uploading and storing that video, plus there wasn't any transcoding). I recommend using some WebRTC style, built for video transport, and using the Realtime Database for signaling along side the stream.

On the other side, it's definitely possible to build mobile YT on Firebase features. The trick here is going to be transcoding the video (using something like Zencoder or Bitmovin, more here: https://cloud.google.com/solutions/media/) to chop up your uploaded video into smaller chunks of different resolutions (and different formats, iOS requires HLS for streaming, for instance). You client can store chunk information in the Realtime Database (chunk name, resolutions available, number of chunks), and can download said chunks from Storage as the video progresses.

If you want to steam a video from Firebase Storage, this is the best way I found. This will depend on the size of your video file. I'm only requesting 10-30mb files so this solution works good for me. Just treat the Firebase Url as a regular url:

String str = "fire_base_video_URL";
Uri uri = Uri.parse(str);

videoViewLandscape.setVideoURI(uri);
progressBarLandScape.setVisibility(View.VISIBLE);
videoViewLandscape.requestFocus();
videoViewLandscape.start();

If you want to loop the video:

videoViewLandscape.setOnPreparedListener(new MediaPlayer.OnPreparedListener() {
    @Override
    public void onPrepared(MediaPlayer mp) {
        mp.setLooping(true);
    }
});

And if you want to show a progress bar before the video starts do this:

videoViewLandscape.setOnInfoListener(new MediaPlayer.OnInfoListener() {
    @Override
    public boolean onInfo(MediaPlayer mp, int what, int extra) {
        if (what == MediaPlayer.MEDIA_INFO_BUFFERING_END) {
            progressBarLandScape.setVisibility(View.GONE);
            return true;
        }
        else if(what == MediaPlayer.MEDIA_INFO_BUFFERING_START){
            progressBarLandScape.setVisibility(View.VISIBLE);
            return true;
        }
        return false;
    }
});

This is not the best way of doing things but it works for me for now until I can find a good video streaming service.

2020: Yes, firebase storage video streaming is easy and possible.

All other questions suggest that you use a protocol like HLS. However, this is only necessary if you develop an app for the Apple AppStore that serves videos that are longer than 10 minutes.

In all other cases, you can simply encode your videos in mp4 and upload them to firebase. Your clients can then stream the mp4 without a problem. Just make sure that your moov atom is at the beginning of your mp4 file. This allows to start playing the video immediately, even if it is not fully loaded. Users can also skip ahead or go back thanks to variable bit requests which are supported by firebase storage.

To test it, just upload a video to your firebase storage and open it in your browser.

You can host HLS videos on Firebase Cloud Storage. It works pretty well for me. The trick is to modify the playlist .m3u8 files to contain the storage folder prefix, and the ?alt=media suffix for each file entry in the playlist:

#EXTM3U
#EXT-X-VERSION:3
#EXT-X-TARGETDURATION:3
#EXT-X-MEDIA-SEQUENCE:0
#EXTINF:2.760000,
<folder_name>%2F1_fileSequence_0.ts?alt=media
#EXT-X-ENDLIST

You also don't really have to use server-side transcoding, you can have the client who uploads the video do it, and save considerable costs.

I've written a full tutorial with source code here: https://itnext.io/how-to-make-a-serverless-flutter-video-sharing-app-with-firebase-storage-including-hls-and-411e4fff68fa

this is my exact implementation for it to start a video playing from storage on firebase as soon as the view is open, and then have the view disappear and then addded a button to click after to replay the video.

I have a demo link with the key so you can see it works. any questions hit me up.

you will just have to create a IBAction if you want the button after the video disappears.

//  BackMuscles.swift
//  Messenger
//
//  Created by Zach Smith on 8/12/21.
//  Copyright © 2021 spaceMuleFitness. All rights reserved.
//

import UIKit
import AVKit
import AVFoundation


class BackMuscles: UIViewController {
    
    @IBOutlet weak var playv: UIButton!
    
  
    let avPlayerViewController = AVPlayerViewController()
    var avPlayer:AVPlayer?


    override func viewDidLoad() {
        super.viewDidLoad()
        self.view.addBackground()
      
        let movieUrl:NSURL? = NSURL(string: "https://firebasestorage.googleapis.com/v0/b/messenger-test-d225b.appspot.com/o/test%2FTestVideo.mov?alt=media&token=bd4ccba3-b446-43bc-809e-b1152aa3c2ff")
        if let url = movieUrl {
        self.avPlayer = AVPlayer(url: url as URL)
        self.avPlayerViewController.player = self.avPlayer
        }
        NotificationCenter.default.addObserver(self, selector: #selector(playerDidFinishPlaying), name: NSNotification.Name.AVPlayerItemDidPlayToEndTime, object: avPlayerViewController.player?.currentItem)
        
        
        self.present(self.avPlayerViewController, animated: true) { () -> Void in
                self.avPlayerViewController.player?.play()        // Do any additional setup after loading the view.
        }
    }
    
    @objc func playerDidFinishPlaying(note: NSNotification) {
            self.avPlayerViewController.dismiss(animated: true)
        }
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()

    }
    @IBAction func playV(sender: UIButton) {
       
            

         
              
                let amovieUrl:NSURL? = NSURL(string: "https://firebasestorage.googleapis.com/v0/b/messenger-test-d225b.appspot.com/o/test%2FTestVideo.mov?alt=media&token=bd4ccba3-b446-43bc-809e-b1152aa3c2ff")
                if let aurl = amovieUrl {
                    self.avPlayer = AVPlayer(url: aurl as URL)
                self.avPlayerViewController.player = self.avPlayer
            
    self.present(self.avPlayerViewController, animated: true) { () -> Void in
            self.avPlayerViewController.player?.play()

       
    }

    }
}
}

If you want to create a YT like app, you can first compress the video, I recommend using this library to manage video compression, i recommend the one in this link. I've manage to compress a video of 118 mg to 6 mg in under 42 seconds. It also has a great demo app, just follow the example.

After you get the compressed file upload the file to Storage, in you client app you will play the video url using a player like Exo Player.

The video below is pretty good it uses exoplayer to stream instead of mediaplayer or videoViewLanscape https://www.youtube.com/watch?v=s_D5C5e2Uu0

try{
    BandwidthMeter bandwidthMeter = new DefaultBandwidthMeter();
    TrackSelector trackSelector = new DefaultTrackSelector(new AdaptiveTrackSelection.Factory(bandwidthMeter));

    simpleExoPlayer = ExoPlayerFactory.newSimpleInstance(this, trackSelector);
    String vid = "https://www.youtube.com/watch?v=s_D5C5e2Uu0";
    Uri uri= Uri.parse(vid);
    DefaultHttpDataSourceFactory dataSourceFactory = new DefaultHttpDataSourceFactory("exoplayer_video");

    ExtractorsFactory extractorsFactory = new DefaultExtractorsFactory();
    MediaSource mediaSource = new ExtractorMediaSource(uri,dataSourceFactory,
         extractorsFactory, null, null);
    videoView.setPlayer(simpleExoPlayer);
    simpleExoPlayer.prepare(mediaSource);
    simpleExoPlayer.setPlayWhenReady(true);
}

catch (Exception e){ 

}

The below is the implements in the buid gradle app file that you will need.

implementation 'com.google.android.exoplayer:exoplayer:r2.4.0'
implementation 'com.google.android.exoplayer:exoplayer-core:r2.4.0'
implementation 'com.google.android.exoplayer:exoplayer-dash:r2.4.0'
implementation 'com.google.android.exoplayer:exoplayer-hls:r2.4.0'
implementation 'com.google.android.exoplayer:exoplayer-smoothstreaming:r2.4.0'
implementation 'com.google.android.exoplayer:exoplayer-ui:r2.4.0'

To use firestorage to play videos, all you need is the full url to the video. You then pass this url into a video view or exoplayer. No full download is needed. The videoview will stream the content YT style