Is there a way to get the frame width and frame height properties of a webm via javascript?

Question

Here are the properties I'm trying to access:

I've looked at mediainfo.js (https://github.com/buzz/mediainfo.js?files=1) and honestly I'm not able to figure it out.

I've also seen people mention that it's possible to use 'media info' (https://mediaarea.net/en/MediaInfo) CLI to accomplish this but I can't find any instruction on how to accomplish this.

I've also tried utilising wmic like so:

var exec = require('child_process').exec
exec('wmic datafile where name="C:\\\\some_path\\\\MyTestCourse\\\\test_conversion\\\\testProject001\\\\videos\\\\video0.webm" get NaturalVideoWidth ', function(err, stdout, stderr){
        if(!err){
            console.log(stdout)
        };
    });

but I don't think it can access what I'm looking for.

I need to be able to run this in a terminal as part of a batch conversion of videos I'm doing. I'm using nodejs and a batch file to accomplish this.

I'd greatly appreciate any insight or advice.

mediainfo.js looks promising. What part did you not figure out? Have you read the [src/cli.ts](https://github.com/buzz/mediainfo.js/blob/master/src/cli.ts) for usage example? — hackape, Apr 15 '21 at 01:40
I have looked at all of the examples. I've tried running npm install mediainfo.js but while I understand the content of the example files and what each part is doing I dont understand how it all fits together or how to fit it into my existing project. It's an issue I have with packages in general I think. I'm pretty much vanilla javascript mostly. Do you know of any tutorials or resources that would help me implement it? — EdelweissPirate, Apr 15 '21 at 13:06
It's a wasm module, so there's async call all over the place. But IO is async in node.js too. I suppose you know how to use async function, right? Anyway, I've post the example, have retrieved `Width` and `Height`, I'll leave the rest to you. — hackape, Apr 15 '21 at 13:50

score 1 · Accepted Answer · answered Apr 15 '21 at 13:46

Here's a working (work on my machine™️) script in Node.js. Hope it helps. I use the test video from https://www.webmfiles.org/demo-files/

const { promises } = require("fs");
const MediaInfoFactory = require("mediainfo.js");

function getReadChunkFunction(fileHandle) {
  async function readChunk(size, offset) {
    const buffer = new Uint8Array(size);
    await fileHandle.read(buffer, 0, size, offset);
    return buffer;
  }

  return readChunk;
}

async function readMetaData(filepath) {
  const mediaInfo = await MediaInfoFactory({ format: "JSON", coverData: true });
  const fileHandle = await promises.open(filepath, "r");
  const fileSize = (await fileHandle.stat()).size;
  const readChunk = getReadChunkFunction(fileHandle);
  const result = await mediaInfo.analyzeData(() => fileSize, readChunk);
  return result;
}

// Usage example:

readMetaData(__dirname + "/big-buck-bunny_trailer.webm").then((result) => {
  const data = JSON.parse(result);
  const videoMetaData = data.media.track.find((item) => item["@type"] === "Video");
  const { Width, Height } = videoMetaData;

  console.log("Width", Width);
  console.log("Height", Height);
});

And the raw output from mediainfo looks like below, expand snippet to inspect.

{
  "media": {
    "@ref": "",
    "track": [
      {
        "@type": "General",
        "UniqueID": "94077224337973666327274415816295077565",
        "VideoCount": "1",
        "AudioCount": "1",
        "Format": "WebM",
        "Format_Version": "1",
        "FileSize": "2165175",
        "Duration": "32.480",
        "OverallBitRate_Mode": "VBR",
        "OverallBitRate": "533294",
        "FrameRate": "25.000",
        "FrameCount": "812",
        "StreamSize": "121714",
        "IsStreamable": "Yes",
        "Encoded_Date": "UTC 2010-05-20 08:21:12",
        "Encoded_Application": "Sorenson Squeeze",
        "Encoded_Library": "http://sourceforge.net/projects/yamka"
      },
      {
        "@type": "Video",
        "StreamOrder": "0",
        "ID": "1",
        "UniqueID": "38308775201223106",
        "Format": "VP8",
        "CodecID": "V_VP8",
        "Duration": "32.480",
        "BitRate": "439316",
        "Width": "640",
        "Height": "360",
        "PixelAspectRatio": "1.000",
        "DisplayAspectRatio": "1.778",
        "FrameRate_Mode": "CFR",
        "FrameRate": "25.000",
        "FrameCount": "812",
        "Compression_Mode": "Lossy",
        "Delay": "0.000",
        "StreamSize": "1783621",
        "Language": "en",
        "Default": "Yes",
        "Forced": "No"
      },
      {
        "@type": "Audio",
        "StreamOrder": "1",
        "ID": "2",
        "UniqueID": "110618262945856186",
        "Format": "Vorbis",
        "Format_Settings_Floor": "1",
        "CodecID": "A_VORBIS",
        "Duration": "32.480",
        "BitRate_Mode": "VBR",
        "BitRate": "64000",
        "Channels": "1",
        "SamplingRate": "44100",
        "SamplingCount": "1432368",
        "Compression_Mode": "Lossy",
        "Delay": "0.000",
        "Delay_Source": "Container",
        "StreamSize": "259840",
        "StreamSize_Proportion": "0.12001",
        "Encoded_Library": "Xiph.Org libVorbis I 20100325 (Everywhere)",
        "Encoded_Library_Name": "libVorbis",
        "Encoded_Library_Version": "(Everywhere)",
        "Encoded_Library_Date": "20100325 (Everywhere)",
        "Language": "en",
        "Default": "Yes",
        "Forced": "No"
      }
    ]
  }
}

Is there a way to get the frame width and frame height properties of a webm via javascript?

1 Answers1