WebRTC видеочат в 20 строках JavaScript (часть 1)

1. Краткое примечание по тестированию и отладке
2. Шаг 1: Основа HTML5
3. Шаг 2. Импорт JavaScript
4. Шаг 3: Подготовка к приему звонков
5. Шаг 4: Звонить
6. Совместимость браузера
7. Хотите узнать больше?

WebRTC, сейчас так жарко. Если вы еще не слышали об этом, WebRTC (Web Realtime Communications) - это API, который обеспечивает одноранговую передачу видео, аудио и данных в веб-браузере без использования плагинов, платформ или приложений.

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

Проверьте вживую Демоверсия видео чата WebRTC здесь , откройте два окна, и смотрите это в действии!

И если вы хотите проверить код проекта для серии уроков, он доступен здесь.

И код проекта для этого конкретного проекта здесь ,

Вот так! Давайте доберемся до этого.

Это изображение представляет два веб-браузера.

Краткое примечание по тестированию и отладке

Если вы попытаетесь открыть файл: // <your-webrtc-project> в своем браузере, вы, скорее всего, столкнетесь с ошибками общего доступа к ресурсам (CORS), поскольку браузер заблокирует ваши запросы на использование функций видео и микрофона.

Для проверки вашего кода у вас есть несколько вариантов. Вы можете загрузить свои файлы на веб-сервер, например, Github Pages Если вы предпочитаете. Однако, чтобы разработка оставалась локальной, я рекомендую вам настроить простой сервер с использованием Python.

Для этого откройте свой терминал и измените каталоги в своем текущем проекте и, в зависимости от вашей версии Python, запустите один из следующих модулей.

Например, я запускаю Python2.7 и использую команду python -m SimpleHTTPServer 8001. Теперь я могу перейти на http: // localhost: 8001 / index.html для отладки моего приложения. Попробуйте создать файл index.html, в котором есть что-нибудь, и подайте его на localhost, прежде чем продолжить.

Шаг 1: Основа HTML5

Ради демонстрации давайте сохраним HTML-код коротким и простым. Сначала нам нужен div для размещения наших видео. Затем все, что нам действительно нужно для начала - это поле для входа, чтобы вы могли указать свое имя и поле для вызова, чтобы вы могли набрать кого-то.

Это должно оставить вас со сложным, хорошо стилизованным HTML-файлом, который выглядит примерно так:

Шаг 2. Импорт JavaScript

Есть три библиотеки, которые вам нужно будет включить, чтобы сделать операции WebRTC намного проще:

1. Включают JQuery сделать модификации элементов DOM на одном дыхании.
2. Включить PubNub JavaScript SDK чтобы облегчить сигнализацию WebRTC (подробнее о сигнализации внизу этого сообщения в блоге) .
3. Включить PubNub WebRTC SDK сделать телефонные звонки такими же простыми, как вызов функции набора номера.

Теперь мы готовы написать наши вызывающие функции для login и makeCall.

Шаг 3: Подготовка к приему звонков

Чтобы начать осуществлять видеозвонки, вам потребуется ключ публикации и подписки. Чтобы получить ключи паба / саба, сначала нужно зарегистрировать учетную запись PubNub , Как только вы зарегистрируетесь, вы сможете найти свои уникальные ключи PubNub в Панель разработчика PubNub , Бесплатный уровень Sandbox должен предоставить вам всю полосу пропускания, необходимую для создания и тестирования приложения WebRTC.

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

Далее мы реализуем функцию входа в систему. Эта функция настроит телефон, используя имя пользователя, которое они указали в качестве UUID.

Вы можете видеть, что мы используем имя пользователя в качестве номера телефона и создаем экземпляр PubNub, используя ваши собственные ключи публикации и подписки. Следующая функция phone.ready позволяет определить обратный вызов, когда телефон будет готов выполнить звонок. Я просто изменяю фон ввода имени пользователя на зеленый, но вы можете настроить его под свои нужды.

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

Я определил session.connected, который вызывается после получения телефонного звонка и когда вы готовы начать видеочат. Я просто добавил поток сеанса к нашему видео div.

Затем я определяю session.ended, который вызывается после вызова phone.hangup. Здесь вы размещаете логику конечного вызова. Я просто очищаю innerHTML держателя видео.

Шаг 4: Звонить

Теперь у нас есть наше видео-приложение WebRTC, готовое к приему вызова, поэтому пришло время создать функцию makeCall.

Если window.phone не определен, мы не можем сделать звонок. Это произойдет, если пользователь не вошел в систему первым. Если он существует, мы используем функцию phone.dial, которая принимает номер и необязательный список серверов для совершения вызова.

И это все! Теперь у вас есть простое приложение для видеочата WebRTC. Запустите свой сервер Python и протестируйте свое приложение на localhost!

В следующих двух частях мы расскажем, как добавить в приложение для видеочата WebRTC ряд дополнительных функций, в том числе: выполнение / завершение вызовов, миниатюрные потоки, отключение звука, приостановка видео и групповой чат. Мы также рассмотрим, как создавать живой потоковый контент для встраивания (т.е. как создавать Periscope с WebRTC!).

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

Эти метаданные включают в себя такие вещи, как:

• Сообщения управления сеансом для открытия и закрытия соединений
• Сообщения об ошибках
• Кодеки / Настройки кодеков, пропускная способность и типы мультимедиа
• Ключи для установки безопасного соединения
• Сетевые данные, такие как IP-адрес хоста и порт

Как только происходит передача сигналов, видео / аудио / данные передаются напрямую между клиентами с использованием API PeerConnection WebRTC. Это прямое одноранговое соединение позволяет передавать потоковые надежные данные, такие как видео.

PubNub делает эту сигнализацию невероятно простой, а затем дает вам возможность сделать намного больше с вашими приложениями WebRTC.

Совместимость браузера

WebRTC широко применяется в популярных браузерах, таких как Chrome и Firefox, но существует множество браузеров, в которых определенные функции не будут работать. Смотрите список поддерживаемые браузеры здесь.

Хотите узнать больше?

Хорошо, что бесконечный поиск знаний унесет тебя далеко в жизни. Вот некоторые другие ресурсы, которые PubNub предлагает на WebRTC:

Теперь время для второй части! В следующей части мы покажем вам, как добавить ряд полезных функций WebRTC в ваше приложение чата.