Про веб-разработку

#исследуем
🎞 Запись видео на JS используя WebRTC + сохранение видео на сервер на примере PHP

Иногда, чтобы развеять свою "CRUD рутину", можно пощупать какие-то технологии, которые не так часто встречаются во время разработки стандартных веб-приложений или реализовать функционал, который редко встречается на сайтах. Хочу сделать это постоянной рубрикой, будем разбирать на реальных кейсах (если концепт интересен, то ставь огонёк 🔥).

Первая статья про WebRTC
Технология реализована для потоковой передачи видео/аудио. Пример сервиса, завязанного на WebRTC: Google Meet. Мы разберём более простой кейс использования этой технологии из реальной практики:
📋 Была поставлена задача реализовать запись видео-отзыва после заполнения формы, после чего сохранять его на сервер.

Рассмотрим два варианта решения этой задачи:
1. Давать пользователям самим загружать файлы
Думаю не стоит объяснять что пользователи вряд-ли будут усложнять себе жизнь записывая видео отдельно. На мобильных устройствах с этим попроще. Можно использовать input с атрибутом capture, который указывает какую камеру включить (если значение user - открывается фронтальная камера, а если environment - задняя):

<input type="file" accept="video/*" capture="user">

Слишком большой размер входного файла + отсутствие предпросмотра/возможности записи на ПК отбрасывает этот метод (можно его использовать как вспомогательный, если WebRTC не поддерживается).

2. Использовать WebRTC
Казалось бы, как WebRTC может тут помочь? Для этого он имеет специальный MediaRecorder, который позволяет хранить транслируемое медиа как Blob). Удобный для пользователей вариант, который позволяет: выводить; пересмотреть и без проблем перезаписать видео.

Выбираем второй вариант
Для большего удобства использовал специальную библиотеку: RecordRTC.

На наглядный пример работы RecordRTC можете посмотреть по ссылке. Там ещё есть 30 других демо + код.
По примеру можно понять что есть много настраиваемых опций: формат; кодек; битрейт; фреймрейт и т.д..
Единственное что, перед выставлением этих опций нужно проверить совместимость (например, Safari запись видео в H264 кодеке не поддерживает). Кстати наличие SSL сертификата для работы #webrtc обязательно.

Из-за вопросов совместимости принял решение записывать видео в формате webm используя видео-кодек VP8 и аудио-кодек OPUS. После того, как на основе примера выше была реализована запись - отправляем её на сервер.

Важно убрать сериализацию. Передавать именно некодированные данные (multipart/form-data), запретить кеширование запроса. Сформировать данные для отправки:

// recorder = RecordRTC(stream, recorderConfig);
let currentBlob = recorder.getBlob();

let blob = new File([currentBlob], fileName, {
    type: mimeType
});

let videoData = new FormData();
videoData.append('video', blob);

Ну и реализовать саму отправку.

Загрузка видео
Чтобы сжимать получаемое видео для экономии пространства на сервере можно использовать ffmpeg. После получения видео на сервер нужно обязательно проверить:

- Тип файла:
mime_content_type($_FILES['video']['tmp_name']);

- Размер файла:
Получив количество байт ($_FILES['video']['size']) можно сделать ограничение (например в 200 мб.).

- Другие сопутствующие проверки.
Если другие проверки отработали хорошо, то файл можно поместить куда-то в директорию, а потом проверить длительность видео запустив ffmpeg таким образом:
shell_exec('ffmpeg -i ' . $videoPath . ' -vstats 2>&1') или же использовать специальные библиотеки для более удобной работы с ffmpeg. Команда отдаст информацию про разрешение видео, кодек, длительность и т.д..
Если длительность будет выше приемлемой - можно просто удалить файл.

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

815 views19:29