Автоматически превращайте изображения в слайд-шоу с помощью Node.js

Автоматически превращайте изображения в слайд-шоу с помощью Node.js

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

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

Одним из наиболее распространенных эффектов, которые вы можете добавить к слайд-шоу видео, является эффект Кена Бернса — простой, элегантный эффект перехода, который создает иллюзию движения на статических изображениях путем масштабирования и панорамирования изображения.

В этой статье мы рассмотрим основы создания видео слайд-шоу с помощью Node.js, облачного API редактирования видео Shotstack и добавим эффекты, чтобы заинтересовать зрителей.

Предпосылки

API-интерфейс стека

Shotstack.io — это API для редактирования видео, который упрощает программное редактирование и рендеринг нескольких видео в облаке. Поскольку рендеринг видео — это процесс, интенсивно использующий ЦП, мы будем использовать облачную инфраструктуру Shotstack для повышения эффективности. Зарегистрируйтесь для получения бесплатной учетной записи разработчика Shotstack, чтобы начать.

Node.js

Node.js — мощная среда выполнения JavaScript. Мы будем использовать Node.js для этой автоматизации.

Начиная

git clone https://github.com/shotstack/node-demos.git

Установите зависимости, включая Shotstack SDK видеоредактора Node.js:

npm install

Установите ключ API в качестве переменной среды (Linux/Mac):

export SHOTSTACK_KEY=your_key_here

или, если вы используете Windows:

set SHOTSTACK_KEY=your_key_here

Замените your_key_here предоставленным ключом API песочницы, который можно бесплатно использовать для тестирования и разработки.

Создание простого видео слайд-шоу с помощью кода

Мы собираемся создать слайд-шоу ниже, используя Node.js и встроенные функции API редактирования видео.

Сначала откройте файл examples/images.js из демонстрационного проекта. Этот простой скрипт Node.js берет массив изображений, циклически перебирает их для создания видеоклипа и подготавливает полезную нагрузку JSON. Наконец, полезная нагрузка отправляется в Shotstack API для рендеринга.

Мы будем использовать SDK Shotstack Node.js, который поможет нам настроить клиент API и взаимодействовать с функциями API, используя модели, функции получения и установки.

Настроить клиент API

Первые несколько строк настраивают клиент с URL-адресом API и ключом, убедившись, что SHOTSTACK_KEY был правильно установлен на предыдущем шаге.

const Shotstack = require('shotstack-sdk');
const defaultClient = Shotstack.ApiClient.instance;
const DeveloperKey = defaultClient.authentications['DeveloperKey'];
const api = new Shotstack.EditApi();
let apiUrl = 'https://api.shotstack.io/stage';
if (!process.env.SHOTSTACK_KEY) {
    console.log('API Key is required. Set using: export SHOTSTACK_KEY=your_key_here');
    process.exit(1);
}
if (process.env.SHOTSTACK_HOST) {
    apiUrl = process.env.SHOTSTACK_HOST;
}
defaultClient.basePath = apiUrl;
DeveloperKey.apiKey = process.env.SHOTSTACK_KEY;

Определение изображений для слайд-шоу

Нам нужно определить массив изображений для использования в нашем слайд-шоу, изображения должны быть размещены где-то в Интернете и быть доступны через общедоступный или подписанный URL-адрес. Для этого урока мы используем несколько фотографий, загруженных из библиотеки стоковых фотографий Pexels.

Базовая конфигурация

Теперь мы определим пустой держатель массива для наших клипов, в Shotstack клип определяет тип актива, когда он начинает воспроизводиться и как долго он воспроизводится:

let clips = [];

Нам нужно контролировать продолжительность каждого слайда и время его запуска. Мы установим продолжительность по умолчанию на 1,5 секунды.

let start = 0;
const length = 1.5;

Добавление звука в слайд-шоу

Потрясающее слайд-шоу не должно пропускать звуковую дорожку — это может быть музыка, которая вам нравится, какие-то определенные звуки, которые помогают визуальным эффектам, или даже голос за кадром. Мы используем модель Shotstack.Soundtrack из SDK, чтобы установить URL-адрес аудиофайла и эффект громкости fadeInFadeOut.

let soundtrack = new Shotstack.Soundtrack;
soundtrack
    .setSrc('https://s3-ap-southeast-2.amazonaws.com/shotstack-assets/music/gangsta.mp3')
    .setEffect('fadeInFadeOut');

Создание видеоклипов из каждого изображения

Давайте теперь используем наши изображения для создания клипов. Мы будем перебирать массив изображений и создавать клипы, определяя время начала, длину и эффект по умолчанию. Мы используем модель Shotstack.ImageAsset для установки URL-адреса изображения и Shotstack. Модель клипа, чтобы создать свойства воспроизведения клипа и добавить их в наш массив клипов, который мы настроили ранее.

images.forEach((image) => {
    let imageAsset = new Shotstack.ImageAsset;
    imageAsset
        .setSrc(image);
let clip = new Shotstack.Clip;
    clip
        .setAsset(imageAsset)
        .setStart(start)
        .setLength(length)
        .setEffect('zoomIn');
start = start + length;
    clips.push(clip);
});

Каждый слайд начинается сразу после окончания предыдущего. Для первого изображения мы по умолчанию задаем start равным 0, поэтому оно начинает воспроизводиться сразу. Затем мы добавляем длину, которую мы определили как 1,5 секунды, поэтому каждое изображение будет появляться в видео в течение этой продолжительности.

Вот полный список эффектов движения, которые вы можете использовать для улучшения слайд-шоу видео:

• zoomIn — медленное увеличение
• zoomOut — медленное уменьшение
• slideLeft — медленное скольжение (панорамирование) влево
• slideRight — медленное скольжение (панорамирование) вправо
• slideUp — медленное скольжение (панорамирование) вверх
• slideDown — медленное скольжение (панорамирование) вниз

Добавление клипов на временную шкалу

Shotstack API использует временную шкалу, которая похожа на контейнер для нескольких видеоклипов, воспроизводимых с течением времени. Временная шкала содержит дорожки, которые позволяют нам накладывать клипы друг на друга.

В нашем случае только что созданные клипы добавляются на дорожку, а затем мы добавляем дорожку на временную шкалу вместе со звуковой дорожкой. Мы используем Shotstack.Track из SDK и Shotstack.Timeline:

let track = new Shotstack.Track;
track
    .setClips(clips);
let timeline = new Shotstack.Timeline;
timeline
    .setBackground('#000000')
    .setSoundtrack(soundtrack)
    .setTracks([track]);

Настройка вывода видео

Наконец, мы настраиваем формат вывода и добавляем временную шкалу и вывод, чтобы создать редактирование. Снова используя SDK, мы используем Shotstack. Модели Output и Shotstack.Edit.

let output = new Shotstack.Output;
output
    .setFormat('mp4')
    .setResolution('sd')
    .setFps(30);
let edit = new Shotstack.Edit;
edit
    .setTimeline(timeline)
    .setOutput(output);

Отправка редактирования в Shotstack API

Последним шагом в нашем скрипте является отправка данных в API редактирования видео для обработки и рендеринга. SDK Shotstack позаботится о преобразовании наших объектов в JSON, добавлении нашего ключа в заголовок запроса и отправке всего в API.

api.postRender(edit).then((data) => {
    let message = data.response.message;
    let id = data.response.id
console.log(message + '\n');
    console.log('>> Now check the progress of your render by running:');
    console.log('>> node examples/status.js ' + id);
}, (error) => {
    console.error('Request failed: ', error);
    process.exit(1);
});

Запуск скрипта

Для запуска скрипта используйте команду node из корневой папки проекта:

node examples/images.js

Если запрос рендеринга выполнен успешно, API вернет идентификатор рендеринга, который мы можем использовать для получения статуса рендеринга.

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

node examples/status.js {renderId}

Замените {renderId} идентификатором, возвращенным первой командой.

Повторно запускайте сценарий status.js каждые 4–5 секунд, пока либо не будет возвращен URL-адрес видео, либо не появится сообщение об ошибке.

Воссоздание эффекта Кена Бернса с помощью кода

Если вы хотите получить эффект в стиле Кена Бернса со случайными переходами между слайдами, мы можем определить массив для хранения пула эффектов, которые мы хотим использовать, и использовать функцию рандомизатора.

Вы можете добавить приведенный ниже код перед определением константы image:

const effects = ['zoomIn', 'zoomOut', 'slideLeft', 'slideRight', 'slideUp', 'slideDown'];
const getRandomEffect = () => {
    return effects[Math.floor(Math.random() * effects.length)]
}
const images = [
    ...
]

Все, что нам нужно сделать, это заменить эффект zoomIn в коде создания клипа вызовом метода getRandomEffect.

images.forEach((image) => {
    let imageAsset = new Shotstack.ImageAsset;
    imageAsset
        .setSrc(image);
let clip = new Shotstack.Clip;
    clip
        .setAsset(imageAsset)
        .setStart(start)
        .setLength(length)
        .setEffect(getRandomEffect());
start = start + length;
    clips.push(clip);
});

Наше рандомизированное слайд-шоу в стиле Кена Бернса будет выглядеть примерно так, как показано ниже.

Управление эффектом движения для каждого изображения

Если вы хотите иметь больше контроля над каждым из слайдов, вы можете настроить продолжительность и эффект индивидуально при определении константы images и использовании вместо этого массива объектов:

const images = [
    {
        src: 'https://s3-ap-southeast-2.amazonaws.com/shotstack-assets/examples/images/pexels/pexels-photo-712850.jpeg',
        length: 2,
        effect: 'zoomIn'
    },
    {
        src: 'https://s3-ap-southeast-2.amazonaws.com/shotstack-assets/examples/images/pexels/pexels-photo-867452.jpeg',
        length: 5,
        effect: 'slideLeft'
    },
    {
        src: 'https://s3-ap-southeast-2.amazonaws.com/shotstack-assets/examples/images/pexels/pexels-photo-752036.jpeg',
        length: 1.5,
        effect: 'slideDown'
    },
    {
        src: 'https://s3-ap-southeast-2.amazonaws.com/shotstack-assets/examples/images/pexels/pexels-photo-572487.jpeg',
        length: 2,
        effect: 'slideRight'
    }
];

Теперь нам нужно изменить код создания клипа; мы проигнорируем константу length по умолчанию, которую мы определили в первой части, и вместо этого будем использовать значение, определенное для каждого объекта в массиве:

images.forEach((image) => {
    let imageAsset = new Shotstack.ImageAsset;
    imageAsset
        .setSrc(image.src);
let clip = new Shotstack.Clip;
    clip
        .setAsset(imageAsset)
        .setStart(start)
        .setLength(image.length)
        .setEffect(image.effect);
start = start + image.length;
    clips.push(clip);
});

Наше финальное видео слайд-шоу, созданное программно, выглядит так, как показано ниже.

Последние мысли

Я надеюсь, что этот урок дал общее представление о том, как можно автоматизировать создание видео с помощью кода.

Тот же демонстрационный код доступен также в PHP и Ruby.

Теперь вы можете проявить еще больше творчества и добавить ярко-матовые переходы к каждому слайду или даже обрезать видео в такт саундтреку, нет предела возможностям.

Вы также можете использовать этот пример и создать целое приложение, которое использует изображения из разных источников, таких как загруженные пользователем изображения или пользовательский контент, очистку изображений или интеграцию со службой размещения изображений, такой как Google Фото, Google Диск, DropBox, или Майкрософт OneDrive.

Следуйте за мной, чтобы узнать больше о программируемых носителях. Вы можете начать с наших ресурсов, чтобы узнать больше о программируемых видео. Зарегистрируйтесь бесплатно, чтобы начать строить сегодня!