[译]WebRTC基础实践 - 6. 通过RTCDataChannel传输数据

栏目: 后端 · 前端 · 发布时间: 6年前

内容简介:本节的完整版代码位于在本示例中, 使用WebRTC的数据通道(data channel), 将一个接着上一节的代码, 将

本节内容

  • WebRTC客户端(peers)之间如何传递数据。

本节的完整版代码位于 step-03 文件夹中。

修改HTML代码

在本示例中, 使用WebRTC的数据通道(data channel), 将一个 textarea 的内容, 传递给同页面中的另一个 textarea 。这个demo本身没什么实用价值, 主要目的是展示怎样使用WebRTC来传输数据和视频。

接着上一节的代码, 将 index.html 文件中的 videobutton 元素移除, 并替换为以下代码:

<textarea id="dataChannelSend" disabled
    placeholder="先点击[开始]按钮, 然后输入任意文字, 再点击[发送]按钮."></textarea>
<textarea id="dataChannelReceive" disabled></textarea>

<div id="buttons">
  <button id="startButton">开始</button>
  <button id="sendButton">发送</button>
  <button id="closeButton">停止</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="先点击[开始]按钮, 然后输入任意文字, 再点击[发送]按钮."></textarea>
  <textarea id="dataChannelReceive" disabled></textarea>

  <div id="buttons">
    <button id="startButton">开始</button>
    <button id="sendButton">发送</button>
    <button id="closeButton">停止</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 中。

前面的小节也说过, 这种大量粘贴代码的方式, 在示例教程中并不是很理想的做法, 但没有办法, 因为 RTCPeerConnection 要跑起来就需要依赖这么多东西。

在客户端之间传输数据:

  • 打开 index.html ,
  • 点击 Start 按钮, 以建立对等连接,
  • 然后在左边的文本框之中输入一些字符,
  • 点击 Send 按钮, 将文本通过 WebRTC 的数据通道传送出去。

工作原理

这段代码通过 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 其提供了 send() 方法与 message 事件, 使用的语法和 WebSocket类似。

请注意 dataConstraint 的使用。数据通道可以通过配置, 来传递各种类型特征的数据 —— 比如, 可靠性优先还是效率优先. 更多的信息请参考MDN上的文档: https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/createDataChannel

三种约束类型

WebRTC中, 各种类型的配置项, 都被称为是“约束”(constraints), 这是容易造成困扰的地方!

关于约束和配置项的更多信息, 请参考:

练习与实践

  1. WebRTC数据通道使用的协议为: SCTP , 在默认配置时, 具备了可靠/顺序的消息传输能力. 如果 RTCDataChannel 需要更高的可靠性, 或者需要效率优先时怎么处理呢? —— 许多场景丢点数据无所谓, 比如视频聊天。
  2. 使用CSS来美化页面布局, 以及为 “dataChannelReceive” 对应的 textarea 添加 placeholder 属性。
  3. 在移动设备上进行测试。

知识点回顾

在本节课程中, 我们学习了:

  • 在两个WebRTC客户端之间创建连接。
  • 在客户端之间传输文本数据。

本节的完整版代码位于 step-03 文件夹中。

了解更多

后续内容

我们学习了如何在同一页面中WebRTC客户端之间传输数据, 但不同设备的客户端之间如何进行数据传输呢? 当然这有一个前提: 客户端之间需要建立信令通道,来交换元数据消息. 在下一节我们会进行讲解!

原文链接: https://codelabs.developers.google.com/codelabs/webrtc-web/#5

翻译人员: 铁锚 - https://blog.csdn.net/renfufei

翻译日期: 2018年08月03日


以上所述就是小编给大家介绍的《[译]WebRTC基础实践 - 6. 通过RTCDataChannel传输数据》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

七周七并发模型

七周七并发模型

Paul Butcher / 黄炎 / 人民邮电出版社 / 2015-3 / 49.00元

借助Java、Go等多种语言的特长,深度剖析所有主流并发编程模型 基于锁和线程的并发模型是目前最常用的一种并发模型,但是并发编程模型不仅仅只有这一种,本书几乎涵盖了目前所有的并发编程模型。了解和熟悉各种并发编程模型,在解决并发问题时会有更多思路。 ——方腾飞,并发编程网站长 当看到这本书的目录时,我就为之一振。它涉及了当今所有的主流并发编程模型(当然也包括Go语言及其实现的CSP......一起来看看 《七周七并发模型》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试