Question

设置

我有一个简单的设置：

<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)，那么我会收到一个缩放视频，但没有音频！

从MediaRecorder缩放视频

设置

我想要什么

我尝试了什么

0 个答案: