Разработать чат-приложение на основе WebRTC и веб-камеры

RTC

Если вы столкнулись с проблемами во время разработки WebRTC-приложений, добро пожаловать вСообщество разработчиков RTCОбщайтесь с более опытными коллегами.

WebRTC — это протокол, который позволяет людям создавать связь в реальном времени между двумя точками с помощью JavaScript.

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

Сервер нужно использовать только при подключении, поэтому каждый клиент знает, как подключаться друг к другу.

Какие приложения мы можем создать, используя эту функцию? Например, прямое подключение к веб-камере. Одноранговые вызовы, обмен файлами и многое другое.

В этом уроке я представлю приложение, которое воскликнет, когда вы используете его в первый раз: приложение для общения через веб-камеру.

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

Одной из таких библиотек является PeerJS, которая очень упрощает общение в реальном времени. Проще говоря, это WebRTC, его абстракция позволяет быстрее получать результаты, а затем вы можете узнать, как работает внутренности.

Предложение: используйте Bit для совместного использования в многоразовой коллекции при создании приложения и синхронизируйте их во всех своих проектах! Попробуйте, это может ускорить вашу работу.

задняя часть

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

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

PeerJS предоставляет нам такой сервер, процесс установки прост и удобен в использовании.

В папке инициализируйте проект npm с помощью команды npm init, установите PeerJS с помощью команды npm install peer, а затем вы можете запустить его с помощью npx:

Npx peerjs –port 9000

Используйте npx peerjs --help, чтобы просмотреть дополнительные параметры.

Это ваш бэкенд.

Теперь мы можем создать самое простое приложение, мы настраиваем получателя и отправителя.

внешний интерфейс

Сначала создайте приемник, подключитесь к серверу PeerJS и дождитесь получения информации. Первый параметр new Peer() — это имя нашей конечной точки, мы называем его приемником, чтобы сделать значение более понятным. : Импортируйте клиент PeerJS:

<script src="https://cdnjs.cloudflare.com/ajax/libs/peerjs/0.3.16/peer.min.js"></script>

Затем инициализируйте объект Peer. Событие Connection вызывается, когда к нам подключается другая конечная точка. После получения некоторой информации вызывается событие данных:

const peer = new Peer('receiver', { host: 'localhost', port: 9000, path: '/' })
peer.on('connection', (conn) => {
  conn.on('data', (data) => {
    console.log(data);
  })
})

Давайте создадим другой конец связи. Мы называем его отправителем, потому что он подключается и отправляет информацию получателю.

Инициализируйте объект Peer, а затем запросите конечную точку для подключения к приемнику, который мы создали ранее. Как только соединение установлено, запускается событие open, а затем вызывается метод send() для отправки сообщения получателю:

const peer = new Peer('sender', { host: 'localhost', port: 9000, path: '/' })
const conn = peer.connect('receiver')
conn.on('open', () => {
  conn.send('hi!')
})

Это самый простой пример.

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

Это очень простая информационная связь.

Далее, вместо того, чтобы отправлять информацию, оба конца будут делиться потоком веб-камеры друг с другом.

На стороне клиента мы не используемpeer.connect()подключено, но используетсяpeer.call():

const call = peer.call('receiver', localStream)
})

На принимающей стороне после получения обратной связи о событии вызова он должен ответить на него:

peer.on('call', call => {
  call.answer(localStream)
})

Как и в случае телефонного разговора, мы не можем автоматически отвечать на каждый входящий вызов, мы должны отвечать на него явным образом.

в каждом звонкеLocalStreamчто это такое? Это поток, создаваемый веб-камерой, и мы должны вызвать его, вызвавnavigator.mediaDevices.getUserMedia()Получите это, это API браузера.

Это асинхронная связь, поэтому мы используем async/await для ожидания выполнения, нам нужно сначала обернуть вызов в асинхронную функцию:

const startChat = async () => {
  const localStream = await navigator.mediaDevices.getUserMedia({
    video: true
  })
}
startChat()

Получив объект localStream, мы можем назначить его элементу видео на HTML-странице. Мы можем создавать локальные и удаленные элементы видео:

<video id="local" autoplay></video>
<video id="remote" autoplay></video>

назначить поток наvideo#localэлемент:

document.querySelector('video#local').srcObject = localStream

передачаreceiverсторона, передавая объект localStream:

const call = peer.call('receiver', localStream)

Код на принимающей стороне выглядит следующим образом:

peer.on('call', call => {
  call.answer(localStream)
})

Нам также нужно получить медиапоток. Код очень простой, похож на отправителя, за исключением того, что мы оборачиваем весь код в обратную связь о событии звонка:

peer.on('call', call => {
  const startChat = async () => {
    const localStream = await navigator.mediaDevices.getUserMedia({
      video: true
    })
    document.querySelector('video#local').srcObject = localStream
    call.answer(localStream)
  }
  startChat()
})

показать удаленный поток

Нам также нужно добавить последнюю часть к отправителю и получателю.

Как только мы получим удаленный поток из события потока объекта вызова, нам нужно прикрепить его к элементу video#remote.

call.on('stream', remoteStream => {
  document.querySelector('video#remote').srcObject = remoteStream
})

Код приемника следующий:

peer.on('call', call => {
  const startChat = async () => {
    const localStream = await navigator.mediaDevices.getUserMedia({
      video: true
    })
    document.querySelector('video#local').srcObject = localStream
    call.answer(localStream)
    call.on('stream', remoteStream => {
      document.querySelector('video#remote').srcObject = remoteStream
    })
  }
  startChat()
})

Код отправителя выглядит следующим образом:

const startChat = async () => {
  const localStream = await navigator.mediaDevices.getUserMedia({
    video: true
  })
  document.querySelector('video#local').srcObject = localStream
  const call = peer.call('receiver', localStream)
  call.on('stream', remoteStream => {
    document.querySelector('video#remote').srcObject = remoteStream
  })
}
startChat()

Когда один конец закрывает соединение, перенаправляясь на новую веб-страницу или закрывая вкладку браузера, другой конец перестает получать поток, и удаленный видеопоток прекращается.

Суммировать

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

Категории