通過WebRTC進行實時通訊- 使用RTCDataChannel交換資料

WebRTC · 發表 2018-10-17 20:01:09

摘要：目錄介紹概述獲取樣例程式碼從webcam獲取視訊流通過RTCPeerConnection傳輸視訊使用RTCDataChannel交換資料我們將學習如何在 WebRTC端點...

我們將學習

如何在 WebRTC端點之間進行資料交換。

這步的完整版本在 step-03 目錄下。

更新 HTML

對於這一步，我們將使用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的語法估計設定成與 Socket/">WebSocket 相似，俱有 send() 方法和message 事件。注意 dataConstraint 的使用。資料channel能配置成開啟不同型別的資料共享 -- 例如，優先考慮可靠的交付而不是效能。在 API/RTCPeerConnection/createDataChannel" target="_blank" rel="nofollow,noindex">Mozilla Developer Network 你能發現更多關於選項的資訊

三種類型的約束

不同型別的WebRTC呼叫設定選項通常都被稱為“約束”。

瞭解有關約束和選項的更多資訊：

點滴

SCTP ,它是WebRTC 資料通道使用的協議, 預設是可考和有序的資料投遞。何時RTCDataChannel可能需要提供可靠的資料傳輸，何時效能可能更重要 - 即使這意味著丟失一些資料?
使用CSS改進頁面佈局，並將“佔位符”屬性新增到“dataChannelReceive”textarea 。
在移動裝置上測試本頁。

我們學到了什麼

在這一步我們學習瞭如何：

在兩個 WebRTC 端點之間建立連線。
在端點之間交換文字資料。

這一步完整的版本在 step-03目錄下。

查詢更多的資訊

WebRTC data channels (很多年了，但仍然值得讀)
Why was SCTP Selected for WebRTC's Data Channel?

下一步

您已經學會了如何在同一頁面上的端點之間交換資料，但是如何在不同的機器之間進行此操作？

首先，您需要設定信令通道來交換元資料訊息。瞭解下一步的工作方式！