生成的 WebM 视频无法在某些设备/浏览器上播放

问题描述

我正在尝试从节点画布内的多个帧生成 WEBM 视频。

const canvas = require('canvas');
const sharp = require('sharp');
const WebMWriter = require("webm-writer");
const fs = require('fs');
async function generate(){
    var cnv = canvas.createCanvas(500,500);
    var c = cnv.getContext('2d');

    let frames = [];
    for(let i = 0; i < 10; i++){
        c.clearRect(0,500,500);
        c.fillStyle="#FF0000";
        c.fillRect(Math.random()*500,Math.random()*500,50,50);
        let frame = await sharp(cnv.toBuffer()).webp({force:true}).toBuffer();
        frames.push(`data:image/webp;base64,${frame.toString('base64')}`);
    }
    
    let writer = new WebMWriter({
        quality:0.99,frameDuration:200,transparent:false
    })

    for(let frame of frames) writer.addFrame(frame);

    let blob = await writer.complete(); // returns a Node v15.7.0 Blob instance
    let arrayBuffer = await blob.arrayBuffer();
    let buf = new Buffer.from(arrayBuffer);
    fs.writeFile("test.webm",buf,'base64',()=>{
        console.log("File saved.");
    });
}
generate();

上面的代码在屏幕周围创建了一个随机矩形的短视频。但是，生成的 webm 文件不能在 Windows 媒体播放器中播放，也不能在使用移动设备时在 discord 中播放。我相信这是由缓冲区和 blob 转换以及缓冲区丢失其“mime 类型”引起的。

是否有任何解决方法可以让它在任何地方都能播放？

编辑 1：从阅读 this question 开始，我尝试在生成的视频上使用 ffmpeg 并且它有效，但是我不想使用它，因为它会增加执行时间的额外延迟.

ffmpeg -i test.webm -qscale 0 test_altered.webm

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

node-canvas webm webm