Javascript Рисуйте на холсте, объединяйте его с видео и сохраняйте вместе

Question

У меня есть приложение, которое позволяет рисовать на холсте свободной ручной росписью.И за краской играет видео.Есть ли способ сохранить видео с данными рисования в виде видеофайла?

Спасибо

Answer 1

Насколько я знаю, нет стандартного API для экспорта данных холста в видеофайл.Однако есть несколько библиотек, которые делают это. Этот вопрос объясняет некоторые возможные способы сделать это.

Чтобы объединить видео и пользовательский ввод, вам нужно будет использовать экранный холст:

var canvas = document.createElement("canvas");
canvas.width = inputCanvasElement.width;
canvas.height = inputCanvasElement.height;
var context = canvas.getContext("2d");

context.drawImage(videoElement,0,0);
context.drawImage(inputCanvasElement,0,0);

При этом видео и содержимое холста будут отображаться на одном холсте, который затем может быть сохранен в видео с использованием некоторой библиотеки.

Однако учтите, что, поскольку все это выполняется в браузере (объединениехолст и видео, а также кодирование видео), это, вероятно, будет слишком медленно, чтобы делать это в реальном времени на высокой частоте кадров.