内容简介:本节的完整版代码位于在本示例中, 使用WebRTC的数据通道(data channel), 将一个接着上一节的代码, 将
本节内容
- WebRTC客户端(peers)之间如何传递数据。
本节的完整版代码位于 step-03
文件夹中。
修改HTML代码
在本示例中, 使用WebRTC的数据通道(data channel), 将一个 textarea
的内容, 传递给同页面中的另一个 textarea
。这个demo本身没什么实用价值, 主要目的是展示怎样使用WebRTC来传输数据和视频。
接着上一节的代码, 将 index.html
文件中的 video
和 button
元素移除, 并替换为以下代码:
<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), 这是容易造成困扰的地方!
关于约束和配置项的更多信息, 请参考:
练习与实践
- WebRTC数据通道使用的协议为: SCTP , 在默认配置时, 具备了可靠/顺序的消息传输能力. 如果 RTCDataChannel 需要更高的可靠性, 或者需要效率优先时怎么处理呢? —— 许多场景丢点数据无所谓, 比如视频聊天。
-
使用CSS来美化页面布局, 以及为 “dataChannelReceive” 对应的
textarea
添加 placeholder 属性。 - 在移动设备上进行测试。
知识点回顾
在本节课程中, 我们学习了:
- 在两个WebRTC客户端之间创建连接。
- 在客户端之间传输文本数据。
本节的完整版代码位于 step-03
文件夹中。
了解更多
- WebRTC data channels (a couple of years old, but still worth reading)
- Why was SCTP Selected for WebRTC’s Data Channel?
后续内容
我们学习了如何在同一页面中WebRTC客户端之间传输数据, 但不同设备的客户端之间如何进行数据传输呢? 当然这有一个前提: 客户端之间需要建立信令通道,来交换元数据消息. 在下一节我们会进行讲解!
原文链接: https://codelabs.developers.google.com/codelabs/webrtc-web/#5
翻译人员: 铁锚 - https://blog.csdn.net/renfufei
翻译日期: 2018年08月03日
以上所述就是小编给大家介绍的《[译]WebRTC基础实践 - 6. 通过RTCDataChannel传输数据》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- MySQL开源数据传输中间件架构设计实践
- [译]WebRTC基础实践 - 5.通过RTCPeerConnection传输流媒体视频
- 东进量子加密传输网关:为数据传输套上“金钟罩”
- 大规模数据传输,知易行难 — 数据传输与 ETL 平台的架构演进 原 荐
- 传输对象组装器模式
- 详解NFS文件传输服务
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。