TypeScript VideoEncoderでwebmファイルの作成　Step（１コマずつ）録画

MediaRecorderでのリアルタイム録画ではなく、キャンバスに描画した画像を１コマずつ録画する方法です。そのためには、動画エンコードとwebmの作成が必要になります。エンコードはAPIのVideoEncoder、webmは仕様書を見て自作しました。ソースコードは白紙から作成しています。

こいつを見てくれ

白い四角形が移動するだけの動画です。ダウンロードして見てください。

video.webm

26.8 KB

ファイルダウンロードについて

ダウンロード

MediaRecorderと違って処理落ちてもコマ落ちしません
そしてシーク可能！！（苦労しました）
動作確認
Windows10/11 :  Edge / メディアプレーヤー

ソースコード

キャンバスに簡単なアニメーションを表示して、それを１コマずつ録画、webmファイルを生成するプログラムです。生成したwebmファイルをvideoタグで再生、アンカーでDownload可能に。

import { EncodeVideo } from "./encode.js";
import { WebmBuilder } from "./webm.js";

export async function main(){
    let canvas = document.getElementById("canvas");
    if(!(canvas instanceof HTMLCanvasElement))throw canvas;
    let ctx = canvas.getContext("2d");
    if(!(ctx instanceof CanvasRenderingContext2D))throw ctx;

    let video = document.getElementById("video");
    if(!(video instanceof HTMLVideoElement))throw video;
    let anchor = document.getElementById("download");
    if(!(anchor instanceof HTMLAnchorElement))throw anchor;

    let width = 1280;
    let height = 720;
    let fps = 30;
    canvas.width = width;
    canvas.height = height;

    let vconfig = {
        codec: "vp09.00.10.08",//prof0 lv1.0 8bit
        // codec: "vp8",
        width: width,
        height: height,
        bitrate: 5_000_000, //bps
        framerate: fps,
    };
    let encoder = new EncodeVideo();
    encoder.configure(vconfig);

    let builder = new WebmBuilder({
        codec : vconfig.codec,
        width,
        height,
    });

    // キャンバス描画＆エンコード
    for(let i=0;i<=60;++i){
        ctx.clearRect(0,0,width,height);
        ctx.fillStyle = "white";
        ctx.fillRect(i/60*width,height/2 - 50*Math.sin(i/60*Math.PI*4),100,100);
        let timeUS = Math.floor(i*1_000_000/fps);
        let chunk = await encoder.encode(timeUS, canvas, (i%15)==0);//keyframe
        if(chunk){
            builder.pushVideoFrame(chunk);
        }
    }

    // webmファイル作成
    let abuffs = builder.build();
    video.src = URL.createObjectURL(new Blob(abuffs, {type:"video/webm"}));
    anchor.href = video.src;
    //console.log(abuffs);
}

実行画面　Edge

ソースコード（実装・有料）

TypeScriptのプロジェクト一式です。
src/フォルダにtsファイル
dist/フォルダにコンパイル済みのjsファイルとhtmlファイル
zipファイルでの配布です。

TypeScriptのプロジェクト

---

動作確認
Windows10/11 :  Edge / メディアプレーヤー
API：VideoEncoder
Codec：VP9 (EdgeのVideoEncoder対応形式)

ダウンロード