Вы должны иметь возможность создавать и редактировать видео, используя только веб-браузер. Должно быть возможно предоставить пользовательский интерфейс, похожий на Screenflow, который позволяет создавать выходное видео, которое объединяет несколько видео, изображений и аудио в одно видео, которое может быть загружено на такие сервисы, как YouTube.

Этот пост - это просто заявление о намерениях. Я собираюсь начать долгий процесс разработки того, что есть и недоступно на платформе, и посмотреть, как далеко мы можем сегодня добраться.

Во время некоторых мыслей по этому проекту у меня был момент Карла Сагана - поэтому вместо того, чтобы изобретать вселенную для создания яблочного пирога, мне нужно, по крайней мере, создать все инструменты, необходимые для создания видеоредактора, особенно если я хочу записать процесс его выполнения. Тот факт, что эта почта существует, состоит в том, что я знаю, что у меня есть некоторые части на месте и готовы к работе.

Я не думаю, что я собираюсь создать один массовый монолитный «видеоредактор», который может быть бизнесом для кого-то другого, но я планирую попробовать все части, которые необходимы, чтобы я мог облегчить создавать отличные видеоролики в Интернете и, надеюсь, показать много людей, что возможно в Интернете.

Ниже приведен мой примерный одностраничный проект:

** Используйте случаи, которые у меня есть: **

• Мне обычно приходится записывать все демонстрации устройств для ввода / вывода Google и Chrome DevSummit и добавлять наложения и т. Д. Все участники команды должны быть в состоянии сделать это.
• Команда часто записывает скринкасты, и я бы хотел, чтобы они быстро сделали это с простого веб-сайта и смогли очистить конечный результат.
• Мне нужно построить некоторые продукты, чтобы они были острыми. ;)

** Входной сигнал: **

• [p0] Запись звука с микрофона
• [p0] Запись видео с веб-камеры [сделано - см. ниже]
• [p0] Встроенные внешние видеоролики, размещенные в Интернете
• [p0] Запись рабочего стола
• [p1] Запись удаленного потока
• [p1] Записать a & lt; canvas & gt; элемент
• [p0] Загрузите файл с локального устройства
• [p1] Поделитесь файлом с локального устройства (намерение поделиться с Android)

** манипуляция: **

• [p1] Добавить водяные знаки
• [p1] Добавить эффекты фильтра к изображению
• [p0] Добавить в пользовательские изображения в виде слоев
• [p0] Очередь видео и наложение
• [p0] Наложение отдельных дорожек аудио и видео
• [p1] Наложение текста в определенное время
• [p0] Обрезать видео до размера
• [p0] Включить позиционирование и изменение размера видео
• [p0] Обрезать видео / аудио
• [p0] Сплит-видео / аудио

Вывод:

• [p0] Видеофайл в формате webm
• [p1] Информация о MTB
• [p1] Видеофайл в формате xyz

Код для этого видео Демо

const init = () => {  
  let blobs;  
  let rec;  
  let stream;  
    
  captureBtn.onclick = async () => {  
    stream = await navigator.mediaDevices.getUserMedia({video: { width: 1280, 
height: 720 }, audio: true});

    videoElement.srcObject = stream;  
    let opts = {mimeType: 'video/webm; codecs=vp9,opus'};  
    blobs = [];  
    download.style.display = 'none'

    rec = new MediaRecorder(stream, opts);  
    rec.ondataavailable = (e) => blobs.push(e.data);  
    rec.onstop = async () => {  
      let blob = new Blob(blobs, {type: 'video/webm'});  
      let url = window.URL.createObjectURL(blob);  
      download.href = url;  
      download.download = 'test.webm';  
      download.style.display = 'block';  
    };  
    startBtn.disabled = false;  
    captureBtn.disabled = true;  
  };

  startBtn.onclick = () => {  
    startBtn.disabled = true;  
    stopBtn.disabled = false;  
    rec.start();  
  };

  stopBtn.onclick = () => {  
    captureBtn.disabled = false;  
    startBtn.disabled = true;  
    stopBtn.disabled = true;

    rec.stop();  
    stream.getTracks().forEach(s=>s.stop())  
    videoElement.srcObject = null  
    stream = null;  
  };  
};

window.addEventListener('load', init);  

Paul Kinlan

Trying to make the web and developers better.