Usar o RTCDataChannel para transmitir dados

event 17 de setembro de 2018 às 9:48 pm

O que você vai aprender:

  • Como trocar dados entre pontos do WebRTC.

Uma versão completa dessa etapa está na pasta step-03.

Atualize seu HTML

Para esta etapa, você usará o canal de dados do WebRTC para enviar texto entre dois elementos textareana mesma página. Isso não é muito útil. Mas demonstra como o WebRTC pode ser usado para compartilhar dados, bem como transmissão de vídeo.

Remova os elementos de vídeo e botões da index.html e substitua-os pelo seguinte HTML:

<textarea id="dataChannelSend" disabled
    placeholder="Press Start, enter some text, then press Send."></textarea>
<textarea id="dataChannelReceive" disabled></textarea>

<div id="buttons">
  <button id="startButton">Start</button>
  <button id="sendButton">Send</button>
  <button id="closeButton">Stop</button>
</div>

 

Uma textarea será para inserir texto, a outra será para mostrar o texto transmitido entre os pontos.

O index.html  agora deve se parecer com isso:

<!DOCTYPE html>
<html>

<head>

  <title>Realtime communication with WebRTC</title>

  <link rel="stylesheet" href="css/main.css" />

</head>

<body>

  <h1>Realtime communication with WebRTC</h1>

  <textarea id="dataChannelSend" disabled
    placeholder="Press Start, enter some text, then press Send."></textarea>
  <textarea id="dataChannelReceive" disabled></textarea>

  <div id="buttons">
    <button id="startButton">Start</button>
    <button id="sendButton">Send</button>
    <button id="closeButton">Stop</button>
  </div>

  <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
  <script src="js/main.js"></script>

</body>

</html>

Atualiza seu JavaScript

Substitua o main.js com o conteúdo de step-03/js/main.js.

Como na etapa anterior, o ideal não é cortar-e-colar grandes pedaços de código em um codelab, mas (como com RTCPeerConnection) não há alternativa.

Tente transmitir dados entre pontos: abra index.html, pressione Start para configurar a conexão de ponto, insira algum texto no textarea a esquerda, depois clique em Send para transferir o texto usando canais de dados do WebRTC.

Como funciona

Este código usa RTCPeerConnection e RTCDataChannel para permitir troca de mensagens de texto.

Grande parte do código nesta etapa é o mesmo do exemplo RTCPeerConnection.

As funções sendData() e createConnection() tem a maior parte do código novo:

function createConnection() {
  dataChannelSend.placeholder = '';
  var servers = null;
  pcConstraint = null;
  dataConstraint = null;
  trace('Using SCTP based data channels');
  // For SCTP, reliable and ordered delivery is true by default.
  // Add localConnection to global scope to make it visible
  // from the browser console.
  window.localConnection = localConnection =
      new RTCPeerConnection(servers, pcConstraint);
  trace('Created local peer connection object localConnection');

  sendChannel = localConnection.createDataChannel('sendDataChannel',
      dataConstraint);
  trace('Created send data channel');

  localConnection.onicecandidate = iceCallback1;
  sendChannel.onopen = onSendChannelStateChange;
  sendChannel.onclose = onSendChannelStateChange;

  // Add remoteConnection to global scope to make it visible
  // from the browser console.
  window.remoteConnection = remoteConnection =
      new RTCPeerConnection(servers, pcConstraint);
  trace('Created remote peer connection object remoteConnection');

  remoteConnection.onicecandidate = iceCallback2;
  remoteConnection.ondatachannel = receiveChannelCallback;

  localConnection.createOffer().then(
    gotDescription1,
    onCreateSessionDescriptionError
  );
  startButton.disabled = true;
  closeButton.disabled = false;
}

function sendData() {
  var data = dataChannelSend.value;
  sendChannel.send(data);
  trace('Sent Data: ' + data);
}

A sintaxe do RTCDataChannel é intencionalmente similar ao do WebSocket, com um método send() e um evento message.

Observe o uso do dataConstraint. Os canais de dados podem ser configurados para permitir diferentes tipos de compartilhamento de dados — por exemplo, priorizando entrega confiável sobre desempenho. Você pode encontrar mais informações sobre opções em Mozilla Developer Network.

Três tipos de restrições

É confuso!

Diferentes tipos de opções de configurações das chamadas do WebRTC, são muitas vezes referidos como “restrições”. Saiba mais sobre restrições e opções:

Pontos Bônus

  1. Com o SCTP, o protocolo usado pelos canais de dados do WebRTC, a entrega de dados confiável e ordenada é ativada por padrão. Quando o RTCDataChannel pode precisar fornecer uma entrega confiável de dados, e quando o desempenho pode ser mais importante — mesmo que isso signifique perder alguns dados?
  2. Use o CSS para melhorar o layout da página, e adicione um atributo placeholder para o textarea “dataChannelReceive”.
  3. Teste a página em um dispositivo móvel.

O que você aprendeu

Nessa etapa você aprendeu como:

  • Estabelecer uma conexão entre dois pontos WebRTC.
  • Trocar dados de texto entre os pontos.

Uma versão completa dessa etapa está na pasta step-03.

Saiba mais

 

Próximo

Você aprendeu como trocar dados entre pontos na mesma página, mas como você faz isso entre diferentes máquinas? Primeiro, você precisa configura um sinalizador para trocar mensagens de metadados. Saiba como na próxima etapa!

 

Referência

Conteúdo traduzido do site : https://codelabs.developers.google.com/codelabs/webrtc-web/#5

Deixe uma resposta

// Posts Recentes

Formulário Respondeu!