ホームページ > 記事 > バックエンド開発 > PHP および WebRTC プロトコルを使用してリアルタイムのオーディオおよびビデオ通信を行う方法

PHP および WebRTC プロトコルを使用してリアルタイムのオーディオおよびビデオ通信を行う方法

PHPzオリジナル: 2023-08-01 15:21:381286ブラウズ

今日のインターネット時代において、リアルタイムのオーディオおよびビデオ通信は人々の日常生活に不可欠な部分となっています。 WebRTC (Web Real-Time Communication) テクノロジは、オープンなリアルタイム通信標準として、Web アプリケーションにリアルタイムのオーディオおよびビデオ通信を組み込むための強力なサポートを提供します。この記事では、リアルタイムのオーディオおよびビデオ通信に PHP および WebRTC プロトコルを使用する方法を紹介し、対応するコード例を示します。

WebRTC の概要
WebRTC は、Google が開発、推進しているリアルタイム通信標準であり、Web ブラウザ上で音声、ビデオ、データのリアルタイム伝送を実現できます。これは標準ネットワークプロトコル (HTTP や WebSocket など) と JavaScript API に基づいており、追加のプラグインや拡張機能を必要とせずに、P2P テクノロジを介したリアルタイムデータ送信を可能にします。
準備作業
PHP と WebRTC を使用してリアルタイムの音声およびビデオ通信を開始する前に、いくつかの準備作業を行う必要があります。まず、最新バージョンの PHP と Web サーバー (Apache や Nginx など) がインストールされていることを確認します。次に、Google Chrome や Mozilla Firefox など、WebRTC をサポートするブラウザも必要になります。
サーバーのセットアップ
リアルタイムの音声およびビデオ通信を実現するには、2 者間のシグナリングを調整して送信するシグナリングサーバーを構築する必要があります。 PHP では、WebSocket テクノロジーを使用してシグナリングサーバーを実装できます。

以下は、Ratchet WebSocket ライブラリを使用して実装された単純なシグナリングサーバーの例です:

<?php

use RatchetMessageComponentInterface;
use RatchetConnectionInterface;

require 'vendor/autoload.php';

class SignalingServer implements MessageComponentInterface
{
    protected $clients;

    public function __construct()
    {
        $this->clients = new SplObjectStorage;
    }

    public function onOpen(ConnectionInterface $conn)
    {
        $this->clients->attach($conn);
    }

    public function onMessage(ConnectionInterface $from, $msg)
    {
        foreach ($this->clients as $client) {
            if ($client !== $from) {
                $client->send($msg);
            }
        }
    }

    public function onClose(ConnectionInterface $conn)
    {
        $this->clients->detach($conn);
    }

    public function onError(ConnectionInterface $conn, Exception $e)
    {
        $conn->close();
    }
}

$server = RatchetServerIoServer::factory(
    new RatchetHttpHttpServer(
        new RatchetWebSocketWsServer(
            new SignalingServer()
        )
    ),
    8080
);

$server->run();

Ratchet WebSocket ライブラリは、WebSocket を実装するために上記のコードで使用されていることに注意してください。サーバ。 Composer を使用してライブラリをインストールできます。

WebRTC アプリケーションの作成
クライアント側では、WebRTC テクノロジを使用して、リアルタイムのオーディオおよびビデオ通信アプリケーションを作成します。 HTML5 と JavaScript を通じて実現できます。

以下は、単純な WebRTC アプリケーションのコード例です。

<!DOCTYPE html>
<html>
<head>
    <title>WebRTC Video Chat</title>
</head>
<body>
    <video id="localVideo" autoplay></video>
    <video id="remoteVideo" autoplay></video>
    
    <button id="startButton">Start Call</button>
    <button id="hangupButton">Hang Up</button>
    
    <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
    <script>
        const startButton = document.getElementById('startButton');
        const hangupButton = document.getElementById('hangupButton');
        const localVideo = document.getElementById('localVideo');
        const remoteVideo = document.getElementById('remoteVideo');
        let localStream;
        let peerConnection;

        startButton.addEventListener('click', startCall);
        hangupButton.addEventListener('click', hangup);

        async function startCall() {
            localStream = await navigator.mediaDevices.getUserMedia({audio: true, video: true});
            localVideo.srcObject = localStream;
            
            const configuration = {iceServers: [{urls: 'stun:stun.l.google.com:19302'}]};
            peerConnection = new RTCPeerConnection(configuration);
            peerConnection.addEventListener('icecandidate', handleIceCandidate);
            peerConnection.addEventListener('track', handleRemoteStreamAdded);
            
            localStream.getTracks().forEach(track => {
                peerConnection.addTrack(track, localStream);
            });

            const offer = await peerConnection.createOffer();
            await peerConnection.setLocalDescription(offer);
            
            // 将信令通过WebSocket发送给信令服务器
            sendSignaling(JSON.stringify(offer));
        }

        async function handleIceCandidate(event) {
            if (event.candidate) {
                sendSignaling(JSON.stringify({ice: event.candidate}));
            }
        }

        async function handleRemoteStreamAdded(event) {
            remoteVideo.srcObject = event.streams[0];
        }

        async function hangup() {
            localStream.getTracks().forEach(track => {
                track.stop();
            });

            peerConnection.close();
            
            // 发送挂断信令给信令服务器
            sendSignaling(JSON.stringify({hangup: true}));
        }

        function sendSignaling(message) {
            const ws = new WebSocket('ws://localhost:8080');
            ws.addEventListener('open', () => {
                ws.send(message);
                ws.close();
            });
        }
    </script>
</body>
</html>

上記のコードでは、まず getUserMedia API を通じてローカルのオーディオおよびビデオストリームを取得し、それを表示します。ページプレゼンテーションを作成します。次に、RTCPeerConnection オブジェクトを作成し、icecandidate とそのオブジェクトの追跡イベントをリッスンしました。 createOffer メソッドを通じて、デバイス間で交換するための SDP (セッション記述プロトコル) を生成し、setLocalDescription メソッドを通じてローカルの説明を設定します。最後に、この SDP シグナリングをシグナリングサーバーに送信します。

オーディオおよびビデオ通信の実装
2 つのデバイス間でオーディオおよびビデオ通信を実現するには、シグナリングサーバーと WebRTC アプリケーションにコードを追加する必要があります。以下は簡単な実装例です:

シグナリングサーバー:

<?php

// ...

public function onMessage(ConnectionInterface $from, $msg)
{
    $data = json_decode($msg);
    
    if (isset($data->sdp)) {
        // 处理SDP信令（包括offer和answer）
        foreach ($this->clients as $client) {
            if ($client !== $from) {
                $client->send($msg);
            }
        }
    } elseif (isset($data->ice)) {
        // 处理ICE候选信令
        foreach ($this->clients as $client) {
            if ($client !== $from) {
                $client->send($msg);
            }
        }
    } elseif (isset($data->hangup)) {
        // 处理挂断信令
        foreach ($this->clients as $client) {
            if ($client !== $from) {
                $client->send($msg);
                $this->onClose($client);
            }
        }
    }
}

// ...

WebRTC アプリケーション:

// ...

async function handleSignalingMessage(message) {
    const data = JSON.parse(message);

    if (data.sdp) {
        await peerConnection.setRemoteDescription(new RTCSessionDescription(data.sdp));

        if (data.sdp.type === 'offer') {
            const answer = await peerConnection.createAnswer();
            await peerConnection.setLocalDescription(answer);

            // 发送回答信令给信令服务器
            sendSignaling(JSON.stringify(answer));
        }
    } else if (data.ice) {
        await peerConnection.addIceCandidate(new RTCIceCandidate(data.ice));
    } else if (data.hangup) {
        // 处理挂断信令
        hangup();
    }
}

// ...

デバイス A がシグナリングサーバー経由でデバイス B への通話を開始するときデバイス B がオファーシグナリングを含む WebSocket メッセージを受信するとき。デバイス B は、リモート記述を設定することによって通話要求を受け入れ、独自の応答シグナリングを生成し、それをデバイス A に送り返します。

デバイス A がデバイス B から応答シグナリングを受信すると、リモート記述を設定し、デバイス B との接続の確立を開始します。 ICE 候補シグナリングを交換することにより、デバイス A とデバイス B は最適な通信パスを見つけます。

デバイス A またはデバイス B が通話を終了すると、シグナリングサーバーにハングアップシグナリングが送信され、相手との接続が切断されます。

概要
PHP および WebRTC プロトコルを使用すると、リアルタイムの音声およびビデオ通信を簡単に実現できます。この記事では、WebRTC の基本原理と使用法について学び、対応するコード例を提供しました。この記事の紹介が、リアルタイムのオーディオおよびビデオ通信に PHP および WebRTC プロトコルを使用する方法を読者が理解するのに役立つことを願っています。

以上がPHP および WebRTC プロトコルを使用してリアルタイムのオーディオおよびビデオ通信を行う方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：PHP 経由でリモート FTP サーバーの可用性を確認する方法次の記事：PHP 経由でリモート FTP サーバーの可用性を確認する方法

続きを見る