Getting the mimeType from a MediaRecorder that was

2019-09-19 01:18发布

问题:

I'm using the MediaRecorder API to record some media on a page. In my MediaRecorder initialization, I'm not specifying content type as I do not require anything in particular. The browser can choose what it wants.

var mediaRecorder = new MediaRecorder(stream);

However, when it comes time to save that recording, I need to know the mimeType for the blob, and so I can determine a reasonable file name extension.

The MediaRecorder.mimeType proprety is what I want, but it is an empty string. It doesn't set mimeType to the default for MediaRecorder, so I have seemingly no way to know what the default mimeType is.

  mediaRecorder.onstop = function (e) {
    var mediaFileUrl = window.URL.createObjectURL(
      new Blob(chunks, {type: /* TODO: mime type here */})
    );

    $('<a>').attr({
      href: mediaFileUrl,
      download: 'Recording.?????' // TODO: Use mime type to figure out file name extension
    })[0].click();

    window.URL.revokeObjectURL(mediaFileUrl);
    chunks = [];
  }

回答1:

At this time, there is no way to get the information you need out of the box.

The current W3C specification states that if the mimetype is not specified (by you):

the UA will use a platform-specific default format.

That's what happening in your case, you're not specifying any mimetype and the UA, the browser is choosing the best suited type for you and there is no specification regarding a way to get the chosen format back.

Right now, the only method that can get you close to that is to use isTypeSupported that provides some media support detection, unfortunately with the amount of mimetypes, browsers, platforms, rates, etc., it's not well suited to write a function which will return the mimetype chosen with the number of combinations available: video/webm; codecs="vp", video/mp4; codecs="avc1.4d4015", etc.

The original idea might have been to hide all these details from the user but indeed, your specific case where the user need to know the mimetype in order for example to save the generated file is something that comes up very often.

An issue is currently opened with a proposition to provide a way to get all supported media types ordered by weak preferences, which means that the first media type returned would be the default one chosen by the UA if not provided.

The issue was created in May but no actual follow-up at the moment.



回答2:

For audio, the default seems to be audio/ogg, and for video video/ogg. Tested in both Chrome and Firefox with VLC.

Demo: https://codecanister.com/Project/d547eed9/9/result