Firefox not playing video recorded in Chrome

Question

I have a video that was recorded in Chrome using this react plugin: rico345100/react-multimedia-capture. This video is uploaded to a server.

The video is playing fine in Chrome. However, the same video does not open in Firefox. Conversely, a video recorded in Firefox plays fine in both Chrome and Firefox.

                      |  Works in Firefox |  Works in Chrome |
----------------------+-------------------+------------------+
  Recorded in Firefox |         Y         |         Y        |
----------------------+-------------------+------------------+
   Recorded in Chrome |         N         |         Y        |

How can we address this issue?

Answer 1

The issue is that Chrome is (probably encoding the recording as h246 despite the library that you are using asking it to encode it as vp8. You can see in the library that is asking specifically checking for vp8 support in this line here:

react-multimedia-capture, line 101

let types = ['video/webm;codecs=vp8', 'video/webm', ''];

The library also asks the user agent to encode for video/webm in this line here:

react-multimedia-capture, line 177

let blob = new Blob(this.mediaChunk, { type: 'video/webm' });

However, it seems that the user agent is free to encode using whatever codec it would like whenever it creates the Blob.

I created a toy project to mimic what the library is doing and trying to dictate the codec when creating the Blob doesn't seem to have an effect. Here are the ffprobe outputs of each saved file for each user agent:

Chrome

Input #0, matroska,webm, from 'recording.chrome.webm':
  Metadata:
    encoder         : Chrome
  Duration: N/A, start: 0.000000, bitrate: N/A
    Stream #0:0(eng): Audio: opus, 48000 Hz, mono, fltp (default)
    Stream #0:1(eng): Video: h264 (Baseline), yuv420p(progressive), 1280x720 [SAR 1:1 DAR 16:9], 16.67 fps, 16.67 tbr, 1k tbn, 2k tbc (default)

Firefox

Input #0, matroska,webm, from 'recording.firefox.webm':
  Metadata:
    encoder         : QTmuxingAppLibWebM-0.0.1
  Duration: N/A, start: -0.001000, bitrate: N/A
    Stream #0:0(eng): Video: vp8, yuv420p(progressive), 1280x720, SAR 1:1 DAR 16:9, 30 fps, 30 tbr, 1k tbn, 1k tbc (default)
    Stream #0:1(eng): Audio: opus, 48000 Hz, mono, fltp (default)

Considering this, your best course of action is to not rely on your browser to encode the recording in a format that can be played by all browsers. You can either re-encode your videos to a format that is usable by a broader range of user agents, or have your users upload their videos to your server where you can re-encode for them and then conditionally serve the content using <source> tags.

You should also read this MDN article about supported file types: Media formats for HTML audio and video.