从MediaRecorder缩放视频

安装程序

我有一个简单的设置如下:

<video src="/myvideo.mp4" id="my-vid" preload></video>
<script>
    var chunks = [];
    var vid = document.getElementById("my-vid");
    vid.onloadeddata = function() {
        var mr = new MediaRecorder(vid.captureStream(), {
            mimeType: "video/webm; codecs=opus,vp8"
        });
        mr.ondataavailable = function(e) {
            chunks.push(e.data);
        }
        mr.start();
        vid.play();
        vid.muted = false;
    }
    // ----
    // everything below here just downloads the file so I can
    // run it though ffprobe
    // ----
    vid.onended = function() {
        setTimeout(function(){
            var blob = new Blob(chunks, {type: "video/webm; codecs=opus,vp8"});
            var link = document.createElement("a");
            document.body.appendChild(link);
            link.style = "display: none;";
            var url = URL.createObjectURL(blob);
            link.href = url;
            link.download = "content.webm";
            link.click();
            URL.revokeObjectURL(url);
            document.body.removeChild(link);
        }, 1000);
    }
</script>

我的视频是640像素乘以360像素。

我想要什么

我想要的是将输出的视频放大到1920×1080(是的,我意识到它会变得又大又丑——没关系我只需要分辨率来匹配第二个视频,这样两个视频就可以更容易地缝合在一起)

我试过的

简单地改变 <video> 标记无效:

<video src="/myvideo.mp4" id="my-vid" preload height="1080" width="1920"></video>

这改变了 显示 大小,但不是 解码的 大小(因此MediaRecorder仍然返回640x360视频)

我可以使用 <canvas> 这样的元素:

<script>
    // ...
    vid.onplay = function() {
        var canvas = document.createElement("canvas");
        var ctx = canvas.getContext("2d");
        (function loop() {
            ctx.drawImage(vid, 0, 0, vid.videoWidth, vid.videoHeight, 0, 0, 1920, 1080);
            setTimeout(loop, 1000 / 30); // 30 fps
        })();
    }
</script>

如果我用 mr = new MediaRecorder(canvas) 而不是 mr = new MediaRecorder(vid) 然后我得到一个缩放的视频,但没有音频!