MediaRecorder captured on Chrome not playable on Mobile or Safari

Question

Goal: use MediaRecorder (or else) api to produce video files that are viewable cross platforms.

Fail: current api falls back to container/codec on google chrome which is only viewable on chrome and advanced desktop media players but not on Safari or mobile devices.

! Same code when running on safari generates a working video file on all platforms.

    const mimeType = 'video/webm;codecs=H264'
    rec = new MediaRecorder(stream.current, { mimeType })
    rec.ondataavailable = e => blobs.push(e.data)
    rec.onstop = async () => {
      saveToFile(new Blob(blobs, { type: mimeType }))
    }

Tried all different combinations of containers and codecs. also tried to override the mimeType of the Blob with MP4 file container. No success what so ever.

also tried:

https://github.com/streamproc/MediaStreamRecorder

https://github.com/muaz-khan/RecordRTC

Same issues. iI seems like chrome's container/codec combinations always fall back to a format that is only viewable out of the box on chrome or a powerful desktop video player like vlc.

The only cross platform working video for me is the one taken from safari browser and is the 5th from left in the picture above.

What is the correct container/codac to be used in MediaCapture api to make the output file playable cross platform.

Edit -

We ended up building a transcoding pipeline with AWS ElasticTranscoder, which takes the uploaded video and transcodes it with a general preset that is playable on all platforms thus creating a converted video file.

• unfortunately the bounty I offered expired, but if someone answers the original question I would gladly reward him with the bounty again.

Answer 1

I think your problem may be in the first line:

    const mimeType = 'video/webm;codecs=H264'

The container you are using is webm, which typically uses codecs VP8, VP9. H264 is a codec used in the mp4 container.

Chrome supports webm. Safari does not (and all iOS browsers are based on Safari - hence your mobile issue).

You say that run on Safari, this outputs a playable video. use ffprobe to see what codec/containers are outputted on Safari - I am guessing that there is a change in container/codec.

Since your video is h264, you must simply change the container to mp4, and it will play everywhere. This is a 'copy' from one container to the other, not a transcoding, but you'll still need ffmpeg :)

Here's a post that might help: Recording cross-platform (H.264?) videos using WebRTC MediaRecorder