С ростом удаленной работы и лекций за последние два года возросла потребность в приложениях для потоковой передачи в реальном времени для онлайн-встреч, занятий и вебинаров. Несмотря на то, что доступны приложения для потокового вещания общего назначения, организации предпочитают использовать свои собственные внутренние приложения для потокового вещания, отвечающие их конкретным потребностям.
Создание приложения для прямой трансляции с нуля может потребовать много ресурсов и усилий. Именно здесь Twilio Live, который предоставляет готовые библиотеки и SDK, оказывается действительно полезным. С помощью этих библиотек мы можем быстро развертывать приложения в соответствии с нашими потребностями.
В сегодняшнем руководстве мы собираемся создать приложение для прямой трансляции с использованием Twilio Live, Node.js и Express (для создания сервера) и ванильного JavaScript (для клиентской части). Мы также будем использовать ngrok для потоковой передачи на несколько устройств.
Установка
Прежде чем мы начнем писать настоящее приложение, нам нужно настроить нашу среду.
Убедитесь, что на машине установлены Node.js и npm.
Чтобы использовать Twilio Live, нам нужно создать учетную запись Twilio. Вы можете создать бесплатную пробную учетную запись здесь: Try Twilio Free.
Создание учетной записи Twilio дает нам наш ACCOUNT_SID. Это также позволяет нам генерировать ключ API, необходимый для нашего приложения для прямой трансляции.
Нам нужно скачать ngrok, чтобы сгенерировать ссылку, которую мы можем использовать для доступа к прямой трансляции на нескольких устройствах. Скачать его можно здесь: ngrok — скачать.
Теперь давайте создадим папку, которая будет использоваться в качестве каталога проекта, и запустим следующую команду, чтобы создать наш файл package.json.
npm init
Затем давайте установим наши зависимости с помощью:
npm install dotenv express twilio @twilio/live-player-sdk
Теперь давайте создадим наш файл .env со следующими переменными среды:
TWILIO_ACCOUNT_SID=XXXXX
TWILIO_API_KEY_SID=XXXXX
TWILIO_API_KEY_SECRET=XXXXX
Вы можете найти первую переменную здесь, в своей учетной записи Twilio: Консоль Twilio.
Два других нужно сгенерировать, перейдя в Для Twilio и нажав Создать ключ API.
В каталоге вашего проекта создайте папку с именем public. Наши клиентские файлы будут здесь.
В папке public создайте папку с именем livePlayer. Скопируйте следующие файлы из node_modules/@twilio/live-player-sdk/dist/build в эту папку.
- twilio-live-player.min.js
- twilio-live-player-wasmworker-1–5–0.min.js
- twilio-live-player-wasmworker-1–5–0.min.wasm
Теперь, когда мы настроили нашу среду, мы готовы создать наше приложение для прямой трансляции с помощью Twilio Live. Для создания нашего приложения нам потребуются следующие строительные блоки:
- Сервер, который может генерировать токены доступа для стримера и аудитории, создавать конечные точки для управления прямой трансляцией, а также создавать и обновлять комнаты.
- Стример для создания прямого эфира.
- Аудитория для просмотра прямой трансляции.
Сервер
Создайте файл с именем server.js внутри каталога проекта со следующим кодом
https://gist.github.com/RanjanSushant/2ce97591994db8e053a37229e994d07b.
Этот сервер обслуживает наши статические страницы, создает конечные точки для запуска и завершения прямой трансляции и получает токены доступа для участников. Слушаем сервер на порту 3333.
Клиентская сторона
Сначала создайте файл с именем index.html в папке public и добавьте в него следующий код.
Этот файл будет домашней страницей для нашего приложения для прямой трансляции. Его можно открыть в браузере с помощью localhost:3333.
Теперь нам нужно создать стример в конце приложения. Для этого нам понадобятся два файла. Один из них streamer.html, а другой streamer.js. Создайте оба файла в папке public, используя приведенный ниже код:
Наш сервер Express будет обслуживать эту страницу в конечной точке «/stream». Вы можете получить к нему доступ по адресу localhost:3333/stream.
Теперь мы создадим страницу аудитории для нашего приложения. Для этого снова потребуются два файла, а именно audience.html и audience.js. Создайте оба файла в каталоге public. Код страницы аудитории доступен ниже
Наш сервер Express будет обслуживать эту страницу в конечной точке «/watch». Вы можете получить к нему доступ по адресу localhost:3333/watch.
Вот оно. Мы создали приложение для прямой трансляции с использованием Node.js, Express, Vanilla Javascript и Twilio Live. Запустите npm start и откройте localhost:3333 в браузере, чтобы просмотреть свою веб-страницу. Как только npm start запустится, откройте терминал и запустите:
ngrok http 3333
Это создаст временный URL-адрес, который мы можем использовать для доступа к нашей веб-странице на другом компьютере. Это помогает нам использовать одно устройство в качестве стримера, а другое — в качестве аудитории.
Это просто демонстрация, но вы можете изменить ее и сделать по-своему!
Когда вы будете готовы продемонстрировать миру свое приложение для потоковой передачи в реальном времени, вы можете создать, развернуть и разместить его на Codesphere, универсальной платформе разработки, которая ускоряет вашу разработку!
Удачного кодирования!
