Implementing Video Sharing in Mobile Chat
Video in chat — not just "a bigger image". Different pipeline here: transcoding, streaming upload, HLS or progressive MP4, preview frame. Do it naively — upload original from camera — user waits minutes, and on weak connection gets timeout error.
Main Problem: Size and Format
iPhone 14 Pro video in 4K/60fps weighs ~400 MB per minute. Even 15-second clip — 100 MB. Upload directly — unacceptable both in time and bandwidth.
On iOS video from PHPickerViewController or UIImagePickerController comes in MOV format (HEVC or H.264). Before upload, transcoding is needed. Standard way — AVAssetExportSession with preset AVAssetExportPresetMediumQuality (720p, ~2 Mbit/s) or AVAssetExportPreset1280x720. Export is async, takes 2–30 seconds depending on clip length and device model. On iPhone SE 2nd gen transcoding 30-second video to 720p — about 8 seconds.
On Android situation is more complex: MediaMuxer + MediaCodec give max control but require lots of code. Most projects use FFmpegKit (fork of mobile FFmpeg) — allows setting bitrate, resolution, codec with one command: -vcodec libx264 -crf 28 -vf scale=720:-2. Downside — adds ~15 MB to APK.
Upload With Resumption
Video can't upload as one request without resumption support. Connection breaks — all progress lost.
Right approach — multipart upload on server (AWS S3 Multipart Upload, Cloudflare R2, or custom chunked upload). File split into 5–10 MB parts, each uploaded separately. On break — resume from last successful chunk.
On iOS implement through URLSession with Background Configuration (URLSessionConfiguration.background(withIdentifier:)): upload continues even after app backgrounding. On Android — WorkManager with UploadWorker, gets setExpedited(OutOfQuotaPolicy.RUN_AS_NON_EXPEDITED_WORK_REQUEST) for background.
In React Native — react-native-background-upload or custom native module. Standard fetch with FormData doesn't support background upload on iOS.
Preview and Playback
Generate preview frame before upload: on iOS — AVAssetImageGenerator with generateCGImagesAsynchronously, on Android — MediaMetadataRetriever.getFrameAtTime(). Compress frame to JPEG 480p and upload separately — it appears in chat instantly while video is still uploading.
For chat playback don't embed full player in cell — will kill performance on scroll. Show thumbnail with play button, tap opens AVPlayerViewController (iOS) or ExoPlayer (Android) over chat. ExoPlayer with SimpleExoPlayer and DefaultMediaSourceFactory supports HLS, DASH, and progressive MP4 out of box.
Limitations and UX
Video length limit — not technical, but UX decision. Recommend 60–120 seconds for chats. Exceeding — show warning before transcoding starts, not after.
Upload progress bar with speed display (2.3 MB/s) and remaining time — mandatory. Cancel button must stop both transcoding and upload, delete temp files.
| Stage | Time (30s clip, 720p) |
|---|---|
| Transcoding (iPhone 14) | 3–5 s |
| Transcoding (iPhone SE 2) | 7–12 s |
| Upload 15 MB at 10 Mbit/s | ~12 s |
| Preview generation | < 1 s |
Timeframe
Basic implementation (selection, transcoding, chunked upload, preview, playback) — 3–5 days with backend supporting multipart upload. Background upload + resumption — another 1–2 days. Cost calculated individually after analyzing requirements.