WebRTC实时通信系列教程6 使用RTCDataChannel传输数据

最新推荐文章于 2023-09-23 10:09:04 发布

李乾文

最新推荐文章于 2023-09-23 10:09:04 发布

阅读量6.5k

点赞数 2

分类专栏：【前端开发】 # WebRTC协议【通信协议】文章标签： webrtc RTCDataChannel

【前端开发】同时被 3 个专栏收录

37 篇文章 4 订阅

订阅专栏

【通信协议】

12 篇文章 1 订阅

订阅专栏

WebRTC协议

10 篇文章 6 订阅

订阅专栏

【转载请注明出处: http://blog.csdn.net/leytton/article/details/76820765】

PS：如果本文对您有帮助，请点个赞让我知道哦~

《WebRTC实时通信系列教程》翻译自《Real time communication with WebRTC》

示例代码下载http://download.csdn.net/detail/leytton/9923708

WebRTC实时通信系列教程1 介绍

WebRTC实时通信系列教程2 概述

WebRTC实时通信系列教程3 获取示例代码

WebRTC实时通信系列教程4 从摄像头获取视频流

WebRTC实时通信系列教程5 RTCPeerConnection传输视频

WebRTC实时通信系列教程6 使用RTCDataChannel传输数据

WebRTC实时通信系列教程7 使用Socket.IO搭建信令服务器交换信息

WebRTC实时通信系列教程8 打通P2P连接和信令通信

WebRTC实时通信系列教程9 数据通道图片传输

WebRTC实时通信系列教程10 恭喜完成本系列课程

一、译文

1、你将学到

如何在 WebRTC 终端之间交换数据 (peers).

完整示例代码在 step-03 目录下.

2、更新HTML代码

在这一步骤中,我们将使用 WebRTC 数据通道在同一页面中的两个 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标签用于输入文本, 另一个用于展示peers之间数据传输接收到的消息.

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="js/lib/adapter.js"></script>
  <script src="js/main.js"></script>

</body>

</html>

更新你的 JavaScript 代码

将 main.js 文件内容替换成 step-03/js/main.js 里的内容.

尝试在peers之间传输数据: 打开 index.html, 点击 Start 按钮创建点对点连接, 在左边textarea 里输入文本, 然后点击 Send 按钮通过 WebRTC 数据通道来发送数据.

3、工作原理

这段代码使用 RTCPeerConnection 和 RTCDataChannel 进行文本消息传输.

大部分代码跟上一节文章的 RTCPeerConnection 示例一样.

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 的使用. 可以定义数据通道消息传输类型 — 例如, 优先考虑可靠的传递性能. 详情请看 Mozilla Developer Network.

三种约束

不同类型的WebRTC参数设置通常称之为约束

查看更多的约束设置:

4、拓展

WebRTC数据通道的 SCTP 传输协议, 默认情况下是可靠有序传输. 有时RTCDataChannel可能需要可靠的数据传输, 但可能性能更重要 — 即使这意味着丢失部分数据?
使用CSS来改善页面布局, 在数据接收的那个textarea标签上添加placeholder属性.
在手机端测试这个页面.

5、你学习了

在这节中你学习了:

在 WebRTC peers 之间建立连接.
在 peers 之间交换文本数据.

完整示例代码在 step-03 目录下.

6、更多资料

WebRTC data channels (几年前的东西，但值得一读)
Why was SCTP Selected for WebRTC's Data Channel?

7、下一节

你已经学习了在同一个页面的peers之间传输数据, 但在不同的机器之间呢? 首先你要建立一个信令传输通道来交换元数据. 下节内容即将揭晓!

二、原文

摘自https://codelabs.developers.google.com/codelabs/webrtc-web/#5

6. Use RTCDataChannel to exchange data

What you'll learn

How to exchange data between WebRTC endpoints (peers).

A complete version of this step is in the step-03 folder.

Update your HTML

For this step, we'll use WebRTC data channels to send text between two textarea elements on the same page. That's not very useful, but does demonstrate how WebRTC can be used to share data as well as streaming video.

Remove the video and button elements from index.html and replace them with the following 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>

One textarea will be for entering text, the other will display the text as streamed between peers.

index.html should now look like this:

<!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="js/lib/adapter.js"></script>
  <script src="js/main.js"></script>

</body>

</html>

Update your JavaScript

Replace main.js with the contents of step-03/js/main.js.

As with the previous step, it's not ideal doing cut-and-paste with large chunks of code in a codelab, but (as with RTCPeerConnection) there's no alternative.

Try out streaming data between peers: open index.html, press Start to set up the peer connection, enter some text in thetextarea on the left, then click Send to transfer the text using WebRTC data channels.

How it works

This code uses RTCPeerConnection and RTCDataChannel to enable exchange of text messages.

Much of the code in this step is the same as for the RTCPeerConnection example.

The sendData() and createConnection() functions have most of the new code:

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

The syntax of RTCDataChannel is deliberately similar to WebSocket, with a send() method and a message event.

Notice the use of dataConstraint. Data channels can be configured to enable different types of data sharing — for example, prioritizing reliable delivery over performance. You can find out more information about options at Mozilla Developer Network.

Three types of constraints

It's confusing!

Different types of WebRTC call setup options are all often referred to as 'constraints'.

Find out more about constraints and options:

Bonus points

With SCTP, the protocol used by WebRTC data channels, reliable and ordered data delivery is on by default. When might RTCDataChannel need to provide reliable delivery of data, and when might performance be more important — even if that means losing some data?
Use CSS to improve page layout, and add a placeholder attribute to the "dataChannelReceive" textarea.
Test the page on a mobile device.

What you learned

In this step you learned how to:

Establish a connection between two WebRTC peers.
Exchange text data between the peers.

A complete version of this step is in the step-03 folder.

Find out more

WebRTC data channels (a couple of years old, but still worth reading)
Why was SCTP Selected for WebRTC's Data Channel?

Next up

You've learned how to exchange data between peers on the same page, but how do you do this between different machines? First, you need to set up a signaling channel to exchange metadata messages. Find out how in the next step!