对于这一步,我们将使用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呼叫设置选项通常都被称为“约束”。 了解有关约束和选项的更多信息:
在这一步我们学习了如何:
这一步完整的版本在 step-03目录下。
您已经学会了如何在同一页面上的端点之间交换数据,但是如何在不同的机器之间进行此操作? 首先,您需要设置信令通道来交换元数据消息。了解下一步的工作方式!