I need help creating a solution to download a video reel from a canvas in my web app, SioReels, that works on both Chrome browser and in my Android app (WebView). The reel includes a background video, a moving logo, animated text slides, and sound effects, and it must be downloadable as an MP4 (or WebM that can be converted to MP4) for uploading to Facebook. The download keeps failing, showing errors like "Download failed," black screens, or no download at all, especially on mobile. What I Want: A reliable way to record and download the entire reel (video, logo, text animations, slides) as a single file. Must work consistently on Chrome (desktop) and Android devices, including in an Android WebView app. Output should be MP4 or WebM, compatible with Facebook after conversion. Sound effects should ideally be included, but if that’s too complex, the video with logo and text is the priority. No external server-side processing; it must work client-side in the browser/app. What’s Been Tried (All Failed): Another AI (Grok) tried multiple approaches, but none worked. Here’s what was attempted: MediaRecorder with canvas.captureStream(): Used video/webm;codecs=vp8 and video/mp4 mime types. Issues: Black screens, "Download failed" errors, incomplete recordings, or no download on mobile. Errors like "Video not loaded" even when video was loaded. CCapture.js Library: Captured canvas as WebM. Issues: Failed to download, produced black screens, or broke on mobile. Whammy.js Library: Captured frames as images and compiled to WebM. Issues: No download triggered, especially on Android, or failed silently. Offscreen Canvas: Tried rendering to a separate canvas for recording. Issues: Black output or logo-only recordings, no video or text. Video Element Streaming: Streamed canvas to a video element for recording. Issues: Incompatible on mobile, failed to capture full reel content. Important Details: The app uses a