Как создать собственный сервис прямых трансляций с помощью api.video

С недавним ростом популярности удаленных рабочих мест увеличился спрос на услуги прямых трансляций. Даже до этого многие мировые компании использовали сервисы прямых трансляций для проведения общих собраний. api.video предоставляет API и SDK, которые облегчают создание собственного сервиса прямых трансляций и его размещение на вашем сайте. Кроме того, они также предоставляют решения для загрузки видео, кодирования видео, доставки видео и видеоаналитики. Вот некоторые особенности api.video:

  • Вы можете безопасно загружать и хранить видео из вашего собственного пользовательского интерфейса на api.video. Затем видео можно распространять по всему миру с помощью отзывчивого видеоплеера. Они также поддерживают прогрессивную загрузку, что позволяет одновременно загружать большие видео.
  • Вы можете настроить свой видеоплеер, выбрав тему видеоплеера, добавив собственное изображение миниатюры и логотип.
  • Вы можете создать свой собственный сервис трансляций, для чего можно использовать API/SDK или пользовательский интерфейс (т.е. вам не придется писать код).
  • Вы можете получить доступ к статистике и аналитике ваших видео, чтобы узнать больше о ваших пользователях и их вовлеченности.

Некоторые примеры использования api.video включают:

  • Видеоклассы: учителя и репетиторы могут использовать видеоплеер api.video или возможности livestream для проведения своих занятий в режиме онлайн.
  • Инструкции по использованию продукта: компании могут создавать видеоролики о том, как пользоваться их продуктом, и размещать их с помощью настраиваемого видеоплеера api.video на своем сайте.
  • Живые потоки: живые потоки через сервис api.video livestream могут использоваться для различных целей, таких как игры, кодирование, концерты, вечеринки и многое другое.

Вы можете найти больше примеров использования в блоге api.video здесь.

В этом руководстве вы создадите свой собственный сервис livestream, используя Node.js-клиент api.video. Затем вы создадите простое приложение React App для размещения вашего livestream. Вся разработка будет вестись с помощью Replit, браузерной IDE, которая поддерживает более пятидесяти языков.

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

  • Код для создания сервиса livestream
  • React App
  • репозиторий GitHub

Реализация собственного сервиса Livestream

Этот учебник можно разбить на три части. В первой части вы будете использовать Node.js клиент api.video для создания собственного сервиса livestream. Во второй части вы создадите простое приложение React App для размещения вашего сервиса. Пользовательский интерфейс может быть построен с использованием любого фреймворка, который вы предпочитаете. В этом учебнике мы будем придерживаться React. Наконец, вы подключите Zoom к вашей службе livestream, чтобы пользователи могли просматривать ее.

Создание службы Livestream

Прежде чем приступить к работе, вам необходимо создать учетную запись на api.video. Как только вы создадите учетную запись, войдите в систему и перейдите на панель управления. Прокрутите вниз, и вы увидите ключ API Sandbox:

Скопируйте этот ключ. Он будет использоваться API api.video для вашей аутентификации. В этом учебнике вы можете работать в среде Sandbox.

Затем перейдите на сайт Replit. Если у вас еще нет учетной записи, вы можете создать ее здесь. Создайте новый repl и выберите Node.js в качестве шаблона:

Затем в вашем файле index.js вы должны увидеть опции для выбора шаблона. Если вы хотите, вы можете попробовать поиграть с шаблоном. Однако для этого урока вы можете просто начать с нуля.

Сохраните свой API-ключ api.video как переменную окружения. В Replit есть функция, которая позволяет удобно хранить ваши секреты в виде переменных окружения:

Замените значение переменной на ваш API-ключ api.video Sandbox. После создания переменной окружения вы должны увидеть возможность вставить фрагмент кода для импорта переменной:

Вот фрагмент кода для этого:

Далее вам нужно будет установить клиентскую библиотеку Node.js api.video. В Replit есть функция, которая позволяет искать пакеты и устанавливать их. Нажмите на значок квадратика в левой боковой панели и найдите «@api.video/nodejs-client».

Нажмите на значок плюса, чтобы установить пакет. Как вариант, вы можете использовать команду npm install в оболочке вашей программы repl, чтобы также установить его.

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

Теперь создайте асинхронную функцию для создания сервиса livestream:

Вы должны будете использовать свой API-ключ при создании экземпляра клиента. У экземпляра клиента есть метод liveStreams.create, который позволяет вам создать службу livestream. Вы должны создать пару ключ-значение для названия вашего потока. Если вы хотите добавить миниатюру к вашему потоку, вы можете использовать метод liveStreams.uploadThumbnail экземпляра клиента:

Это еще одна асинхронная функция, аналогичная предыдущей. Здесь она принимает пару параметров: идентификатор потока, который будет возвращен api.video, и путь к вашему JPG-файлу.

Replit позволяет загружать файлы в ваш проект repl. Перейдите в раздел Файлы на боковой панели. Вы можете либо перетащить изображение, либо нажать на три точки и выбрать Загрузить файл.

Если вам нужно уменьшенное изображение, вы можете использовать это.

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

Если вы сохранили изображение миниатюры на том же уровне, что и ваш файл index.js, путь — это просто имя проекта.

Если хотите, вы можете дополнительно установить пакет prettier для форматирования кода. После его установки откройте файл package.json и добавьте следующее в объект Scripts:

"prettier": "prettier --write *.js"

Теперь вы можете перейти в оболочку вашей программы repl и ввести следующую команду, чтобы отформатировать и украсить ваш код:

npm run prettier

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

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

После создания службы livestream вы можете перейти на панель учетной записи api.video, чтобы просмотреть свои livestream.

Создание пользовательского интерфейса React

Чтобы лучше управлять кодом, создайте новый repl для этого шага и выберите React.js в качестве шаблона.

Это создаст шаблон React. Вы можете запустить приложение:

URL отображается в браузере. В моем случае это так:

https://live-stream-UI.rahulbanerjee26.repl.co

Если ваш repl является публичным, URL может быть доступен откуда угодно и кому угодно. Кроме того, пока ваш repl запущен, URL будет отображать ваше приложение React. Это очень полезная функция, если вы хотите протестировать свое приложение на разных экранах или поделиться им с другими разработчиками для тестирования. Replit также поддерживает живую перезагрузку по умолчанию, поэтому любые изменения, которые вы делаете в коде, будут отражены в браузере почти мгновенно.

Для пользовательского интерфейса вы можете добавить немного текста и элемент iframe вашего livestream. Вот компонент, который следует использовать:

Замените элемент iframe значением iframe, которое вы сохранили в предыдущем разделе. Затем перейдите в браузер, и вы должны увидеть изображение миниатюры вместе с текстом в теге h1. При желании вы можете добавить немного CSS для стилизации приложения:

Replit добавляет небольшое поле с предварительным просмотром цвета рядом с вашими шестнадцатеричными кодами. Если вы нажмете на него, появится окно выбора цвета для выбора цвета.

После добавления стилей ваше приложение React App должно выглядеть примерно так:

Подключение Zoom к вашему сервису Livestream

Войдите в свою учетную запись Zoom и создайте встречу:

После создания собрания перейдите к информации о собрании и прокрутите страницу вниз, чтобы выбрать пункт Configure Custom Streaming Service.

Теперь вам понадобится информация из службы потоковой трансляции, которую вы создали в предыдущих шагах. Перейдите на приборную панель api.video и перейдите к службе livestream. Нажмите на опцию See details для службы. Вы должны увидеть ключ потока и URL сервера RTMP. Вам понадобятся оба эти значения. Вернитесь к деталям вашего собрания Zoom. Для URL потока добавьте URL RTMP-сервера из api.video, а для ключа потока добавьте ключ вашего api.video livestream. Затем, для URL страницы прямой трансляции, добавьте URL вашего приложения React. Вот как выглядит моя конфигурация живого потока Zoom:

Когда вы проводите встречу в Zoom, просто нажмите на More > Live on Custom Live Streaming Service.

Теперь ваше приложение React App должно отображать вашу прямую трансляцию. Я попробовал транслировать VS Code в прямом эфире на встрече Zoom, и вот результат в приложении React:

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

Заключение

В этом руководстве вы создали свой собственный сервис livestreaming, используя api.video. Вы также создали простое приложение React App, чтобы другие могли просматривать ваш livestream через Zoom. Вы также познакомились с Replit, браузерной IDE, которую можно использовать для создания livestream, помимо многих других вещей. Хотя в этом учебнике рассматривалась только поддержка Node.js и React, Replit поддерживает и другие языки и фреймворки, включая C++, Python, Vue.js, Svelte и другие.

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

Оцените статью
Procodings.ru
Добавить комментарий