libmpv-wasm: mpv for WASM

This project is a port of mpv into WebAssembly to run completely in the browser.

The goal was to bring mpv into the browser, allowing for the expansion of audio/video codecs supported, as well as various container and subtitle formats.

Building upon the TypeScript API in conjunction with the React demo, there is hope to bring more functionality from mpv to the web, such as shaders and web streaming.

Requirements

Requires mpv-build, which was forked and now implements build scripts for all dependencies needed by mpv into WebAssembly.

Our build script also uses Emscripten and CMake.

Build

To build locally (requires mpv-build, CMake, and Emscripten):

npm install
npm run build

To build using Docker, just set the DOCKER_BUILD variable:

npm install
DOCKER_BUILD=1 npm run build

Usage

The MpvPlayer class is initialized through the asynchronous load method, which takes in the canvas element to be drawn on, the network path to libmpv.js, and an optional callback object. This object (called ProxyOptions) feeds callbacks to almost every property of MpvPlayer that listens for any changes to those properties. For example:

const canvas = document.getElementById('canvas');
const logChange = (v, k) => console.log(`Property ${k} has been changed to ${v}.`);

const mpvPlayer = await MpvPlayer.load(canvas, '/static/js/libmpv.js', {
    idle: () => console.log('Player is now idle.'),
    duration: logChange,
    elapsed: logChange,
    videoStream: logChange,
    audioStream: logChange,
    audioTracks: trackInfo => console.log('Audio track info:', trackInfo),
    subtitleStream: logChange,
    currentChapter: logChange,
});

Demos

The main React demo is hosted on Vercel. To run the demo locally, build libmpv-wasm first as shown above, then run npm run dev:demo. To run the vanilla demo, build libmpv-wasm first as shown above, then run npm run dev:demo-vanilla.

Roadmap

• Integrate OpenSSL and allow loading URLs
• Implement OPFS filesystem browser (possible separate project)
• Find way to lift 4GB limit on file loading
• Allow users to upload shaders
• Allow users to upload keybindings
• ALlow users to upload configs