Как редактировать видео в браузере? - PullRequest
Новая
       56

Как редактировать видео в браузере?

0 голосов
/ 22 января 2020

У меня есть медиа-объект массива. Каждый элемент массива имеет время начала / конца. Можно ли в браузере обрезать буфер каждого файла, а затем объединить его в один?
Для аудиофайлов я решил проблему следующим образом: https://pastebin.com/UdyHC4R4
Но я все еще Не удалось решить проблему обрезки каждого видеофайла.
Чтобы объединить все видеофайлы, я использую следующий код: 

(async () => {

    const mediaSource = new MediaSource();

    const video = document.getElementById('test-video');

    const urls = [
        {
            url: 'http://test.local:81/video/1.webm',
            start: 43,
            end: 61
        },
        {
            url: 'http://test.local:81/video/2.webm',
            start: 0,
            end: 12
        }
    ];

    const request = url => fetch(url.url).then(response => response.arrayBuffer());

    const files = await Promise.all(urls.map(request));
    console.log(files);
    const mimeCodec = 'video/webm; codecs="vorbis,vp8"';

    const media = await Promise.all(files.map(file => {
        return new Promise(resolve => {
            let media = document.createElement("video");
            let blobURL = URL.createObjectURL(new Blob([file]));
            media.onloadedmetadata = async e => {
                resolve({
                    mediaDuration: media.duration,
                    mediaBuffer: file
                })
            }
            media.src = blobURL;
        })
    }));

    console.log(media);

    mediaSource.addEventListener("sourceopen", sourceOpen);

    video.src = URL.createObjectURL(mediaSource);

    async function sourceOpen(event) {

        if (MediaSource.isTypeSupported(mimeCodec)) {
            const sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);

            for (let chunk of media) {
                await new Promise(resolve => {
                    sourceBuffer.appendBuffer(chunk.mediaBuffer);
                    console.log(chunk.mediaBuffer);
                    sourceBuffer.onupdateend = e => {
                        sourceBuffer.onupdateend = null;
                        sourceBuffer.timestampOffset += chunk.mediaDuration;
                        resolve()
                    }
                })

            }

            mediaSource.endOfStream();

        }
        else {
            console.warn(mimeCodec + " not supported");
        }
    };

})()

Как обрезать каждый видеофайл в браузере?

...