Verwendung des PHP- und WebRTC-Protokolls für Echtzeit-Audio- und Videokommunikation-PHP-Tutorial-php.cn

So verwenden Sie PHP- und WebRTC-Protokolle für Echtzeit-Audio- und Videokommunikation

Im heutigen Internetzeitalter ist Echtzeit-Audio- und Videokommunikation zu einem unverzichtbaren Bestandteil des täglichen Lebens der Menschen geworden. Die WebRTC-Technologie (Web Real-Time Communication) bietet als offener Echtzeit-Kommunikationsstandard leistungsstarke Unterstützung für die Einbettung von Echtzeit-Audio- und Videokommunikation in Webanwendungen. In diesem Artikel wird die Verwendung des PHP- und WebRTC-Protokolls für die Audio- und Videokommunikation in Echtzeit vorgestellt und entsprechende Codebeispiele bereitgestellt.

Einführung in WebRTC
WebRTC ist ein von Google entwickelter und geförderter Echtzeit-Kommunikationsstandard, der die Echtzeitübertragung von Audio, Video und Daten in Webbrowsern realisieren kann. Es basiert auf Standard-Netzwerkprotokollen (wie HTTP und WebSocket) und der JavaScript-API und ermöglicht die Echtzeit-Datenübertragung durch P2P-Technologie ohne zusätzliche Plug-Ins oder Erweiterungen.
Vorbereitung
Bevor wir PHP für die Echtzeit-Audio- und Videokommunikation mit WebRTC verwenden, müssen wir einige Vorbereitungen treffen. Stellen Sie zunächst sicher, dass Sie die neueste PHP-Version und einen Webserver (z. B. Apache oder Nginx) installiert haben. Dann benötigen Sie auch einen Browser, der WebRTC unterstützt, wie zum Beispiel Google Chrome oder Mozilla Firefox.
Richten Sie den Server ein
Um eine Audio- und Videokommunikation in Echtzeit zu erreichen, müssen wir einen Signalisierungsserver aufbauen, um die Signalisierung zwischen den beiden Parteien zu koordinieren und zu übertragen. In PHP kann der Signalisierungsserver mithilfe der WebSocket-Technologie implementiert werden.

Das Folgende ist ein Beispiel für einen einfachen Signalisierungsserver, der mithilfe der Ratchet WebSocket-Bibliothek implementiert wurde:

<?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();

Nach dem Login kopieren

Bitte beachten Sie, dass die Ratchet WebSocket-Bibliothek im obigen Code zur Implementierung des WebSocket-Servers verwendet wird. Sie können Composer verwenden, um die Bibliothek zu installieren.

WebRTC-Anwendung erstellen
Auf der Clientseite werden wir WebRTC-Technologie verwenden, um Echtzeit-Audio- und Videokommunikationsanwendungen zu erstellen. Kann durch HTML5 und JavaScript erreicht werden.

Das Folgende ist ein Codebeispiel einer einfachen WebRTC-Anwendung:

<!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>

Nach dem Login kopieren

Im obigen Code erhalten wir zunächst den lokalen Audio- und Videostream über die getUserMedia-API und zeigen ihn auf der Seite an. Dann haben wir ein RTCPeerConnection-Objekt erstellt und den Icecandidate abgehört und Ereignisse dafür verfolgt. Über die Methode „createOffer“ generieren wir ein SDP (Session Description Protocol) für den Austausch zwischen Geräten und legen die lokale Beschreibung über die Methode „setLocalDescription“ fest. Abschließend senden wir diese SDP-Signalisierung an den Signalisierungsserver.

Audio- und Videokommunikation implementieren
Um die Audio- und Videokommunikation zwischen zwei Geräten zu realisieren, müssen wir dem Signalisierungsserver und der WebRTC-Anwendung zusätzlichen Code hinzufügen. Das Folgende ist ein einfaches Implementierungsbeispiel:

Signalisierungsserver:

<?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);
            }
        }
    }
}

// ...

Nach dem Login kopieren

WebRTC-Anwendung:

// ...

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();
    }
}

// ...

Nach dem Login kopieren

Wenn Gerät A über den Signalisierungsserver einen Anruf an Gerät B initiiert, erhält Gerät B einen WebSocket mit Angebotssignalisierungsinformationen. Gerät B nimmt die Anrufanforderung durch Setzen der Remote-Beschreibung an und generiert eine eigene Antwortsignalisierung, die es dann an Gerät A zurücksendet.

Sobald Gerät A die Antwortsignalisierung von Gerät B erhält, legt es seine Remote-Beschreibung fest und beginnt mit dem Aufbau einer Verbindung mit Gerät B. Durch den Austausch der ICE-Kandidatensignalisierung finden Gerät A und Gerät B einen optimalen Kommunikationspfad.

Wenn Gerät A oder Gerät B den Anruf beendet, senden sie eine Auflegesignalisierung an den Signalisierungsserver und schließen die Verbindung mit dem anderen Teilnehmer.

Zusammenfassung
Durch die Verwendung der PHP- und WebRTC-Protokolle können wir problemlos Audio- und Videokommunikation in Echtzeit erreichen. In diesem Artikel haben wir die Grundprinzipien und die Verwendung von WebRTC kennengelernt und entsprechende Codebeispiele bereitgestellt. Ich hoffe, dass die Einleitung dieses Artikels den Lesern helfen kann, zu verstehen, wie die Protokolle PHP und WebRTC für die Audio- und Videokommunikation in Echtzeit verwendet werden.

Das obige ist der detaillierte Inhalt vonVerwendung des PHP- und WebRTC-Protokolls für Echtzeit-Audio- und Videokommunikation. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!