Detecting a video's codec in JavaScript

Question

I'm working on desktop app based on Electron (i.e. Node.js and a Chrome browser shell crammed together), and one of its features will include loading arbitrary video files from the local filesystem.

A challenge I'm facing is that I won't know the codec used by the arbitrary video files. I can filter by file extension (i.e. .mp4, .webm, etc)... but MP4 files can use numerous codecs, which aren't obvious from the file extension. I don't really know that a video file is unsupported until the HTML5 video player comes up blank (and I'm not even sure how to programmatically detect when THIS happens).

I'm already using a loadedmetadata event handler to detect the video's dimensions, but it doesn't seem to expose information about the underlying codec.

Is there any way around this? I'm looking for Node.js packages that can identify codecs in the native "main" process, rather than letting the Chrome "renderer" process try detecting it at the browser level. However, all of the Node.js video packages that I'm seen rely on ffmpeg executables, which I can't easily bundle with my Electron app.

There are a million code samples for detecting which codecs your browser supports. But that's coming from the assumption that you're dealing with a known video file and an unknown browser. What about the reverse... when you have a guaranteed known browser, but an unknown video file?

Answer 1

You can use mux.js to inspect the MP4 atoms inside the file. You'll need to load the file into a UInt8Array, then call muxjs.mp4.tools.inspect(bytes) to get a list of parsed atoms.