LivCast - Mobile Live Streaming Platform

Problem Statement

Live streaming demand has exploded, particularly in mobile-first regions. However, most professional broadcasting solutions remain heavily desktop-centric. Open Broadcaster Software (OBS) is powerful but bulky, complex, and unsuited for creators on the move.

Mobile creators were forced to juggle multiple disconnected applications to stream across different networks, manage their assets, and view metrics. There was no simple, mobile-first solution that combined multi-destination streaming, local video editing, and reliable, low-latency live broadcasting in a single package.

Project Objective

• Multi-Destination Broadcasting: Enable seamless simultaneous streaming to Facebook Live, YouTube, and Twitch from a single mobile device.
• Dynamic Ingestion: Support multiple input sources including on-device cameras, RTMP feeds, local video file uploads, and external stream URLs.
• Continuous 24/7 Playback: Build loop-playback pipelines for pre-recorded media to allow creators to run automated, scheduled virtual streams.
• On-Device Video Editing: Provide immediate trimming, aspect-ratio scaling, filter overlays, and brand watermarking directly on the device.
• Robust Delivery: Ensure a highly stable, low-latency stream pipeline using optimized RTMP ingestion settings.

Solution Summary

We developed LivCast, a mobile live streaming app built in React Native (Android/iOS) that allows content creators to broadcast live feeds or pre-recorded videos to multiple destinations simultaneously.

By implementing an on-device media processing pipeline powered by FFmpeg, creators can edit their videos, schedule broadcasts, and optimize stream parameters directly from their phones.

Core Interface Preview

Below is a preview of the main application flows—including onboarding, live setups, target platform selection, and scheduling configurations:

Platform Demo Video

Here is a demo video showing the app in action:

Key Features

• Simultaneous Multi-Streaming: Stream once from your mobile device and broadcast to YouTube, Facebook, and Twitch concurrently.
• Link Ingestion: Provide a direct video URL to go live immediately, bypassing long manual uploads.
• Automated Scheduling: Set one-time or recurring streams with continuous 24/7 looping playback.
• Content Creation Hub: Created Reels and interactive Web Stories editors to drive user engagement on mobile feeds.
• Large Asset Management: Optimized upload queues for files exceeding 1GB using progressive multipart uploads.

Individual Contribution & Implementation

As the core React Native Frontend Developer, I architected the application from scratch and built the native media bridge:

1. On-Device Video Editing Engine

I designed the on-device video compilation layer using FFmpeg. When a video is selected, the application calls native processes to crop, trim, rotate, and compress the asset.

For instance, to extract dynamic preview thumbnails from video files, we run:

# Extract a frame at the 5-second mark with high quality
ffmpeg -ss 00:00:05 -i input.mp4 -vframes 1 -q:v 2 output_thumbnail.jpg

2. Multi-Platform Ingestion

I implemented the Facebook Graph API and YouTube Data API integrations, solving complex OAuth permission models and automated stream creation workflows.

To stream pre-recorded assets to multiple endpoints, I configured a multiplexed RTMP forwarding command:

# Stream input.mp4 continuously to Facebook and YouTube RTMP targets using the tee muxer
ffmpeg -re -i input.mp4 \
  -c:v libx264 -preset veryfast -maxrate 3000k -bufsize 6000k -pix_fmt yuv420p -g 60 \
  -c:a aac -ar 44100 -b:a 128k \
  -f tee -map 0 "[f=flv]rtmp://youtube_stream_url/key|[f=flv]rtmp://facebook_stream_url/key"

3. Native App Performance Tweaks

• UI Jank Reduction: Migrated heavy-listing lists from FlatList to Shopify's FlashList, reducing item rendering lags by over 80%.
• Client Cache: Implemented TanStack Query for robust state synchronization, eliminating redundant API fetch requests.
• Storage Layer: Integrated Zustand and MMKV for fast, thread-safe local settings storage.

Challenges & Solutions

Complex FFmpeg Ingestion Constraints

YouTube and Facebook enforce different audio/video encoding guidelines (e.g., specific GOP size, constant frame rates, and AAC audio profiles).

• Solution: We created a modular transcoding profiles builder. Depending on the active targets selected, our FFmpeg bridge dynamically compiles parameters matching all platform guidelines (forcing -g 60 for 30fps stream rates).

Large Asset Mobile Network Timeouts

Uploading files larger than 1GB regularly timed out on unstable mobile network connections.

• Solution: Built a progressive chunked upload pipeline. We split assets into 5MB parts locally, loaded them via an optimized background WebView, and routed them to AWS S3 buckets. Failed parts were automatically retried from the checkpoint.

Measurable Results

• Low-Latency Streams: Maintained sub-3-second stream delay across major CDNs.
• Reliable Large Uploads: Achieved a 98% upload success rate for files up to 2GB over cellular connections.
• Fluid UI: FlashList integration restored constant 60 FPS scrolling on legacy Android devices.
• On-Device Trimming: Trimming operations finished in under 10 seconds for standard mobile video lengths.

Business Impact

• Audience Multiplier: Enabled creators to double their viewership by streaming to Facebook and YouTube at the same time.
• Self-Service Scheduling: Reduced operational workloads by allowing creators to pre-program virtual streams 7 days in advance.
• Content Diversity: Short-form Reels and Web Stories drove a 45% increase in user session durations inside the mobile feed.

Architecture & Scalability

Architecture Diagram

• Frontend Core: React Native (Bare Workflow) targeting Android API 21+ and iOS 13+.
• Media Transcoder: On-device FFmpeg binaries utilizing hardware-accelerated H.264 profiles.
• Asset Ingestion: AWS S3 with CloudFront CDN integration.
• Live Notifications: WebSocket notifications for stream updates and interactive chat engagement.