PHP および WebRTC プロトコルを使用してリアルタイムのオーディオおよびビデオ通信を行う方法
今日のインターネット時代において、リアルタイムのオーディオおよびビデオ通信は人々の日常生活に不可欠な部分となっています。 WebRTC (Web Real-Time Communication) テクノロジは、オープンなリアルタイム通信標準として、Web アプリケーションにリアルタイムのオーディオおよびビデオ通信を組み込むための強力なサポートを提供します。この記事では、リアルタイムのオーディオおよびビデオ通信に PHP および WebRTC プロトコルを使用する方法を紹介し、対応するコード例を示します。
以下は、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 アプリケーションのコード例です。
<!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 シグナリングをシグナリング サーバーに送信します。
シグナリング サーバー:
<?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 サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
