WebRTC の概要-jsチュートリアル-php.cn

WebRTC の概要

PHPz

リリース： 2024-09-04 07:00:36

オリジナル

375 人が閲覧しました

Introduction to WebRTC

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

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

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

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

WebRTCとは何ですか?

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

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

WebRTC の主な機能

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

WebRTC のインストール

WebRTC はクライアント側のテクノロジーであり、特定のサーバーのインストールは必要ありません。ただし、HTML および JavaScript ファイルを提供するには Web サーバーが必要です。ローカル開発の場合は、単純な HTTP サーバーを使用できます。

前提条件

Node.js: ローカルサーバーをセットアップします。
最新の Web ブラウザ: Chrome、Firefox、Safari、または Edge。

ローカルサーバーのセットアップ

Node.js のインストール:nodejs.org から Node.js をダウンロードしてインストールします。
プロジェクトディレクトリの作成: ターミナルを開き、プロジェクトの新しいディレクトリを作成します。
```
mkdir webrtc-project
cd webrtc-project
```
ログイン後にコピー
Node.js プロジェクトを初期化する:
```
npm init -y
```
ログイン後にコピー
HTTP サーバーをインストールします:
```
npm install --save http-server
```
ログイン後にコピー
プロジェクトファイルを作成します:
- index.html
- main.js

次の内容を含むindex.html ファイルを作成します:

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebRTC Example</title>
</head>
<body>
    <h1>WebRTC Example</h1>
    <video id="localVideo" autoplay muted></video>
    <video id="remoteVideo" autoplay></video>
    <script src="main.js"></script>
</body>
</html>
```

ログイン後にコピー

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

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

コードの説明

ローカルビデオのキャプチャ: getUserMedia を使用して、ユーザーのカメラからビデオをキャプチャします。
ピア接続の作成: ローカルピアとリモートピアの間にピア接続を確立します。
オファーと回答を交換: SDP (セッション記述プロトコル) を使用して接続の詳細を交換します。
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);

ログイン後にコピー