canvasの内容をvideoに描画し保存できるのか

Question

canvasに画像を表示してそれをvideoタグで再生していますが、
この再生されているデータはどのようにしてダウンロードやサーバーへ送信するのですか？
blobに変換してサーバーへ送るのだと思いますが変換可能なのでしょうか
ファイル名をvideo.mp4などにして保存し、再生できるようにしたいです

currentSrc属性を持たないものは不可能なのでしょうか？

<canvas id="canvas" width="640" height="480"></canvas>
<video id="video" width="640" height="480" controls></video>
<script>
const canvas = document.getElementById('canvas');
const video = document.getElementById('video');
const img = new Image();
img.src = 'image.png';
img.onload = function() {
const ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0);
const stream = canvas.captureStream(25);
video.srcObject = stream;
video.play();

let link = document.createElement('a');
link.download = 'video.mp4';
let blob = new Blob([stream], {type: 'video/mp4'});
let reader = new FileReader();
reader.readAsDataURL(blob);
reader.onload = function() {
link.href = reader.result;
link.click();
}
}
</script>

Answer 1

WebCodecs API で可能なようです。

https://developer.chrome.com/articles/webcodecs/
こちらのページに、canvas をエンコードする方法やエンコードしたデータをサーバに POST する例が載っています。