安裝和代碼指南

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

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

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

什麼是WebRTC？

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

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

WebRTC 的主要特性

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

安裝WebRTC

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

先決條件

• Node.js：設定本機伺服器。
• 現代 Web 瀏覽器：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



    
WebRTC Example
    
```

建立基本的 WebRTC 應用程式

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

程式碼說明

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

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

3. 交換報價和答案：使用SDP（會話描述協定）交換連接詳細資訊。

4. 處理 ICE Candidates：交換 ICE Candidates 以建立連結。

建立一個 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 Candidates：ICE Candidates 用於在同業之間建立連結。