WebRTC簡介

安裝和代碼指南

WebRTC（Web 即時通訊）是一種開源技術，可透過 Web 瀏覽器和行動應用程式中的簡單 API 進行即時通訊。它允許在點之間直接共享音訊、視訊和數據，無需中間伺服器，非常適合視訊會議、直播和檔案共享等應用程式。

在本部落格中，我們將深入探討以下主題：

1. 什麼是 WebRTC？
2. WebRTC 的主要特性
3. 安裝 WebRTC
4. 建立基本的 WebRTC 應用程式
5. 理解程式碼
6. 結論

---

什麼是WebRTC？

WebRTC 是一組標準和協議，可實現網路瀏覽器之間的即時音訊、視訊和數據通訊。它包括幾個關鍵組件：

• getUserMedia：從使用者裝置擷取音訊和視訊串流。
• RTCPeerConnection：管理點對點連線並處理音訊和視訊串流。
• RTCDataChannel：允許在點之間進行即時資料傳輸。

WebRTC 的主要特性

1. 即時通訊：低延遲通信，延遲最小。
2. 瀏覽器相容性：大多數現代網頁瀏覽器（Chrome、Firefox、Safari、Edge）都支援。
3. 無需外掛程式：直接在瀏覽器中工作，無需額外的插件或軟體。
4. 安全性：使用加密進行安全通訊。

安裝WebRTC

WebRTC 是一種客戶端技術，不需要安裝特定的伺服器。但是，您將需要一個 Web 伺服器來為您的 HTML 和 JavaScript 檔案提供服務。對於本機開發，您可以使用簡單的 HTTP 伺服器。

先決條件

• Node.js：設定本機伺服器。
• 現代網頁瀏覽器：Chrome、Firefox、Safari 或 Edge。

設定本地伺服器

1. 安裝 Node.js：從 nodejs.org 下載並安裝 Node.js。

2. 建立專案目錄：開啟終端機並為您的專案建立新目錄。
   

   mkdir webrtc-project
   cd webrtc-project
   

3. 初始化 Node.js 專案:
   

   npm init -y
   

4. 安裝 HTTP 伺服器:
   

   npm install --save http-server
   

5. 建立您的專案檔案:

   • index.html
   • main.js

建立一個包含以下內容的index.html檔案：

```html
8b05045a5be5764f313ed5b9168a17e6
49099650ebdc5f3125501fa170048923
93f0f5c25f18dab9d176bd4f6de5d30e
    1fc2df4564f5324148703df3b6ed50c1
    4f2fb0231f24e8aef524fc9bf9b9874f
    b2386ffb911b14667cb8f0f91ea547a7WebRTC Example6e916e0f7d1e588d4f442bf645aedb2f
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
    4a249f0d628e2318394fd9b75b4636b1WebRTC Example473f0a7621bec819994bb5020d29372a
    886e14ee2bf2e07562cf694bdd704993a6a9c6d3f311dabb528ad355798dc27d
    fc3cb8de349c32412815ef2a53a0fb7ca6a9c6d3f311dabb528ad355798dc27d
    e803653d6fd93b3996ebf69dd59af1622cacc6d41bbb37262a98f745aa00fbf0
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e
```

建立基本的 WebRTC 應用程式

我們將創建一個簡單的點對點視訊通話應用程式。此範例將使用兩個瀏覽器標籤來模擬對等連線。

程式碼說明

1. 捕捉本地影片：使用 getUserMedia 從使用者的相機擷取影片。

2. 建立對等連線：在本地和遠端對等點之間建立對等連線。

3. 交換要約與答案：使用SDP（會話描述協定）交換連線詳細資料。

4. 處理 ICE 候選：交換 ICE 候選以建立連線。

建立一個包含以下內容的 main.js 檔案：

const localVideo = document.getElementById('localVideo');
const remoteVideo = document.getElementById('remoteVideo');

let localStream;
let peerConnection;
const serverConfig = { iceServers: [{ urls: 'stun:stun.l.google.com:19302' }] };
const constraints = { video: true, audio: true };

// Get local video stream
navigator.mediaDevices.getUserMedia(constraints)
    .then(stream => {
        localStream = stream;
        localVideo.srcObject = stream;
        setupPeerConnection();
    })
    .catch(error => {
        console.error('Error accessing media devices.', error);
    });

function setupPeerConnection() {
    peerConnection = new RTCPeerConnection(serverConfig);

    // Add local stream to the peer connection
    localStream.getTracks().forEach(track => peerConnection.addTrack(track, localStream));

    // Handle remote stream
    peerConnection.ontrack = event => {
        remoteVideo.srcObject = event.streams[0];
    };

    // Handle ICE candidates
    peerConnection.onicecandidate = event => {
        if (event.candidate) {
            sendSignal({ 'ice': event.candidate });
        }
    };

    // Create an offer and set local description
    peerConnection.createOffer()
        .then(offer => {
            return peerConnection.setLocalDescription(offer);
        })
        .then(() => {
            sendSignal({ 'offer': peerConnection.localDescription });
        })
        .catch(error => {
            console.error('Error creating an offer.', error);
        });
}

// Handle signals (for demo purposes, this should be replaced with a signaling server)
function sendSignal(signal) {
    console.log('Sending signal:', signal);
    // Here you would send the signal to the other peer (e.g., via WebSocket)
}

function receiveSignal(signal) {
    if (signal.offer) {
        peerConnection.setRemoteDescription(new RTCSessionDescription(signal.offer))
            .then(() => peerConnection.createAnswer())
            .then(answer => peerConnection.setLocalDescription(answer))
            .then(() => sendSignal({ 'answer': peerConnection.localDescription }));
    } else if (signal.answer) {
        peerConnection.setRemoteDescription(new RTCSessionDescription(signal.answer));
    } else if (signal.ice) {
        peerConnection.addIceCandidate(new RTCIceCandidate(signal.ice));
    }
}

// Simulate receiving a signal from another peer
// This would typically be handled by a signaling server
setTimeout(() => {
    receiveSignal({
        offer: {
            type: 'offer',
            sdp: '...' // SDP offer from the other peer
        }
    });
}, 1000);

理解程式碼

1. 媒體擷取：navigator.mediaDevices.getUserMedia擷取本地視訊串流。
2. 對等連線設定：RTCPeerConnection 管理對等連線。
3. Offer and Answer：SDP Offer 和 Answer 用於協商連接。
4. ICE 候選人：ICE 候選者用於在同行之間建立連接。

以上是WebRTC簡介的詳細內容。更多資訊請關注PHP中文網其他相關文章！