Демо: https://www.youtube.com/watch?v=7i4sT1B1yz8

Требуется базовое понимание:

  1. React / React Native
  2. Реагировать на хуки

Что мы будем создавать

  1. Приложение для видеозвонков на Android + IOS
  2. Реализация webRTC с использованием пакета «response-native-webrtc»
  3. Использование веб-сокетов для сигнализации
  4. Использование компонентов пользовательского интерфейса из «react-native-paper»

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

webRTC - отличный инструмент для установления связи в режиме реального времени через Интернет. В этом руководстве мы собираемся реализовать webRTC в мобильном приложении React Native с использованием пакета response-native-webrtc, по сути, этот пакет представляет собой адаптер, который предоставляет классы webRTC, такие как RTCPeerConnection, Media Streams и т. Д.

Шаги:

  1. Настройте собственный проект React с помощью response-native-cli

Вы можете следовать этому официальному руководству - https://reactnative.dev/docs/environment-setup

2. После успешного запуска вашего демонстрационного приложения мы установим некоторые библиотеки React Native для пользовательского интерфейса и навигации.

Вот мои зависимости package.json, которые вам также необходимо установить

"dependencies": {
"@react-native-community/async-storage": "^1.10.0",
"@react-native-community/masked-view": "^0.1.10",
"@react-navigation/native": "^5.2.3",
"@react-navigation/stack": "^5.2.18",
"react": "16.11.0",
"react-native": "0.62.2",
"react-native-gesture-handler": "^1.6.1",
"react-native-incall-manager": "^3.2.7",
"react-native-paper": "^3.9.0",
"react-native-reanimated": "^1.8.0",
"react-native-safe-area-context": "^0.7.3",
"react-native-screens": "^2.7.0",
"react-native-vector-icons": "^6.6.0",
"react-native-webrtc": "^1.75.3"  
}

3. Навигация по зданию:

Для построения навигации для нашего приложения мы используем реагирующую навигацию, как вы можете видеть в списке зависимостей проекта.

App.js

4. Как видите, мы импортируем экраны входа и вызова в компонент приложения, теперь мы создадим экран входа в систему:

LoginScreen.js

Здесь, в приведенном выше файле, мы просто сохраняем уникальный идентификатор ПОЛЬЗОВАТЕЛЯ, который будет представлять этого пользователя, и на него может ссылаться другой подключенный пользователь, здесь вы можете назначить уникальный идентификатор для любого из ваших пользователей,

ОСНОВНОЙ КОД ДЛЯ РЕАЛИЗАЦИИ WEBRTC:

5. Код экрана вызова:

В приведенном выше файле много кода, я объясню каждую строку кода:

Основные части:

установка userID: пользователь, который в настоящее время вошел в систему

connectedUser: при вызове другого пользователя с использованием его идентификатора эта переменная присваивается этому идентификатору пользователя.

Видео / аудиопотоки:

localStream: доступ к локальному видеопотоку пользователя с помощью его / ее мобильной камеры.

remoteStream: при подключении вызова к этой переменной потока добавляется видеопоток получателя.

ПРИМЕЧАНИЕ. Для доступа к видеопотоку вам необходимо установить некоторые разрешения в файлах Android и iOS. Разрешения:

Android - https://github.com/react-native-webrtc/react-native-webrtc/blob/master/Documentation/AndroidInstallation.md

IOS - https://github.com/react-native-webrtc/react-native-webrtc/blob/master/Documentation/iOSInstallation.md

conn: это устанавливает ваше соединение с WebSocket

yourConn: это устанавливает вам RTCPeerConnection, который в дальнейшем будет использоваться для настройки локальных / удаленных описаний и предложений.

Итак, прочитав весь этот код в файле, вы получите
1.Streams
2.Signaling Socket
3.RTCPeerConnection

СОБЫТИЯ В РОЗЕТКЕ:

onmessage: срабатывает, когда мы получаем сообщение

Типы сообщений и обработчики:

  1. Предложение: когда один пользователь пытается позвонить другому пользователю, которого он создает, предлагает и отправляет это предложение другому пользователю, тогда другой пользователь получит предложение, которое обрабатывается handleOffer.
  2. Кандидат: когда отправитель отправляет предложение, а получатель получает его, это означает, что отправители получают кандидата, тогда этот кандидат дескриптора срабатывает, сигнализируя о том, что вызов звонил или ожидает ответа
  3. Ответ: Когда получатель получает предложение, он может принять или отклонить предложение, мы можем сохранить это предложение в переменной, а позже мы можем создать ответ на это предложение или отклонить / оставить
    Если мы примем предложение, мы добавим наш локальный поток к соединению, чтобы отправитель мог видеть наш видеопоток, а затем мы создаем и отвечаем на это предложение и отправляем его.
  4. Обработка ответа: после того, как получатель отправит нам ответ, это означает, что наш звонок принят, теперь мы можем просматривать наши видео и видео наших друзей на экранах
  5. Leave: когда мы вызываем HangUp, это означает, что мы завершаем подключенный вызов или отклоняем входящее предложение, затем мы оставляем все наши переменные и закрываем RTCPeerConnection.

Существует концепция подобного remoteDescription localDescription, вы можете прочитать об этом на MDN все о них - https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/setRemoteDescription

Процесс :

  1. LOGIN: отправить сообщение в сокет для входа в систему
  2. ЛОКАЛЬНЫЙ ПОТОК: получить видеопоток от локального пользователя
  3. Добавить слушателей событий для обновления ледяного кандидата
  4. Слушатель событий ontrack срабатывает, когда удаленный пользователь добавляет свой поток в это rtcPeerConnection, и мы его отображаем.

Github: https://github.com/skyrocketscommunity/React-native-webrtcApp

Youtube: https://www.youtube.com/watch?v=7i4sT1B1yz8