Canvas Recording with Audio for Three.js (Desktop + Mobile + iOS)

Resources
, , , ,
1

I would never publicly admit the ridiculous amount of time it took me to figure this out, especially for iOS. So here it is, to hopefully save someone else the same pain.

What it does:

  • Records video of your Three.js scene WITH audio (Howler.js or any WebAudio)

  • Takes screenshots

  • Works on desktop, Android, AND iOS

  • Desktop captures HTML overlays (HUD elements) via getDisplayMedia / html2canvas

  • Mobile captures canvas only, but gets native Share tray

Live Demo on CodePen →

The hard-won lessons:

  1. iOS MediaRecorder: Pass NO options - no mimeType, no videoBitsPerSecond, no timeslice. Just new MediaRecorder(stream).

  2. Codec priority: Prefer WebM (vp9,opus) over MP4 - better player compatibility on desktop. MP4/H264 as fallback.

  3. Howler audio capture: Connect Howler.masterGain to ctx.createMediaStreamDestination(). But get fresh references when recording starts, as Howler doesn’t create its AudioContext until first sound plays.

  4. iOS file extension: Use .mp4 or social apps won’t recognize it.

  5. Screenshots: It helps havingpreserveDrawingBuffer: true on your renderer.

The demo is a graveyard with spatial crow sounds and mobile touch controls. Full ThreeRecorder class is in there, just copy it.

2 Likes