Browser support

Browser support

If you want to check the current browser support for this library, follow the instructions below to generate a report like this:

╔═══════════════════╤═══════════════╤═══════════════╗
║ Browser           │ getUserMedia  │ MediaRecorder ║
╟───────────────────┼───────────────┼───────────────╢
║ Chrome Desktop    │ ✔ (since v53) │ ✔ (since v49) ║
╟───────────────────┼───────────────┼───────────────╢
║ Android Chrome    │ ✔ (since v67) │ ✔ (since v67) ║
╟───────────────────┼───────────────┼───────────────╢
║ Firefox Desktop   │ ✔ (since v36) │ ✔ (since v29) ║
╟───────────────────┼───────────────┼───────────────╢
║ Android Firefox   │ ✔ (since v60) │ ✖             ║
╟───────────────────┼───────────────┼───────────────╢
║ Edge              │ ✔ (since v12) │ ✖             ║
╟───────────────────┼───────────────┼───────────────╢
║ Internet Explorer │ ✖             │ ✖             ║
╟───────────────────┼───────────────┼───────────────╢
║ iOS Safari        │ ✔ (since v11) │ ✖             ║
╟───────────────────┼───────────────┼───────────────╢
║ Safari Desktop    │ ✔ (since v11) │ ✖             ║
╟───────────────────┼───────────────┼───────────────╢
║ Opera Mobile      │ ✔ (since v46) │ ✖             ║
╟───────────────────┼───────────────┼───────────────╢
║ Opera Desktop     │ ✔ (since v40) │ ✔ (since v36) ║
╚═══════════════════╧═══════════════╧═══════════════╝

The report is generated using data pulled from https://caniuse.com.

Installation

Clone the videojs-record repository and install the dependencies with npm.

Next, install some additional packages:

npm install caniuse-api table log-symbols

Usage

Now copy the script below into a new file, e.g. browser-support.js and run it to generate the report:

node browser-support.js

Script

const table = require('table');
const caniuse = require('caniuse-api');
const logSymbols = require('log-symbols');

// query caniuse for supported API's
let mediaRecorder_support = caniuse.getSupport('mediarecorder');
let getUserMedia_support = caniuse.getSupport('stream');

// table headers
let data = [['Browser', 'getUserMedia', 'MediaRecorder']];

// browser mapping
let browsers = {
    'chrome': 'Chrome Desktop',
    'and_chr': 'Android Chrome',
    'firefox': 'Firefox Desktop',
    'and_ff': 'Android Firefox',
    'edge': 'Edge',
    'ie': 'Internet Explorer',
    'ios_saf': 'iOS Safari',
    'safari': 'Safari Desktop',
    'op_mob': 'Opera Mobile',
    'opera': 'Opera Desktop'
};

function checkSupport(target) {
    if (target.y) {
        return logSymbols.success + ' (since v' + target.y + ')';
    } else if (target.n) {
        return logSymbols.error;
    }
}

let keys = Object.keys(browsers);
let index, browserId, browserName, mrSupport, gumSupport;
for (index=0; index < keys.length; index++) {
    browserId = keys[index];
    browserName = browsers[browserId];
    mrSupport = checkSupport(mediaRecorder_support[browserId]);
    gumSupport = checkSupport(getUserMedia_support[browserId]);

    data.push([browserName, gumSupport, mrSupport]);
};

// render table
let output = table.table(data);
console.log(output);