[譯]WebRTC基礎實踐 - 6. 通過RTCDataChannel傳輸資料
本節內容
- 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
事件, 使用的語法和 Socket/">WebSocket類似。
請注意dataConstraint
的使用。資料通道可以通過配置, 來傳遞各種型別特徵的資料 —— 比如, 可靠性優先還是效率優先. 更多的資訊請參考MDN上的文件:API/RTCPeerConnection/createDataChannel" rel="nofollow,noindex" target="_blank">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日