Description

Story

Vista is my Hackathon submission for Supabase Launch week 6. It was inspired by those animated subtitle while scrolling through Youtube Shorts, and I always wanted to play with ffmpeg, and this serves as a good opportunity!

This ends up a super challenging task:

  1. I need to run ffmpeg for video encoding, but hosting a server will required alot of coding & maintainance, thus resorting to use ffmpeg-wasm, which could be use on modern browser that supports wasm.

  2. Perform speech-to-text is not an easy task, to speed up MVP, I've utilized AssemblyAI API for the video transcription.

  3. Because speech-to-text is an async task, I've combined Supabase Edge Function as webhook when the process is done, then use Supabase Realtime to populate the subtitle.

Supabase Usage

  1. Supabase Auth - to handle user and their storage bucket
  2. Supabase DB - to store projects data
  3. Supabase Storage - to store user's video (with policies)
  4. Supabase Realtime - to populate the UI anytime when subtitle is ready
  5. Supabase Edge Function - trigger AssemblyAI transcription, and act as webhook

Supabase Features

  • Supabase Auth
  • Supabase Database
  • Supabase Function
  • Supabase Storage
  • Supabase Realtime

Related Projects