Skip to content
Thijs Triemstra edited this page Oct 29, 2018 · 15 revisions

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 │ WebAudio ║
╟─────────────────┼──────────────┼───────────────┼──────────╢
║ Chrome Desktop  │ ✔            │ ✔             │ ✔        ║
╟─────────────────┼──────────────┼───────────────┼──────────╢
║ Android Chrome  │ ✔            │ ✔             │ ✔        ║
╟─────────────────┼──────────────┼───────────────┼──────────╢
║ Firefox Desktop │ ✔            │ ✔             │ ✔        ║
╟─────────────────┼──────────────┼───────────────┼──────────╢
║ Android Firefox │ ✔            │ ✖             │ ✔        ║
╟─────────────────┼──────────────┼───────────────┼──────────╢
║ Edge            │ ✔            │ ✖             │ ✔        ║
╟─────────────────┼──────────────┼───────────────┼──────────╢
║ iOS Safari      │ ✔            │ ✖             │ ✔        ║
╟─────────────────┼──────────────┼───────────────┼──────────╢
║ Safari Desktop  │ ✔            │ ✖             │ ✔        ║
╟─────────────────┼──────────────┼───────────────┼──────────╢
║ Opera Mobile    │ ✔            │ ✖             │ ✔        ║
╟─────────────────┼──────────────┼───────────────┼──────────╢
║ Opera Desktop   │ ✔            │ ✔             │ ✔        ║
╚═════════════════╧══════════════╧═══════════════╧══════════╝

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

Installation

Install the dependencies with npm:

npm install caniuse-api table log-symbols

Usage

Now copy the script below into a new file, e.g. browser-support.js and run that file with node.js to generate and display the report in the console:

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');
let webAudio_support = caniuse.getSupport('audio-api');

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

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

function checkSupport(target) {
    if (target.y) {
        return logSymbols.success;
    } 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]);
    waSupport = checkSupport(webAudio_support[browserId]);

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

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

Clone this wiki locally