Соединение однорангового соединения и сигналинга

Обновлено: 2024-03-12

2 мин

Содержание

Чему вы научитесь

На этом шаге вы узнаете, как:

Запускать службу сигнализации WebRTC с помощью Socket.IO на Node.js
Использовать эту службу для обмена метаданными WebRTC между узлами. Полная версия этого шага находится в папке step-05.

Поменяйте HTML и JavaScript

Замените содержимое index.html следующим:

<!DOCTYPE html>
<html>

<head>

  <title>Realtime communication with WebRTC</title>

  <link rel="stylesheet" href="/css/main.css" />

</head>

<body>

  <h1>Realtime communication with WebRTC</h1>

  <div id="videos">
    <video id="localVideo" autoplay muted></video>
    <video id="remoteVideo" autoplay></video>
  </div>

  <script src="/socket.io/socket.io.js"></script>
  <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
  <script src="js/main.js"></script>
  
</body>

</html>

Замените js/main.js содержимым из step-05/js/main.js.

Запустите Node.js сервер

Если вы не отслеживаете эту codelab из своей папки work, вам может потребоваться установить зависимости для папки step-05 или вашей текущей рабочей папки. Выполните следующую команду из своей рабочей папки: npm install

После установки, если ваш Node.js сервер не запущен, запустите его, вызвав следующую команду в папке work: node index.js

Убедитесь, что вы используете версию index.js из предыдущего шага, который реализует Socket.IO. Для получения дополнительной информации о Node и Socket.IO, посмотрите раздел “Set up a signaling service to exchange messages”. В вашем браузере откройте localhost:8080.

Снова откройте localhost: 8080 в новой вкладке или окне. Один видеоэлемент будет отображать локальный поток из getUserMedia(), а другой будет показывать “удаленное” видео, передаваемое через RTCPeerConnection.

Вам необходимо перезапускать Node.js сервер каждый раз, когда вы закрываете клиентскую вкладку или окно. Посмотрите логи в консоли браузера.

Бонусные задания

Это приложение поддерживает только видеочат один на один. Как вы можете изменить дизайн, чтобы несколько человек могли посещать одну и ту же комнату видеочата?
В примере строго задано имя комнаты foo. Каков наилучший способ включить другие имена комнат?
Как пользователям обмениваться названием комнаты? Попробуйте создать альтернативу для обмена именами комнат.
Как вы могли бы изменить приложение

Что вы узнали

На этом шаге вы узнали, как:

Запускать сигналинг-службу WebRTC с помощью Socket.IO через Node.js .
Использовать эту службу для обмена метаданными WebRTC между узлами. Полная версия этого шага находится в папке step-05.

Советы

Статистика WebRTC и данные отладки доступны в chrome:// webrtc-internals.
test.webrtc.org может использоваться для проверки ваших локальных настроек и тестирования камеры и микрофона.
Если у вас возникли странные проблемы с кэшированием, попробуйте следующее:
Выполните принудительную перезагрузку обновление, удерживая нажатой клавишу ctrl и нажав кнопку Reload
Перезапустите браузер
Запустите npm cache clean из командной строки.

Далее

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