TypeScript VideoEncoderでwebmファイルの作成 Step(1コマずつ)録画
MediaRecorderでのリアルタイム録画ではなく、キャンバスに描画した画像を1コマずつ録画する方法です。そのためには、動画エンコードとwebmの作成が必要になります。エンコードはAPIのVideoEncoder、webmは仕様書を見て自作しました。ソースコードは白紙から作成しています。
こいつを見てくれ
白い四角形が移動するだけの動画です。ダウンロードして見てください。
MediaRecorderと違って処理落ちてもコマ落ちしません
そしてシーク可能!!(苦労しました)
動作確認
Windows10/11 : Edge / メディアプレーヤー
ソースコード
キャンバスに簡単なアニメーションを表示して、それを1コマずつ録画、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);
}
ソースコード(実装・有料)
TypeScriptのプロジェクト一式です。
src/フォルダにtsファイル
dist/フォルダにコンパイル済みのjsファイルとhtmlファイル
zipファイルでの配布です。
動作確認
Windows10/11 : Edge / メディアプレーヤー
API:VideoEncoder
Codec:VP9 (EdgeのVideoEncoder対応形式)
ダウンロード
ここから先は
0字
/
1ファイル
¥ 600
期間限定!Amazon Payで支払うと抽選で
Amazonギフトカード5,000円分が当たる
Amazonギフトカード5,000円分が当たる
この記事が役に立ったという方は、サポートお願いします。今後の製作の励みになります。