What we’re building

I’ve written a few posts about video uploading to Firebase Storage from Flutter.

One thing that I have found really missing is background uploads — a way to upload large video files that will continue uploading even if the app is closed.

Seems like the Firebase team are planning on adding this feature, but in the meanwhile, here is an alternative way to accomplish it.

We’ll use the flutter_uploader plugin to perform the background uploads. …


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:


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:


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.


What we’re building

We’ll see how to build a cross-platform mobile app that allows users to upload and share videos.


What we’re building

We’ll build a cross-platform mobile app for taking photos and uploading to firebase.

In Part 1, we saw how to take a picture and save it to Firebase Cloud Storage. In this post we’ll move the uploading to a separate thread via web worker, and use the blueimp library to generate a thumbnail locally and show it while uploading.

Web Workers

What is a web worker

Web Workers are a simple means for web content to run scripts in background threads. The worker thread can perform tasks without interfering with the user interface. (mozilla.org)

So we’ll use a web worker to offload code that can potentially…


What we’re building

We’ll build a cross-platform mobile app for taking photos and uploading to firebase.

In Part 1, we’ll take a picture and save it to Firebase Cloud Storage, and then show it in our app. In Part 2, we’ll offload the uploading work, and use the blueimp library to generate a thumbnail locally and show it while uploading.

The stack

  • Vue JS — Component framework
  • Cordova — Cross platform mobile framework
  • Quasar — UI framework (and CLI)
  • Firebase Cloud Storage — For storing the photos
  • Web Workers — For offloading the uploading to a separate thread

Scaffolding

We’ll use Quasar CLI to initialize…


Problem

When working on a Cordova Hybrid app (a cordova app wrapped in a thin layer of native UI) that uses Ionic Web View plugin as the WebView, there was a requirement from the client to have a native button that would load a local testing html file in the main WebView.

Changing the main WebView url in response to a native button, requires editing the MainViewController.m file, which is the main view in which the WebView lives, and where we can find its reference: self.webViewEngine.

Our VC’s self.webViewEngine exposes the loadRequest method, which we can call to load any url…


When working with a relatively new framework like svelte you come across issues that more “battle tested” frameworks have solved already. One such issue is transpiling your code to work on older browsers. This is meaningful especially for a cordova app, because it runs in a system WebView, which version depends on various factors, and is not always updated.

I wrote more about WebView versions in the post: should you transpile your cordova app

What should be transpiled?

We’re going to use babel of course, in order to transpile.

From the babel docs:

Babel is a toolchain that is mainly used to convert ECMAScript…


TL;DR

For example, for setting minSdkVersion to 24, in config.xml add in the Android platform section:

Make sure to remove and re-add the platform or it won’t work!

cordova platform rm android cordova platform add android

For considerations, and a way to test that it works, read on.

What is minSdkVersion

minSdkVersion is a property of the <uses-sdk> tag in the AndroidManifest.xml file. From the docs:

Google Play uses the attributes declared in your app manifest to filter your app from devices that do not meet it’s platform version requirements.

So if you want your app to be available for download in the Play…

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