Запись WebRTC видеопотока с веб-камеры браузера с буксировкой на Amazon S3

Запись WebRTC видеопотока с веб-камеры браузера с буксировкой на Amazon S3

Amazon S3 — это файловое облачное хранилище, которое используют такие известные сервисы как Dropbox, Trello и миллионы других проектов. Несмотря на сбой 28 февраля 2017 года, в результате которого кое-где перестали работать даже холодильники, S3 остается, пожалуй, самым популярным распределенным хранилищем, в котором пользователи и бизнес хранят фотки, видео, бэкапы и другой полезный контент.

Web Call Server — это медиасервер с поддержкой технологии WebRTC и записи видеопотоков из браузеров и мобильных устройств. HTML страница в браузере или мобильное приложение может захватить видеопоток с веб-камеры и отправить на сервер для дальнейшей ретрансляции и записи.

В этой статье мы расскажем как записать видеопоток со страницы браузера Google Chrome с последующей отправкой mp4-файла в хранилище Amazon S3.

Подготовка хранилища S3

C хранилищем S3 все получилось довольно быстро, т.к. Был готовый AWS аккаунт. Для того чтобы начать работать с хранилищем, создаем Bucket — это виртуальная папка-путь, в которую будут складываться файлы.

Заходим в S3 и жмем Create Bucket

Выбираем регион EU (Frankfurt) и одного юзера (самого себя) с правами на read и write.

Далее предлагается включить разные опции. Но нам требовалась простая запись. Поэтому все опции оставили в состоянии Disabled.

Далее нужно определиться с правами доступа. Их тоже оставляем по-умолчанию.

Готово. Осталось все проверить и нажать Next.

Таким образом, за 4 шага мы сделали облачное хранилище S3, в которое можно лить фотографии, бэкапы, и многое другое.

Запись видеопотока из браузера

Видеопоток транслируется на сервер с HTML / JavaScript страницы и записывается на сервере в формате mp4.

На скриншоте происходит соединение с сервером по протоколу wss (Websockets SSL) и далее WebRTC видеопоток отправляется на сервер и показывает статус PUBLISHING.

Если нажать кнопку Stop, то трансляция потока прекратится, а на сервере будет записан mp4-файл, который можно тут же скачать по ссылке Download recorded stream

Скачанный файл можно проиграть в обычном плеере. Например VLC.

Его также можно найти на сервере в папке /usr/local/FlashphonerWebCallServer/records

Тестируем выгрузку на S3

Для начала научимся заливать файлы в S3 обычным bash-скриптом. В дальнейшем вы можете выбрать более удобный способ и использовать специальные утилиты от AWS.

Погуглив мы нашли два скрипта для загрузки файлов на Amazon S3: первый и второй.

C первым возникли проблемы, а именно: The authorization mechanism you have provided is not supported. Please use AWS4-HMAC-SHA256.

Второй скрипт решает проблему аутентификации, поэтому остановились на нем. Скрипт пришлось совсем немного модифицировать и его модифицированная версия находится здесь.

Модифицированный скрипт работает так:

Т.е. просто отправляет указанный файл в хранилище.

Небольшие правки, которые были сделаны:

1. Принимаем путь к файлу в качестве аргумента

2. Обозначаем рабочую папку и берем ACCESS KEY и SECRET KEY из этой папки

3. Отодвигаем дату подальше в будущее

4. Добавляем в путь регион .$REQUEST_REGION

Таким образом, в нашей рабочей папке сейчас хранится 4 файла, два из которых ключи, и файл hellos3.txt для тестовой отправки.

/tmp/11 ├── AWS_ACCESS_KEY ├── AWS_SECRET_KEY ├── hellos3.txt └── S3-AWS4-Upload.sh

Ключи можно сгенерировать в меню Account — My Security Credentials

Сами ключи выглядят так:

Access Key ID: BPIAI3TGFDI3ZPTABBIA

Secret Access Key: RPnmmrUf5FOPs2as4XghOMfsbkatqSdUO16Um91r

В результате успешной работы скрипта, получаем файл hellos3.txt загруженным на S3. Отсюда можно его уже можно скачать, раздать, и т.д.

В результате мы успешно протестировали выгрузку файла на S3 обычным bash-скриптом и можем отправить на S3 любой файл, если у нас есть его полный путь.

Дергаем hook и отправляем записанный видеопоток на Amazon S3

После нажатия кнопки Stop, происходит остановка отправки потока на сервер и на сервере создается файл mp4.

Далее сервер вызывает bash-скрипт on_record_hook.sh и передает этому скрипту путь к файлу вторым параметром.

Поменяем скрипт так, чтобы он отправлял записанный файл на Amazon S3 и писал сообщение в лог для отладки:

В результате к списку файлов добавляется mp4-файл, который можно скачать, теперь уже с S3 и посмотреть.

Минимальный HTML / JS код для записи видеопотока

На HTML странице главный элемент — это окно захвата видео localVideo. Это простой div-блок, в котором отображается видео, захваченное с веб-камеры.

Страница stream-recording.html

Скрипт stream-recording.js состоит из 48 строк.

В скрипте устанавливается соединение с сервером и начинается захват с веб-камеры и публикация потока на сервер по кнопке Start. По кнопке Stop поток завершает публикацию и отображается имя записанного файла.

1) Устанавливаем соединение с сервером с помощью Flashphoner.createSession()

2. Создаем видеопоток с функцией записи: record: true и отправляем видеопоток на сервер методом stream.publish()

3. Отображаем имя mp4-файла на окончание трансляции и статус UNPUBLISHED

Итого для успешного стриминга и записи видеопотока необходимо три файла:

  • stream-recording.html
  • stream-recording.js
  • flashphoner.js

Файл flashphoner.js можно найти в составе Web SDK для WCS.

Тестируем код записи видеопотока

Процесс записи в браузере Google Chrome со страницы stream-recording.html выглядит так:

После остановки видеопотока получаем имя записанного файла в формате mp4.

Этот файл доступен на сервере в папке /usr/local/FlashphonerWebCallServer/records

Кроме того, если мы правильно оформили скрипт on_record_hook.sh, то этот же файл будет выгружен в Amazon S3.

Таким образом, мы создали хранилище в Amazon S3, протестировали простой bash скрипт для загрузки файлов в хранилище и написали HTML + JS код, который захватывает видеопоток с веб-камеры и записывает на сервер с последующей передачей в S3.

📎📎📎📎📎📎📎📎📎📎