HTML - Web RTC: 改變網頁實時通訊的革命性技術

你好，有志於網頁開發的各位！我很興奮能成為你們在Web RTC世界中的引路人。作為一個教了超過十年計算機科學的人，我可以告訴你們，Web RTC是近年來最引人入勝的技術之一。它就像魔法一樣 - 但我們將要掀開序幕，看看它到底是怎麼運作的！

HTML - Web RTC

Web RTC是什麼？

在我們深入細節之前，讓我們先了解Web RTC到底是什麼。Web RTC代表著Web實時通訊。它是一項強大的技術，能讓網絡瀏覽器和移動應用程序進行直接的點對點通信。想像一下，能夠在瀏覽器中直接進行視頻聊天、分享屏幕或傳輸文件，而不需要任何插件或額外軟件。這就是Web RTC的力量！

現在，讓我們挽起袖子，深入了解Web RTC的核心組成部分。

MediaStream：捕獲音頻和視頻

Web RTC的核心是MediaStream API，它讓我們能夠從你的設備捕獲音頻和視頻流。

獲取用戶媒體

讓我們從一個如何訪問用戶相機和麥克風的簡單例子開始：

navigator.mediaDevices.getUserMedia({ audio: true, video: true })
.then(function(stream) {
var video = document.querySelector('video');
video.srcObject = stream;
video.onloadedmetadata = function(e) {
video.play();
};
})
.catch(function(err) {
console.log("發生錯誤: " + err);
});

讓我們分解一下：

我們使用navigator.mediaDevices.getUserMedia()請求訪問用戶的相機和麥克風。
我們傳遞一個對象，指定我們想要音頻和視頻。
如果成功，我們會得到一個流，我們可以將其附加到視頻元素上。
如果有錯誤（例如，如果用戶拒絕授權），我們會捕獲它並記錄下來。

記住，在訪問用戶的媒體設備之前，總是在UI中禮貌地請求允許。沒有人喜歡一個愛打聽的應用程序！

约束條件：精細調整您的媒體

有時候，您可能想要對您捕獲的媒體有更多的控制。這就是約束條件的作用。以下是一個例子：

const hdConstraints = {
video: {width: {min: 1280}, height: {min: 720}},
audio: true
};

navigator.mediaDevices.getUserMedia(hdConstraints)
.then(function(stream) {
video.srcObject = stream;
})
.catch(function(error) {
console.log('錯誤: ', error);
});

在這個例子中，我們指定我們想要的視頻最小解析度為720p。這就像告訴咖啡師你想要怎樣的咖啡一樣！

會話控制、網絡和媒體信息

現在我們已經有了媒體流，讓我們看看Web RTC是如何處理建立和管理連接的細節。

RTCPeerConnection：Web RTC的核心

RTCPeerConnection是Web RTC中的明星。它處理完整的點對點連接，包括信號處理、編解碼器處理、點對點通信、安全性和帶寬管理。

以下是一個設置對等連接的基本示例：

var pc = new RTCPeerConnection();

navigator.mediaDevices.getUserMedia({video: true, audio: true})
.then(stream => {
stream.getTracks().forEach(track => pc.addTrack(track, stream));
});

pc.onicecandidate = event => {
if (event.candidate) {
// 將候選者發送到遠程對等方
}
};

pc.ontrack = event => {
// 將接收到的軌道附加到視頻元素
document.querySelector('video').srcObject = event.streams[0];
};

這段腚本做了幾件關鍵的事情：

創建一個新的RTCPeerConnection。
獲取用戶媒體，並將所有軌道添加到對等連接中。
為ICE候選者和來襲軌道設置處理程序。

信號：無形的手勢

Web RTC需要一種方式讓對等方協調通信。這個過程稱為信號，而且不是由Web RTC本身處理的。你需要使用websockets或其他方法來實現它。以下是一個簡化的例子：

// 在主叫方
pc.createOffer()
.then(offer => pc.setLocalDescription(offer))
.then(() => {
// 通過信號通道將發議送到另一個對等方
});

// 在被叫方
// 當從信號通道接收到發議
pc.setRemoteDescription(receivedOffer)
.then(() => pc.createAnswer())
.then(answer => pc.setLocalDescription(answer))
.then(() => {
// 通過信號通道將回答發送回去
});

這個過程就像一個正式的舞蹈 - 有很多來回，但一旦大家都熟悉了步驟，真正的樂趣就開始了！

DataChannel：超越音頻和視頻

Web RTC不僅僅是關於音頻和視頻。你可以使用DataChannels發送任意數據。以下是如何設置一個的例子：

var dataChannel = pc.createDataChannel("myDataChannel");

dataChannel.onopen = function(event) {
dataChannel.send("Hello, world!");
};

dataChannel.onmessage = function(event) {
console.log("收到: " + event.data);
};

DataChannels非常強大。你可以用它們來構建實時遊戲、協作工具，甚至是點對點文件共享系統！

方法表格

這裡是我們討論過的一些關鍵Web RTC方法的便捷表格：

方法	描述
`navigator.mediaDevices.getUserMedia()`	提示用戶授權使用媒體輸入
`RTCPeerConnection()`	創建一個新的對等連接
`addTrack()`	將新的媒體軌道添加到軌道集合
`createOffer()`	為開始新的WebRTC連接創建SDP發議
`setLocalDescription()`	設置連接的本地描述
`setRemoteDescription()`	設置連接的遠程描述
`createAnswer()`	為從遠程對等方收到的發議創建SDP回答
`createDataChannel()`	創建一個新的數據通道

結論

Web RTC是一項正在改變我們對網絡實時通信看法的革命性技術。我們只是浅嘗即止，但我希望這個簡介能夠激發你的好奇心，並為你提供一個堅實的基礎來建立。

記住，最好的學習方法是實踐。所以，去嘗試這些例子，拆解它們，並創建一些令人驚艷的東西。誰知道呢？你的下一個項目可能會成為網絡通信的下一個大事件！

祝賀編碼，願你的數據流總是清晰，連接總是穩定！

Credits: Image by storyset