Filename extension is .x-matroska instead of .mkv

[malthejorgensen]

Description

It seems that Chrome 81 has started reporting the mimetype of recorded videos as video/x-matroska instead of the previous video/webm. This breaks the filename-generation code in videojs-record:

videojs-record/src/js/utils/file-util.js

Line 90 in 1130ed4

let fileExtension = '.' + fileObj.type.split('/')[1];

The file extension becomes x-matroska which can't be played.

This only happens on macOS – Windows is not affected.

Steps to reproduce

Record a video with videojs-record. Get video blob with .convertedData -- use .convertedData.name to save file.

JSBin example based off examples/video-only.html:
https://output.jsbin.com/bobexem (source)

Results

Expected

.recordedData.name to be 945380622933178.mkv or 945380622933178.webm

Actual

.recordedData.name is 945380622933178.x-matroska

Error output

No errors.

Additional Information

versions

videojs

3.11.0 (latest, but most likely all previous versions are affected too)

browsers

Chrome 81

OSes

macOS 10.15 (Catalina) down to macOS 10.9 (Yosemite).

Windows 10 is not affected.

[pwob]

This is not actually a bug as stated here https://bugs.chromium.org/p/chromium/issues/detail?id=1070856#c4

This happened because according to this table video/webm;codecs=h264 is not really supported in Chrome.

To overcome this issue you should explicitly set video/webm;codecs=vp8,opus as codec,audio mimetype.

[malthejorgensen]

That makes sense – but wouldn’t you say the file extension generated by videojs-record is still wrong?

[theandrein]

This is not actually a bug as stated here https://bugs.chromium.org/p/chromium/issues/detail?id=1070856#c4

This happened because according to this table video/webm;codecs=h264 is not really supported in Chrome.

To overcome this issue you should explicitly set video/webm;codecs=vp8,opus as codec,audio mimetype.

where can I set this? video/webm;codecs=vp8,opus

thank you very much!

[dankleying]

I followed pwob's suggestion and I wanna leave a note for those uploading videos to S3 using a signedurl. Set the codec as video/webm;codecs=vp8,opus will add ;codecs=vp8,opus to the file type. Make sure in your signing api append codecs=vp8,opus to your content-type otherwise you get a 403 forbidden error.

[thijstriemstra]

That makes sense – but wouldn’t you say the file extension generated by videojs-record is still wrong?

Agreed.

[thijstriemstra]

where can I set this? video/webm;codecs=vp8,opus

@theandrein use the videoMimeType videojs-record option.

[thijstriemstra]

I haven't been able to reproduce this with the audio+video example on Ubuntu 18 with Chrome 81 or 83..

it's still producing vp8/opus afaik with a default videoMimeType of 'video/webm':

Blob {lastModified: 1589845242453, lastModifiedDate: Tue May 19 2020 01:40:42 GMT+0200 (Central European Summer Time), name: "1589845242453.webm", size: 800714, type: "video/webm;codecs=vp8,opus"}

This only happens on macOS – Windows is not affected.

According to #475 it's now also happening on Windows..

[thijstriemstra]

Including some sort of registry in videojs-record doesn't sound like a horrible idea; there are only a couple of supported recorder mime types and it hardly ever changes.

something like this:

/**
 * Mimetypes
 *
 * @enum
 */
const Mimetypes = {
    'video/ogg': 'opus',
    'video/ogg': 'ogv',
    'video/mp4': 'mp4',
    'video/x-matroska': 'mkv',
    'video/webm': 'webm',
    'audio/mp4': 'm4a',
    'audio/mpeg': 'mp3',
    'audio/aac': 'aac',
    'audio/x-caf': 'caf',
    'audio/flac': 'flac',
    'audio/ogg': 'oga',
    'audio/wav': 'wav',
    'audio/webm': 'webm',
    'application/x-mpegURL': 'm3u8',
    'image/jpeg': 'jpg',
    'image/gif': 'gif',
    'image/png': 'png',
    'image/svg+xml': 'svg',
    'image/webp':'webp'
};

const EXTRACT_TYPE_REGEXP = /^\s*([^;\s]*)(?:;|\s|$)/

var recorder_mime_types = [
    "video/x-matroska;codecs=avc1,opus",
    "video/webm;codecs=vp8",
    "video/webm;codecs=vp9",
    "video/webm;codecs=H264",
    "video/webm;codecs=vp8,opus",
    "audio/ogg",
    "audio/wav"
];

recorder_mime_types.forEach(mtype => {
    var match = EXTRACT_TYPE_REGEXP.exec(mtype);
    var result = match && match[1].toLowerCase();
    var extension = Mimetypes[result];

    console.log(`${mtype}: ${result} (.${extension})`);
});

produces:

video/x-matroska;codecs=avc1,opus: video/x-matroska (.mkv)
video/webm;codecs=vp8: video/webm (.webm)
video/webm;codecs=vp9: video/webm (.webm)
video/webm;codecs=H264: video/webm (.webm)
video/webm;codecs=vp8,opus: video/webm (.webm)
audio/ogg: audio/ogg (.oga)
audio/wav: audio/wav (.wav)

so video/x-matroska;codecs=avc1,opus would export as an .mkv file starting from videojs-record v4.0.0.

I suppose the current default videoMimeType of 'video/webm' doesn't make much sense and should be something supported by all media recorder browsers/implementations: video/webm;codecs=vp8?

[thijstriemstra]

If you want a fix for this now, try pull request #474. Or wait until v4.0.0 is released.