使用MediaStream Recording API录制canvas视频：下载的webm无内容无法播放

尝试通过MediaStream Recording API实现canvas元素的视频录制与下载功能，测试代码如下：

<!DOCTYPE html>
<html>
<body>
    <h1>Lets test mediaRecorder</h1>
    <canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
        Your browser does not support the HTML canvas tag.
    </canvas>
    <script>
        var c = document.getElementById("myCanvas");
        var ctx = c.getContext("2d");
        ctx.font = "30px Arial";
        ctx.fillText("Hello World", 10, 50);

        const stream = c.captureStream(25);
        var recordedChunks = [];
        console.log(stream);
        var options = { mimeType: "video/webm; codecs=vp9" };
        mediaRecorder = new MediaRecorder(stream, options);

        mediaRecorder.ondataavailable = handleDataAvailable;
        mediaRecorder.start();

        function handleDataAvailable(event) {
            console.log("data-available");
            if (event.data.size > 0) {
                recordedChunks.push(event.data);
                console.log(recordedChunks);
                download();
            } else {
                // ...
            }
        }

        function download() {
            var blob = new Blob(recordedChunks, {
                type: "video/webm"
            });
            var url = URL.createObjectURL(blob);
            var a = document.createElement("a");
            document.body.appendChild(a);
            a.style = "display: none";
            a.href = url;
            a.download = "test.webm";
            a.click();
            window.URL.revokeObjectURL(url);
        }

        // demo: to download after 10 sec
        setTimeout(event => {
            console.log("stopping");
            mediaRecorder.stop();
        }, 10000);
    </script>
</body>
</html>

当前代码运行表现：

• 代码无报错，可正常执行全流程
• 能够顺利触发test.webm文件的下载
• 播放异常：使用VLC Media Player打开下载的webm文件时，无任何可见内容，初步判断录制的视频未携带有效画面数据
• 待定位问题：不清楚需要补充哪些逻辑，才能让录制生成的视频可正常播放。

内容的提问来源于stack exchange，提问作者Alok