Как преобразовать процесс рисования Canvas в видео

внешний интерфейс

Если мы используем Canvas для достижения некоторых анимационных эффектов, нам нужно воспроизвести его. Многие люди обычно используют инструменты записи экрана для записи и воспроизведения содержимого экрана. Мало кто знает, что Canvas может напрямую поддерживаться современными браузерами.Media Streams APIконвертировать в видео.

Объект Canvas поддерживает метод captureStream, который возвращает объект MediaStream. Затем мы можем создать MediaRecorder через этот объект для записи экрана.

Давайте рассмотрим простой пример.

запись видео

Сначала мы пишем очень простой эффект анимации Canvas, код выглядит следующим образом:

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
const {width, height} = canvas;

ctx.fillStyle = 'red';

function draw(rotation = 0) {
  ctx.clearRect(0, 0, 1000, 1000);
  ctx.save();
  ctx.translate(width / 2, height / 2);
  ctx.rotate(rotation);
  ctx.translate(-width / 2, -height / 2);
  ctx.beginPath();
  ctx.rect(200, 200, 200, 200);
  ctx.fill();
  ctx.restore();
}

function update(t) {
  draw(t / 500);
  requestAnimationFrame(update);
}
update(0);

Этот эффект реализует прямоугольник шириной и высотой 200, вращающийся вокруг центра холста.

Далее мы записываем этот эффект, предполагая, что мы записываем 6-секундное видео, сначала нам нужно получить объект MediaStream:

const stream = canvas.captureStream();

Затем мы создаем MediaRecorder:

const recorder = new MediaRecorder(stream, { mimeType: 'video/webm' });

Затем мы можем зарегистрироваться для события ondataavailable для записи данных:

const data = [];
recorder.ondataavailable = function (event) {
  if (event.data && event.data.size) {
    data.push(event.data);
  }
};

В событии onstop мы записываем данные в тег видео на странице через объект Blob.

recorder.onstop = () => {
  const url = URL.createObjectURL(new Blob(data, { type: 'video/webm' }));
  document.querySelector("#videoContainer").style.display = "block";
  document.querySelector("video").src = url;
};

Если вы не знаете объекты Blob, вы можете увидетьэта статья.

Наконец, мы начинаем записывать видео и устанавливаем его остановку через 6 секунд:

recorder.start();

setTimeout(() => {
  recorder.stop();
}, 6000);

Таким образом, мы можем добиться желаемого эффекта записи экрана.

полный кодэто здесь.

Объединить со звуком

Видео, записанное Canvas, также можно комбинировать со звуком, синтезируя его через веб-сторону ffmpeg.

Браузеры могут интегрировать ffmpeg через WebAssembly, конкретный проект находится в разработке.здесь

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

Добро пожаловать в "Byte Front End ByteFE"

Контактный адрес электронной почты для доставки резюме "tech@bytedance.com"

Категории