Video upload dimensions null x null

[beau-house]

Bug report

Required System information

• Node.js version: 16.16.0
• NPM version: 8.11.0
• Strapi version: 4.5.6
• Database: PostgresSQL 15
• Operating system: Mac OS Ventura 13.1

Describe the bug

Video files uploaded to the media library do not include dimensions. Data is not shown in the admin ui, or returned via api query.

Steps to reproduce the behavior

1. Upload a video file
2. Open file details
3. No dimensions shown

Expected behavior

Dimensions should be shown in the admin ui. Querying dimensions via api should return a non null value.

Screenshots

Media library info does not include dimensions

Confirmed uploads include dimensions metadata

[strapi-bot]

This issue has been mentioned on Strapi Community Forum. There might be relevant details there:

https://forum.strapi.io/t/media-library-video-dimensions-missing/25058/3

[dogusdeniz]

I think we not need ffmpeg package

const fs = require('fs');

// Video Path
const filePath = 'path/to/your/video/file.mp4';

// Read file
const buffer = fs.readFileSync(filePath);

// first 64 byte
const resolutionBytes = buffer.slice(0, 64);

// Read with
const width = resolutionBytes.readUInt8(0);

// Read height
const height = resolutionBytes.readUInt8(1);

console.log(`Resolution: ${width} x ${height}`);

[raph941]

@derrickmehaffy
After looking at this to review probable solutions, I see we could use either the ffmpeg to extract video dimension on the server, in a similar fashion as we currently use sharp to extract image dimensions.
Alternatively, we could pass the dimension property as part of the API payload and save it in the db as one of the asset properties.
WDYT about these options or perhaps there are other better-suited alternatives?

[blakerutledge]

any update on this? I need video dimension validation, and am currently doing some janky things to make this work. Would love to see a real ffmpeg integration exposing this metadata!

[Marc-Roig]

Hello, we are looking into a reliable solution for this issue. We can not require the ffmpeg dependency for everyone as it is not only a npm dependency but it requires you to install ffmpeg in your machine.

We are in the process of refactoring some parts of the upload plugin, and that refactor will allow a better customization of itself. Meaning we could be creating a plugin to extract metadata or even transform uploaded video files. Unfortunately I don't have a date for this yet.

For now, what could help is find the best and simplest way to get the width and height metadata from a stream of video data. @dogusdeniz while your approach might work for some video file formats, it might not be a reliable solution for all video file formats.

I will try to explore libraries and ways to manage this, but if some of you have the experience and don't mind sharing a snippet, that would be of great value here 🚀

[Marc-Roig]

So far, the easiest way that I found to extract video metadata is to use ffprobe (normally installed alongside ffmpeg), this could work:

import { execFile } from "child_process";

function ffprobe(filePath){
  return new Promise((resolve, reject) => {
    execFile(
      "ffprobe",
      ["-show_streams", "-show_format", "-print_format", "json", filePath],
      (err, stdout) => {
        if (err) {
          reject(err);
        } else {
          resolve(JSON.parse(stdout));
        }
      }
    );
  });
}

We could even use this to get video duration, language, frame rate, codecs...

[dogusdeniz]

I think it would be useful to investigate how ffprobe achieves this without installing a package.

[Marc-Roig]

Understanding ffprobe falls a bit outside the time I can spend on this, but maybe I could try other libraries like https://www.npmjs.com/package/exiftool-vendored . Still so far every dependency I am finding requires some sort of package installation in your machine.

Let me give a bit more time at this, maybe we can find better solutions.