Масштабирование видео из MediaRecorder - PullRequest
Новая
       8

Масштабирование видео из MediaRecorder

0 голосов
/ 05 июня 2018

Настройка

У меня есть простая настройка, например, так: 

<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), тогда я получу масштабированное видео, но нет звука!

...