通过WebRTC进行实时通信- 使用RTCDataChannel

2018-10-17 本文已影响22人音视频直播技术专家

我们将学习

如何在 WebRTC端点之间进行数据交换。

这步的完整版本在 step-03 目录下。

更新 HTML

对于这一步，我们将使用WebRTC的 data channel 在同一页中的两个 textarea之间发送文本。这个例子本身并没什么价值，但它证明了 WebRTC除了传输视频外，还能用于共享数据。

从index.html中移除video和button元素，使用下面的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>

一个 textarea 输入文本，另一个显示对端传过来的文本。
index.html现在看起来像这样：

<!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>

更新 JavaScript
用step-03/js/main.js替换main.js。

证明前面的步骤，在codelab里的大块代码做剪切复制不是一个好的想法，但（证如RTCPeerConnection）别无选择。

偿试在端点之间传输数据：打开index.html，按 Start建立一个对等连接，输入一些文本在左边的textarea，点击 Send使用 WebRTC数据channel传输文本。

它是如何工作的

这个代码使用 RTCPeerConnection 和 RTCDataChannel 交换文本消息。
在这一步中，大部分代码与RTCPeerChannection 例子是一样的。

`sendData() 和 CreateConnection() 函数很多新代码：

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);
}

RTCDataChannel的语法估计设置成与 WebSocket 相似，俱有send()方法和message 事件。注意 dataConstraint的使用。数据channel能配置成开启不同类型的数据共享 -- 例如，优先考虑可靠的交付而不是性能。在Mozilla Developer Network你能发现更多关于选项的信息

三种类型的约束

不同类型的WebRTC呼叫设置选项通常都被称为“约束”。
了解有关约束和选项的更多信息：

RTCPeerConnection

RTCDataChannel

getUserMedia()

点滴

SCTP,它是WebRTC 数据通道使用的协议, 默认是可考和有序的数据投递。何时RTCDataChannel可能需要提供可靠的数据传输，何时性能可能更重要 - 即使这意味着丢失一些数据?
使用CSS改进页面布局，并将“占位符”属性添加到“dataChannelReceive”textarea 。
在移动设备上测试本页。

我们学到了什么

在这一步我们学习了如何：

在两个 WebRTC 端点之间建立连接。
在端点之间交换文本数据。

这一步完整的版本在 step-03目录下。

查找更多的信息

WebRTC data channels (很多年了，但仍然值得读)
Why was SCTP Selected for WebRTC's Data Channel?

下一步

您已经学会了如何在同一页面上的端点之间交换数据，但是如何在不同的机器之间进行此操作？
首先，您需要设置信令通道来交换元数据消息。了解下一步的工作方式！