Демо: https://www.youtube.com/watch?v=7i4sT1B1yz8
Требуется базовое понимание:
- React / React Native
- Реагировать на хуки
Что мы будем создавать
- Приложение для видеозвонков на Android + IOS
- Реализация webRTC с использованием пакета «response-native-webrtc»
- Использование веб-сокетов для сигнализации
- Использование компонентов пользовательского интерфейса из «react-native-paper»
Примечание. В этом руководстве мы реализуем только интерфейсную часть, не будет руководства для внутренней части, то есть обработки событий сокетов и другой внутренней работы.
webRTC - отличный инструмент для установления связи в режиме реального времени через Интернет. В этом руководстве мы собираемся реализовать webRTC в мобильном приложении React Native с использованием пакета response-native-webrtc, по сути, этот пакет представляет собой адаптер, который предоставляет классы webRTC, такие как RTCPeerConnection, Media Streams и т. Д.
Шаги:
- Настройте собственный проект 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. Разрешения:
conn: это устанавливает ваше соединение с WebSocket
yourConn: это устанавливает вам RTCPeerConnection, который в дальнейшем будет использоваться для настройки локальных / удаленных описаний и предложений.
Итак, прочитав весь этот код в файле, вы получите
1.Streams
2.Signaling Socket
3.RTCPeerConnection
СОБЫТИЯ В РОЗЕТКЕ:
onmessage: срабатывает, когда мы получаем сообщение
Типы сообщений и обработчики:
- Предложение: когда один пользователь пытается позвонить другому пользователю, которого он создает, предлагает и отправляет это предложение другому пользователю, тогда другой пользователь получит предложение, которое обрабатывается handleOffer.
- Кандидат: когда отправитель отправляет предложение, а получатель получает его, это означает, что отправители получают кандидата, тогда этот кандидат дескриптора срабатывает, сигнализируя о том, что вызов звонил или ожидает ответа
- Ответ: Когда получатель получает предложение, он может принять или отклонить предложение, мы можем сохранить это предложение в переменной, а позже мы можем создать ответ на это предложение или отклонить / оставить
Если мы примем предложение, мы добавим наш локальный поток к соединению, чтобы отправитель мог видеть наш видеопоток, а затем мы создаем и отвечаем на это предложение и отправляем его. - Обработка ответа: после того, как получатель отправит нам ответ, это означает, что наш звонок принят, теперь мы можем просматривать наши видео и видео наших друзей на экранах
- Leave: когда мы вызываем HangUp, это означает, что мы завершаем подключенный вызов или отклоняем входящее предложение, затем мы оставляем все наши переменные и закрываем RTCPeerConnection.
Существует концепция подобного remoteDescription localDescription, вы можете прочитать об этом на MDN все о них - https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/setRemoteDescription
Процесс :
- LOGIN: отправить сообщение в сокет для входа в систему
- ЛОКАЛЬНЫЙ ПОТОК: получить видеопоток от локального пользователя
- Добавить слушателей событий для обновления ледяного кандидата
- Слушатель событий ontrack срабатывает, когда удаленный пользователь добавляет свой поток в это rtcPeerConnection, и мы его отображаем.
Github: https://github.com/skyrocketscommunity/React-native-webrtcApp