Канал данных WebRTC с ручной сигнализацией, пример, пожалуйста? - PullRequest
Новая
       68

Канал данных WebRTC с ручной сигнализацией, пример, пожалуйста?

0 голосов
/ 04 марта 2019

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

Мне нужен пример Javascript канала данных WebRTC с ручной сигнализацией, т. Е. При загрузке примера он предоставляет данные сигнализации в одном текстовом поле.Я копирую данные вручную (выделение, копирование) и вставляю их в окно пира, в котором есть текстовое поле, чтобы принять эти данные сигнализации.Я полагаю, что в данных сигнализации должен быть «ответ», поэтому должны быть соответствующие текстовые поля, ожидающие и этого ввода.Спасибо.

Может ли пример использовать бесплатный сервер STUN от Google, пожалуйста.

Я действительно путаюсь с побитовыми примерами, мне нужен один файл, который содержит HTML и Javascript (без CSS или JQuery, пожалуйста).Этого достаточно, чтобы код работал только на Chrome.Благодарю.

1 Ответ

0 голосов
/ 04 марта 2019

Вот оно.Нажмите синюю кнопку ниже в двух разных вкладках / окнах / браузерах / машинах: 

const config = {iceServers: [{urls: "stun:stun.1.google.com:19302"}]};
const pc = new RTCPeerConnection(config);
const dc = pc.createDataChannel("chat", {negotiated: true, id: 0});
const log = msg => div.innerHTML += `<br>${msg}`;
dc.onopen = () => chat.select();
dc.onmessage = e => log(`> ${e.data}`);
pc.oniceconnectionstatechange = e => log(pc.iceConnectionState);

chat.onkeypress = function(e) {
  if (e.keyCode != 13) return;
  dc.send(chat.value);
  log(chat.value);
  chat.value = "";
};

async function createOffer() {
  button.disabled = true;
  await pc.setLocalDescription(await pc.createOffer());
  pc.onicecandidate = ({candidate}) => {
    if (candidate) return;
    offer.value = pc.localDescription.sdp;
    offer.select();
    answer.placeholder = "Paste answer here";
  };
}

offer.onkeypress = async function(e) {
  if (e.keyCode != 13 || pc.signalingState != "stable") return;
  button.disabled = offer.disabled = true;
  await pc.setRemoteDescription({type: "offer", sdp: offer.value});
  await pc.setLocalDescription(await pc.createAnswer());
  pc.onicecandidate = ({candidate}) => {
    if (candidate) return;
    answer.focus();
    answer.value = pc.localDescription.sdp;
    answer.select();
  };
};

answer.onkeypress = function(e) {
  if (e.keyCode != 13 || pc.signalingState != "have-local-offer") return;
  answer.disabled = true;
  pc.setRemoteDescription({type: "answer", sdp: answer.value});
};
<button id="button" onclick="createOffer()">Offer:</button>
<textarea id="offer" placeholder="Paste offer here"></textarea>
Answer: <textarea id="answer"></textarea><br><div id="div"></div>
Chat: <input id="chat"><br>

Затем выполните следующие действия:

  1. В окне A нажмите кнопку Offer и скопируйте предложение в буфер обмена.
  2. В окне B вставьте это предложение в «Вставить предложение здесь» и нажмите клавишу ВВОД.
  3. Скопируйте ответ, который появляется через несколько секунд.
  4. Возврат к окнуA и вставьте этот ответ туда, где написано «Вставить ответ», и нажмите ENTER.

Теперь вы должны увидеть сообщение о том, что вы «подключены».Напечатайте в окне чата, чтобы пообщаться!

Если вы и друг каким-либо образом обмениваетесь предложением / ответом, у вас теперь есть прямое одноранговое соединение.Это должно работать во всем мире (по модулю симметричных NAT);сервер данных не задействован.

...