Web API: MediaStream Recording API

Canvas

Canvasで使う場合、 HTMLCanvasElement.captureStream() 🔗 を組み合わせる

code:js

const stream = canvas.captureStream( 60 ); // 60 FPS

const recorder = new MediaRecorder( stream, {

mimeType: 'video/webm; codecs=vp9',

videoBitsPerSecond: 6_000_000,

} );

recorder.addEventListener( 'dataavailable', ( event ) => {

if ( event.data.size > 0 ) {

const blob = new Blob( event.data , { type: 'video/webm' } );

saveBlob( blob, 'capture.webm' );

}

} );

recorder.start();

// later

recorder.stop();

saveBlob の実装 → Web API: Save Blob

なんかFPSがコンスタントに23.976だったり、画質が悪かったりして、あんまり使えない

大人しくOBSとかMirillis Action!とかでキャプチャしたほうが良さそう