Сводка по обучению WebRTC

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

WebRTC (Web Real-Time Communications)Это технология связи в режиме реального времени, которая позволяет веб-приложениям или сайтам устанавливать одноранговые (Peer-to-Peer) соединение для реализации передачи видеопотока и/или аудиопотока или других произвольных данных.WebRTCВключенные стандарты позволяют пользователям создавать одноранговые (Peer-to-Peer) возможен обмен данными и конференц-связь.

Эта статья начинается с собственной практики и объединяет соответствующие коды для обобщенияWebRTCОсновной процесс реализации.

1. Введение

Во-первых, давайте посмотрим наWebRTCИз блок-схемы, приведенной в The Authoritative Guide, нам нужно прояснить две вещи:

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

Затем мы вводимWebRTCСобственные существительные в , чтобы облегчить понимание читателем следующего.

  • RTCPeerConnection: основной объект, каждый объект подключения должен создавать новый объект
  • SDP(Session Description Protocol, Протокол описания сеанса): содержит некоторую необходимую информацию для установления соединения, напримерIPадрес и т.д.sdpЗависит отRTCPeerConnectionСоздание метода объекта, в настоящее время нам не нужно знать конкретное содержимое объекта, просто используйте передачу черного ящика
  • ICE(Interactive Connectivity Establishment, технология интерактивного установления соединения): способ установления соединения между пользователями, который используется для выбора наилучшего метода соединения между пользователями.

2. Процесс внедрения WebRTC

Следующий код не может быть запущен напрямую, потому что я не реализовал здесь сигнальный сервер, а то, как реализовать сигнальный сервер, может быть выбрано свободно (например,socket.io, веб-сокет и т. д.).

Сначала инициатор получает видеопоток и в случае успеха создает новыйRTCPeerConnectionобъект, затем создайтеoffer, и отправьте ответчику.

  • addStreamметод будетgetUserMediaПоток, полученный в методе (stream)добавить вRTCPeerConnectionобъект для передачи
  • onaddStreamСобытия используются для прослушивания новых добавленных потоков в канал черезe.streamПолучать
  • onicecandidateсобытия используются для поиска подходящихICE
  • createOffer()даRTCPeerConnectionСобственные методы объекта, используемые для созданияoffer, вызов после успешного созданияsetLocalDescriptionметод будетlocalDescriptionУстановить какoffer,localDescriptionЭто то, что нам нужно отправить ответчикуsdp
  • sendOfferа такжеsendCandidateметод — это пользовательский метод, используемый для отправки данных на сервер.
// 引入<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>脚本
// 提升浏览器兼容性
var localConnection
var constraints={
    audio:false,
    video:true
}
navigator.mediaDevices.getUserMedia(constraints).then(handleSuccess).catch(handleError)
function handleSuccess(stream) {
  document.getElementById("video").srcObject = stream
  localConnection=new RTCPeerConnection()
  localConnection.addStream(stream)
  localConnection.onaddstream=function(e) {
    console.log('获得应答方的视频流' + e.stream)
  }
  localConnection.onicecandidate=function(event){
    if(event.candidate){
        sendCandidate(event.candidate)
    }
  }
  localConnection.createOffer().then((offer)=>{
    localConnection.setLocalDescription(offer).then(sendOffer)
  })
}

Точно так же получатель также должен создать новыйRTCPeerConnectionобъект

var remoteConnection
var constraints={
    audio:false,
    video:true
    }
}
navigator.mediaDevices.getUserMedia(constraints).then(handleSuccess).catch(handleError)
function handleSuccess(stream) {
  document.getElementById("video").srcObject = stream
  remoteConnection=new RTCPeerConnection()
  remoteConnection.addStream(stream)
  remoteConnection.onaddstream=function(e) {
    console.log('获得发起方的视频流' + e.stream)
  }
  remoteConnection.onicecandidate=function(event){
      if(event.candidate){
          sendCandidate(event.candidate)
      }
  }
}

Когда ответчик получаетofferПосле этого позвонитеsetRemoteDescriptionнастраиватьRTCPeerConnectionобъектremoteDescriptionсвойство, которое вызывается после успешной установкиcreateAnswerметод, создатьanswerПосле успеха установите его наlocalDescription, затем поставьтеanswerотправить на сервер

let desc=new RTCSessionDescription(sdp)
remoteConnection.setRemoteDescription(desc).then(function() {
    remoteConnection.createAnswer().then((answer)=>{
        remoteConnection.setLocalDescription(answer).then(sendAnswer)
    })
})

Когда инициатор получает сообщение, отправленное ответчикомanswerПосле этого установите его наremoteDescription, слишком далекоWebRTCСоединение завершено.

let desc=new RTCSessionDescription(sdp)
localConnection.setRemoteDescription(desc).then(()=>{console.log('Peer Connection Success')})

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

Ответчик получает сообщение, отправленное инициаторомICEданные, звонокRTCPeerConnectionобъектaddIceCandidateметод.

remoteConnection.addIceCandidate(new RTCIceCandidate(ice))

Инициатор получает сообщение, отправленное ответчикомICEданные, тот же вызовRTCPeerConnectionобъектaddIceCandidateметод.

localConnection.addIceCandidate(new RTCIceCandidate(ice))

Пока самый простойWebRTCСвязь установлена.

3. Канал данных

WebRTCХорошо передает данные, не только аудио- и видеопотоки, но и любой тип данных, который мы хотим, по сравнению со сложным процессом обмена данными, основная функция создания канала данных уже вRTCDataConnectionОбъект реализует:

var peerConnection = new RTCPeerConnection();
var dataChannel = peerConnection.createDataChannel("label",dataChannelOptions);

WebRTCПозаботится обо всем, включая внутренний слой браузера. Браузер уведомляет приложение о текущем состоянии канала данных посредством ряда событий.ondatachannelСобытия будут уведомленыRTCPeerConnectionобъект,RTCDataChannelСам объект инициирует соответствующие события при включении, выключении, возникновении ошибки или получении сообщения.

dataChannel.onerror = function (error){
    console.log(error)
}

dataChannel.onmessage = function (event){
    console.log(event.data)
}

dataChannel.onopen = function (error){
    console.log('data channel opened')
    // 当创建一个数据通道后，你必须等onopen事件触发后才能发送消息
    dataChannel.send('Hello world')
}

dataChannel.onclose = function (error){
    console.log('data channel closed')
}

канал данныхdatachannelПроцесс установления немного отличается от установления двунаправленного соединения для потоковой передачи видео или аудио.offer、answer、iceПосле завершения обработки одна сторона может инициировать запрос.

localConnection = new RTCPeerConnection();

sendChannel = localConnection.createDataChannel("sendChannel");
sendChannel.onopen = handleSendChannelStatusChange;
sendChannel.onclose = handleSendChannelStatusChange;

Получателю не нужно снова звонить в это времяcreateDataChannelМетод, просто слушайRTCPeerConnectionна объект экземпляраondatachannelСобытие может получить запрос отправителя в обратном вызове, и канал данных установлен.

remoteConnection = new RTCPeerConnection();
remoteConnection.ondatachannel = receiveChannelCallback;

function receiveChannelCallback(event) {
    receiveChannel = event.channel;
    receiveChannel.onmessage = handleReceiveMessage;
    receiveChannel.onopen = handleReceiveChannelStatusChange;
    receiveChannel.onclose = handleReceiveChannelStatusChange;
  }

dataChannelOptionsВходящий элемент конфигурации является необязательным и является общимJavaScriptобъект, эти элементы конфигурации могут сделать приложение вUDPилиTCPизменения между преимуществами.

  • reliable: Установите, гарантируется ли сообщение
  • ordered: Установите, должно ли быть принято сообщение в том порядке, в котором оно было отправлено.
  • maxRetransmitTime: Установите, как долго будет повторно отправляться сообщение, если оно не может быть отправлено.
  • maxRetransmits: Установите максимальное количество повторных передач, когда сообщение не может быть отправлено.
  • protocol: установите принудительное использование других подпротоколов, но будет сообщено об ошибке, если пользовательский агент не поддерживает этот протокол.
  • negotiated: устанавливает, обязан ли разработчик создать канал данных с обеих сторон, или браузер делает это автоматически
  • id: Установите уникальный идентификатор канала.

4. Общий доступ к файлам

В настоящее время каналы данных поддерживают следующие типы:

  • String:JavaScriptосновная строка
  • Blob(binary large object): бинарный большой объект
  • ArrayBuffer: тип данных, определяющий длину массива.
  • ArrayBufferView: базовый вид массива

в,BlobТип — это контейнер, в котором могут храниться двоичные файлы в сочетании сHTML5Чтение связанного файлаAPI, может реализовать функцию обмена файлами.

5. Еще

Документация MDN:>>>Нажмите на меня, чтобы войти

Учебные материалы WebRTC:>>>Нажмите на меня, чтобы войти

Официальный адрес на гитхабе:>>>Нажмите на меня, чтобы войти

Разбор поля SDP:>>>Нажмите на меня, чтобы войти

Адрес персонального демо-кода:>>>Нажмите на меня, чтобы войти

Книги "Официальное руководство по WebRTC", "Изучение WebRTC на китайском языке"

Категории