Image for post
Image for post

What we’re building

In my previous post I showed how to upload videos to Firebase Cloud Storage using client side encoding. This approach puts the encoding burden on the client, but can save server transcoding costs.

This time I’ll show how to use server side encoding instead, combining Firebase Cloud Storage, Firebase Cloud Functions and the Publitio API which I’ve written about previously.

Note: The method we’ll see here solved the security issue I described in this post, as the API key and secret aren’t used in the client at all.

System Design

The processing pipeline for each video file is as follows:

Image for post
Image for post
  1. Uploading the file from the client to Firebase Cloud Storage. …


Image for post
Image for post

What we’re building

This is a quick tutorial on how to design a login screen with a background video file, which I recently added to my app WaveSpy ( iOS, Android).

Here’s what the screen will look like:

Image for post
Image for post

Project setup

Create the project

I’m assuming you have a flutter dev env set up. If not, you can use Flutter’s Getting Started.

Now let’s create a new project named flutter_login_video. In the terminal run:

flutter create --org com.learningsomethingnew.fluttervideo --project-name flutter_login_video flutter_login_video

It’s a good idea to do your first commit at this point

Add the video_player plugin

We’ll use the video_player plugin to display the video in the background. …


Image for post
Image for post

What we’re building

We’ll see how to build a flutter app for iOS/Android that allows users to view and share videos. In my previous post I showed how to do this with Publitio as our video storage API. In this tutorial we’ll use Firebase Cloud Storage to host the videos instead. We’ll also add client-side encoding and HLS support, so the client can stream the videos with adaptive bitrate.

Image for post
Image for post

The stack

About

Jonathan Perry

Fullstack developer. I like to make products fast.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store