WebRTC の概要

インストールとコードガイド

WebRTC (Web Real-Time Communication) は、Web ブラウザーやモバイル アプリのシンプルな API を介してリアルタイム通信を可能にするオープンソース テクノロジーです。中間サーバーを必要とせずにピア間でオーディオ、ビデオ、データを直接共有できるため、ビデオ会議、ライブ ストリーミング、ファイル共有などのアプリケーションに最適です。

このブログでは、次のトピックについて詳しく説明します:

1. WebRTC とは何ですか?
2. WebRTC の主な機能
3. WebRTC のインストール
4. 基本的な WebRTC アプリケーションの構築
5. コードを理解する
6. 結論

---

WebRTCとは何ですか?

WebRTC は、Web ブラウザー間のリアルタイムのオーディオ、ビデオ、およびデータ通信を可能にする一連の標準とプロトコルです。これには、いくつかの重要なコンポーネントが含まれています:

• getUserMedia: ユーザーのデバイスからオーディオおよびビデオ ストリームをキャプチャします。
• RTCPeerConnection: ピアツーピア接続を管理し、オーディオとビデオのストリーミングを処理します。
• RTCDataChannel: ピア間のリアルタイムのデータ転送を可能にします。

WebRTC の主な機能

1. リアルタイム通信: 遅延を最小限に抑えた低遅延通信。
2. ブラウザの互換性: ほとんどの最新の Web ブラウザ (Chrome、Firefox、Safari、Edge) でサポートされています。
3. プラグインは不要: 追加のプラグインやソフトウェアなしでブラウザで直接動作します。
4. 安全: 安全な通信のために暗号化を使用します。

WebRTC のインストール

WebRTC はクライアント側のテクノロジーであり、特定のサーバーのインストールは必要ありません。ただし、HTML および JavaScript ファイルを提供するには Web サーバーが必要です。ローカル開発の場合は、単純な 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
8b05045a5be5764f313ed5b9168a17e6
49099650ebdc5f3125501fa170048923
93f0f5c25f18dab9d176bd4f6de5d30e
    1fc2df4564f5324148703df3b6ed50c1
    4f2fb0231f24e8aef524fc9bf9b9874f
    b2386ffb911b14667cb8f0f91ea547a7WebRTC Example6e916e0f7d1e588d4f442bf645aedb2f
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
    4a249f0d628e2318394fd9b75b4636b1WebRTC Example473f0a7621bec819994bb5020d29372a
    886e14ee2bf2e07562cf694bdd704993a6a9c6d3f311dabb528ad355798dc27d
    fc3cb8de349c32412815ef2a53a0fb7ca6a9c6d3f311dabb528ad355798dc27d
    e803653d6fd93b3996ebf69dd59af1622cacc6d41bbb37262a98f745aa00fbf0
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e
```

基本的な WebRTC アプリケーションの構築

簡単なピアツーピアのビデオ通話アプリケーションを作成します。この例では、2 つのブラウザ タブを使用してピア接続をシミュレートします。

コードの説明

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. オファーとアンサー: SDP のオファーとアンサーは、接続のネゴシエーションに使用されます。
4. ICE 候補: ICE 候補は、ピア間の接続を確立するために使用されます。

以上がWebRTC の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。