WebRTC（Web Real-Time Communication）是一種支持瀏覽器和移動設備進行實時音視頻通信的技術，無需安裝插件或額外的軟件。它是一個開放標準，最初由Google推動，并被W3C（萬維網聯盟）和IETF（互聯網工程任務組）標準化。
WebRTC 的核心功能：
-
音視頻采集（獲取本地攝像頭、麥克風）
-
音視頻編解碼（支持VP8/VP9/H.264等視頻編碼，Opus/G.711等音頻編碼）
-
P2P（點對點）傳輸（通過UDP和NAT穿透技術進行低延遲通信）
-
數據通道（DataChannel）（可用于傳輸文本、文件等數據）
WebRTC 的主要 API：
-
getUserMedia：獲取本地音視頻流 -
RTCPeerConnection：建立點對點連接 -
RTCDataChannel：進行P2P數據傳輸
WebRTC 的應用場景：
-
視頻通話（如 Google Meet、Zoom）
-
直播推流（結合 WebRTC + Media Server）
-
遠程協作（如 Google Docs 的多人編輯）
-
在線教育、遠程醫療
-
物聯網（IoT）設備的遠程控制?
在 Vue 2 前端項目中使用 WebRTC，可以實現視頻通話、音視頻流傳輸、屏幕共享等功能。以下是 WebRTC 在 Vue 2 項目中的基本實現步驟：
1. WebRTC 基本概念
WebRTC 提供了三個核心 API：
-
getUserMedia()：獲取攝像頭、麥克風權限 -
RTCPeerConnection：建立 P2P 連接，傳輸音視頻 -
RTCDataChannel：傳輸文本、文件等數據
創建 WebRTC.vue 組件
<template><div><h2>WebRTC 視頻采集</h2><video ref="localVideo" autoplay playsinline></video><button @click="startCamera">啟動攝像頭</button><button @click="stopCamera">關閉攝像頭</button></div>
</template><script>
export default {data() {return {localStream: null,};},methods: {async startCamera() {try {this.localStream = await navigator.mediaDevices.getUserMedia({video: true,audio: true,});this.$refs.localVideo.srcObject = this.localStream;} catch (error) {console.error("獲取攝像頭失敗：", error);}},stopCamera() {if (this.localStream) {this.localStream.getTracks().forEach(track => track.stop());this.localStream = null;}},},
};
</script>
? 效果：點擊按鈕可以打開/關閉攝像頭，并在 <video> 組件中顯示
實現 WebRTC P2P 連接
如果想要實現點對點（P2P）通信，需要使用 RTCPeerConnection，并結合 WebSocket / Socket.io 進行信令交換。
創建 PeerConnection.vue 組件
<template><div><h2>WebRTC P2P 視頻通話</h2><video ref="localVideo" autoplay playsinline></video><video ref="remoteVideo" autoplay playsinline></video><button @click="startCall">開始通話</button></div>
</template><script>
export default {data() {return {localStream: null,peerConnection: null,remoteStream: null,};},methods: {async startCall() {// 1. 獲取本地視頻流this.localStream = await navigator.mediaDevices.getUserMedia({video: true,audio: true,});this.$refs.localVideo.srcObject = this.localStream;// 2. 創建 RTCPeerConnectionthis.peerConnection = new RTCPeerConnection();// 3. 添加本地流到 PeerConnectionthis.localStream.getTracks().forEach(track => {this.peerConnection.addTrack(track, this.localStream);});// 4. 監聽遠程流this.peerConnection.ontrack = event => {if (!this.remoteStream) {this.remoteStream = new MediaStream();this.$refs.remoteVideo.srcObject = this.remoteStream;}this.remoteStream.addTrack(event.track);};// 5. 創建 offer（本地 SDP）const offer = await this.peerConnection.createOffer();await this.peerConnection.setLocalDescription(offer);console.log("本地 SDP:", offer);// 這里需要使用 WebSocket / Socket.io 發送 SDP 給遠程端},},
};
</script>
? 效果：
-
獲取本地視頻流，并在
<video>中播放 -
創建 WebRTC 連接，并監聽遠程視頻流
-
生成 SDP（用于信令交換）
信令服務器（使用 WebSocket）
WebRTC 需要信令服務器來交換 SDP 和 ICE 候選信息。可以使用 WebSocket 或 Socket.io 來實現：
后端（Node.js + WebSocket）
const WebSocket = require("ws");
const server = new WebSocket.Server({ port: 3000 });server.on("connection", ws => {ws.on("message", message => {console.log("收到消息：", message);server.clients.forEach(client => {if (client !== ws && client.readyState === WebSocket.OPEN) {client.send(message);}});});
});
前端（Vue 使用 WebSocket 發送 SDP）
const socket = new WebSocket("ws://localhost:3000");this.peerConnection.onicecandidate = event => {if (event.candidate) {socket.send(JSON.stringify({ candidate: event.candidate }));}
};socket.onmessage = async message => {const data = JSON.parse(message.data);if (data.sdp) {await this.peerConnection.setRemoteDescription(data.sdp);if (data.sdp.type === "offer") {const answer = await this.peerConnection.createAnswer();await this.peerConnection.setLocalDescription(answer);socket.send(JSON.stringify({ sdp: answer }));}} else if (data.candidate) {await this.peerConnection.addIceCandidate(data.candidate);}
};
? 效果：
-
通過 WebSocket 服務器交換 SDP（Offer & Answer）
-
傳遞 ICE 候選信息，實現 P2P 連接
3. WebRTC 進階功能
? 屏幕共享
const stream = await navigator.mediaDevices.getDisplayMedia({ video: true });
this.$refs.localVideo.srcObject = stream;
? 數據通道（P2P 傳輸文本/文件）
const dataChannel = peerConnection.createDataChannel("chat");
dataChannel.onmessage = event => console.log("收到消息：", event.data);
dataChannel.send("Hello WebRTC!");
4. WebRTC 在項目中的應用，例如風電項目中的應用
你可以用 WebRTC 實現：
-
風場監控：遠程視頻直播，實時監測風機狀態
-
遠程協作：風機運維人員可以通過 WebRTC 進行視頻通話，遠程指導維修
-
數據傳輸：通過 WebRTC
RTCDataChannel低延遲傳輸風機運行數據
總結
| 需求 | 方案 |
|---|---|
| 采集攝像頭 | getUserMedia() |
| P2P 音視頻 | RTCPeerConnection |
| 遠程信令 | WebSocket / Socket.io |
| 屏幕共享 | getDisplayMedia() |
| 數據傳輸 | RTCDataChannel |
P2P是什么？
P2P（Peer-to-Peer，點對點）是一種去中心化的通信模式，指的是兩個或多個設備可以直接通信，而無需依賴中間服務器。在 WebRTC 中，P2P 主要用于實現點對點音視頻通話、文件傳輸等功能。
P2P vs 傳統客戶端-服務器模式
| 模式 | 特點 | 示例 |
|---|---|---|
| 客戶端-服務器（Client-Server） | 需要一個中心服務器來轉發數據 | HTTP 請求、WebSocket 聊天、直播服務器 |
| P2P（Peer-to-Peer） | 設備之間直接通信，無需服務器轉發 | WebRTC 視頻通話、種子下載（BitTorrent） |
? P2P 的優點：
-
低延遲：數據直接傳輸，無需繞服務器
-
節省帶寬：不占用服務器流量
-
去中心化：無須依賴單點服務器
? P2P 的挑戰：
-
NAT 穿透：有些網絡環境（如 4G、WiFi）可能會阻止 P2P 連接
-
信令交換：需要 WebSocket / Socket.io 來建立連接
📌 P2P 在 WebRTC 中的作用
WebRTC 通過 RTCPeerConnection 實現 P2P 連接：
-
本地設備 獲取攝像頭/麥克風數據
-
信令服務器 交換 SDP 和 ICE 候選信息
-
建立 P2P 連接，直接傳輸音視頻流
示例：P2P 連接代碼
const peer = new RTCPeerConnection();// 監聽 ICE 候選信息
peer.onicecandidate = event => {if (event.candidate) {sendToServer({ candidate: event.candidate });}
};// 監聽遠程視頻流
peer.ontrack = event => {document.querySelector("#remoteVideo").srcObject = event.streams[0];
};// 發送音視頻流
navigator.mediaDevices.getUserMedia({ video: true, audio: true }).then(stream => {document.querySelector("#localVideo").srcObject = stream;stream.getTracks().forEach(track => peer.addTrack(track, stream));});
?
? 實現效果：
-
設備 A 和 B 通過 WebRTC 直接交換音視頻數據，無需服務器轉發
-
服務器只負責信令交換，實際音視頻數據是P2P 直連的
