8

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.

enter image description here

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.
David Ben Ari
  • 2,259
  • 3
  • 21
  • 40
  • Can you provide two short videos for us to check the bytes and codecs setup? Need 1 working in all browsers (is the Safari made file?) and any 1 other not working one (MP4 if possible). – VC.One Nov 15 '20 at 23:45
  • @VC.One how can I share mp4 here on SO ? – David Ben Ari Nov 23 '20 at 16:44
  • You'll have to use a file sharing site (_eg:_ Dropbox or Google Drive) or put it somewhere on your site with a direct mp4 link pasted here – VC.One Nov 23 '20 at 16:58

1 Answers1

2

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

Doug Sillars
  • 1,625
  • 5
  • 7
  • thx, I avoided using ffmpeg by using AWS ElasticTranscoder. BTW Safari supports webm. the problem with chrome in the specific combination is that is uses some kind of google's VP8 codec which is not supported by other browsers, not even mobile chrome. – David Ben Ari Nov 23 '20 at 16:47