Краткое, но подробное руководство.
Помните, 20 лет назад цвет в электронном письме считался захватывающим? Люди быстро привыкли к «новой норме» электронных писем, и цвет больше не волновал. Итак, люди начали включать изображения, затем ваше имя и, в последнее время, персонализировать контент, чтобы адаптировать его под вас. Но цикл продолжился, и теперь мы привыкли к персонализации наших писем.
Так что же дальше? Что кажется свежим в электронных письмах? Встроенные видео!
Что будет рассмотрено:
- Запись видео в React с помощью веб-камеры
- Доступ к ресурсам AWS с веб-сайта
- Загрузка видео на S3 и получение публичной ссылки
Запись видео с веб-камеры с помощью React
Требования:
- Записывайте видео и аудио через веб-камеру
- Получайте отзывы о видео в режиме реального времени во время записи
- Есть возможность воспроизведения после записи
React Video Recorder - это легко настраиваемая легкая оболочка над компонентом Video стилизованного компонента. Он предоставляет набор утилит для настройки записи и blob в соответствии с вашими требованиями, таких как MimeType, параметры воспроизведения и наложения изображений. Все это задокументировано на их Github.
Компонент React
Создание ресурсов AWS
Создание корзины S3
Из Консоли AWS S3 вы можете создать свою корзину. Чтобы сделать ссылку на видео общедоступной и доступной для просмотра за пределами вашего аккаунта AWS, необходимо отключить параметр по умолчанию Block All Public Access.
Amazon Cognito
При использовании AWS SDK в браузере предпочтительно использовать Amazon Cognito Identity Pools, поскольку они предоставляют временные учетные данные, в которых вы можете указать, к каким ресурсам пользователи могут получить доступ. Пользователи могут получить доступ к вашим ресурсам AWS как гости (не прошедшие проверку подлинности) или как пользователи, прошедшие проверку подлинности. В этой статье мы сосредоточимся на гостях, но если вы хотите узнать больше об аутентификации пользователей, вы можете здесь.
Вы можете создать свой пул идентификаторов Amazon Cognito Identity Pool из консоли. При создании пула идентификаторов установите флажок Enable access to unauthenticated users, чтобы разрешить пользователям доступ к ресурсам без входа в систему.
На следующей странице вы сможете выбрать, к каким ресурсам вы хотите предоставить пользователям доступ с помощью политик IAM. По умолчанию у пользователей есть доступ к сервисам и аналитике Cognito, поэтому нам нужно разрешить доступ к S3. Под каждой ролью щелкните редактировать документ политики и добавьте следующее:
Обязательно замените <bucketname> названием вашего сегмента.
Единственное, что мы добавили в существующий документ, - это возможность добавлять объекты в конкретную корзину S3. Рекомендуется предоставлять только минимальный доступ, необходимый для ограничения любого ущерба, наносимого потенциальными злоумышленниками. Вы также можете добавить это разрешение через Консоль IAM после создания пула идентификационных данных.
Загрузка в S3
Сначала вы должны установить AWS SDK в свое приложение React.
Аутентификация
Теперь мы можем добавить в наш пул удостоверений. В консоли Amazon Cognito Identity Pool щелкните только что созданный пул, а затем перейдите в Sample Code. Это предоставит вам фрагмент, подобный приведенному ниже, с уникальным идентификатором для вашего пула идентификаторов.
Настройка S3
По умолчанию в AWS SDK используется последняя версия клиента S3. Хотя в большинстве случаев это будет вашим предпочтением, это может вызвать проблемы в будущем, если API изменится. Чтобы избежать этого, вы можете глобально привязать версию S3 API к определенной версии.
Чтобы получить доступ к своей корзине S3, вы создаете ее экземпляр, который позволит вам выполнять операции CRUD, используя учетные данные пользователя из пула идентификаторов.
Добавление видео в S3
Здесь нужно разбить несколько свойств:
- Ключ: имя файла, который нужно сохранить в S3. Этот ключ также учитывает файловую структуру с использованием косой черты (/), поэтому для сохранения ее в определенной папке вы можете использовать folder1 / folder2 / video.mp4.
- Body: контент для загрузки.
- Content-Type: сообщает Amazon, в каком формате находится контент. Он необходим для воспроизведения при доступе к видео через общедоступный URL-адрес, который предоставляет S3.
- ACL: список управления доступом (ACL) Amazon определяет разрешения, установленные для объекта. Как и при создании корзины S3, объекты в этой корзине по умолчанию не являются общедоступными. Чтобы разрешить публичный доступ к URL-адресу, необходимо установить значение
public-read.
Все вместе
После добавления ваша корзина S3 будет содержать ваше видео с URL-адресом в формате https://<bucketname>.<region>.amazonaws.com/<videoname>, который может быть опубликован публично.
Пункты для рассмотрения
- Если вы планируете использовать это на реальном сайте, домен должен иметь сертификат SSL. Это сделано специально для браузеров, так как потоковая передача контента с веб-камеры через HTTP опасна.
- Если вы хотите отправить общедоступное видео только одному пользователю и не хотите, чтобы видео было легко обнаружить, я бы посоветовал вам как минимум добавить UUID к имени.
Больше контента на plainenglish.io
