Cara menggunakan protokol PHP dan WebRTC untuk komunikasi audio dan video masa nyata-tutorial php-php.cn

Cara menggunakan protokol PHP dan WebRTC untuk komunikasi audio dan video masa nyata

Dalam era Internet hari ini, komunikasi audio dan video masa nyata telah menjadi bahagian yang sangat diperlukan dalam kehidupan seharian orang ramai. Teknologi WebRTC (Web Real-Time Communication), sebagai standard komunikasi masa nyata terbuka, menyediakan sokongan yang kuat untuk membenamkan komunikasi audio dan video masa nyata dalam aplikasi Web. Artikel ini akan memperkenalkan cara menggunakan protokol PHP dan WebRTC untuk komunikasi audio dan video masa nyata, dan memberikan contoh kod yang sepadan.

Pengenalan kepada WebRTC
WebRTC ialah standard komunikasi masa nyata yang dibangunkan dan dipromosikan oleh Google, yang boleh merealisasikan penghantaran masa nyata audio, video dan data dalam penyemak imbas web. Ia berdasarkan protokol rangkaian standard (seperti HTTP dan WebSocket) dan API JavaScript, yang membolehkan penghantaran data masa nyata melalui teknologi P2P tanpa sebarang pemalam atau sambungan tambahan.
Persediaan
Sebelum kita mula menggunakan PHP untuk komunikasi audio dan video masa nyata dengan WebRTC, kita perlu melakukan beberapa persediaan. Mula-mula, pastikan anda mempunyai versi terkini PHP dan pelayan web (seperti Apache atau Nginx) dipasang. Kemudian, anda juga memerlukan penyemak imbas yang menyokong WebRTC, seperti Google Chrome atau Mozilla Firefox.
Sediakan pelayan
Untuk mencapai komunikasi audio dan video masa nyata, kita perlu membina pelayan isyarat untuk menyelaras dan menghantar isyarat antara kedua-dua pihak. Dalam PHP, pelayan isyarat boleh dilaksanakan menggunakan teknologi WebSocket.

Berikut ialah contoh pelayan isyarat mudah yang dilaksanakan menggunakan perpustakaan 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();

Salin selepas log masuk

Sila ambil perhatian bahawa perpustakaan Ratchet WebSocket digunakan dalam kod di atas untuk melaksanakan pelayan WebSocket. Anda boleh menggunakan Komposer untuk memasang perpustakaan.

Buat aplikasi WebRTC
Di sisi pelanggan, kami akan menggunakan teknologi WebRTC untuk mencipta aplikasi komunikasi audio dan video masa nyata. Boleh dicapai melalui HTML5 dan JavaScript.

Berikut ialah contoh kod aplikasi WebRTC ringkas:

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

Salin selepas log masuk

Dalam kod di atas, kami mula-mula mendapatkan strim audio dan video tempatan melalui API getUserMedia dan memaparkannya pada halaman. Kemudian, kami mencipta objek RTCPeerConnection dan mendengar calon ais dan menjejaki acara untuknya. Melalui kaedah createOffer, kami menjana SDP (Protokol Penerangan Sesi) untuk pertukaran antara peranti dan menetapkan perihalan setempat melalui kaedah setLocalDescription. Akhir sekali, kami menghantar isyarat SDP ini kepada pelayan isyarat.

Melaksanakan komunikasi audio dan video
Untuk merealisasikan komunikasi audio dan video antara dua peranti, kami perlu menambahkan beberapa kod tambahan pada pelayan isyarat dan aplikasi WebRTC. Berikut ialah contoh pelaksanaan mudah:

Pelayan isyarat:

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

Salin selepas log masuk

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

Salin selepas log masuk

Apabila peranti A memulakan panggilan ke peranti B melalui pelayan isyarat, peranti B akan menerima WebSocket yang mengandungi maklumat isyarat tawaran. Peranti B menerima permintaan panggilan dengan menetapkan perihalan jauh dan menjana isyarat jawapannya sendiri, yang kemudiannya dihantar semula ke Peranti A.

Sebaik sahaja peranti A menerima isyarat balasan daripada peranti B, ia akan menetapkan perihalan jauhnya dan mula membuat sambungan dengan peranti B. Dengan menukar isyarat calon ICE, peranti A dan peranti B akan mencari laluan komunikasi yang optimum.

Apabila peranti A atau peranti B menamatkan panggilan, mereka akan menghantar isyarat penutupan kepada pelayan isyarat dan menutup sambungan dengan pihak yang satu lagi.

Ringkasan
Dengan menggunakan protokol PHP dan WebRTC, kami boleh mencapai komunikasi audio dan video masa nyata dengan mudah. Dalam artikel ini, kami mempelajari tentang prinsip asas dan penggunaan WebRTC, dan memberikan contoh kod yang sepadan. Saya berharap pengenalan artikel ini dapat membantu pembaca memahami cara menggunakan protokol PHP dan WebRTC untuk komunikasi audio dan video masa nyata.

Atas ialah kandungan terperinci Cara menggunakan protokol PHP dan WebRTC untuk komunikasi audio dan video masa nyata. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!