你将学到
本节的所有内容位于 step-03 文件夹
更新HTML代码
在本节,你将使用WebRTC数据通道(RTCDataChannel)在同一个页面的两个textarea元素之间传输文本。这不是非常实用,但是能演示怎怎样使用WebRTC来共享数据(类似于上节视频流传输)。
移出video和button标签,将 index.html 使用如下HTML代码替换:
1
2
3
4
5
6
7
8
9
|
<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将用于输入text,另一个如peer之间传输流一样展示text。
index.html 内容如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
<!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
尝试peer之间传输数据:打开 index.html, 点击 Start 建立peer之间连接,在左边的textarea
内输入一些文本,然后点击 Send 使用WebRTC数据通道传输文本。
How it works?
本示例代码使用RTCPeerConnection
和RTCDataChannel
来完成文本消息的交换。本示例的代码与RTCPeerConnection
例子的代码有很大部分相同。
sendData()
和createConnection()
函数包含了大部分新的代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
|
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()方法和消息事件。
注意使用的dataConstraint
。数据通道可以配置为使用不同类型的数据分享–例如:可靠传输优先于性能。你可以在Mozilla Developer Network查找更多该选项的信息。
三中类型的约束选项
比较容易混淆。
不同类型的WebRTC调用设置选项通常都称为“约束(constraints)”。
发现更多关于约束和选项的内容:
加分项(Bonus points)
- WebRTC数据通道使用 SCTP 协议,可靠和有序数据传输默认开启。RTCDataChannel何时需要提供可靠的数据传递,何时性能更重要——即使这意味着丢失一些数据?
- 使用CSS来改善页面布局,将占位符属性添加到
dataChannelReceive
文本区域。
- 在移动设备上测试页面。
Find out more
下一步
你已经学习了如何在同一页面的peer之间交换数据,但是怎样在不同的机器上实现这些呢?首先,你需要建立一个信令通道来交换metadata消息。下一节见分晓。
文章作者
李龙
上次更新
2021-04-19
许可协议
知识共享署名-非商业性使用 4.0 国际许可协议