ホームページ >バックエンド開発 >PHPチュートリアル >PHP で WebSocket API を使用してライブビデオおよびオーディオチャットを行う方法
PHP で WebSocket API を使用してライブビデオおよびオーディオチャットを行う方法
- 王林オリジナル
- 2023-06-17 14:37:411535ブラウズ
WebSockets API は、リアルタイムのビデオおよびオーディオ チャットを実現するための重要な部分であり、双方向通信を実現できるイベント ドリブン メカニズムに基づいた通信方法を提供し、ブラウザとサーバー間の通信をよりシンプル、高速、かつ高速化します。より安全な。 。この記事では、PHP で WebSockets API を使用してリアルタイムのビデオおよびオーディオ チャットを行う方法を紹介します。
- WebSocket サーバーのインストール
PHP で WebSocket API を使用するには、まず WebSocket サーバーをインストールする必要があります。 PHP で最も人気のある WebSocket サーバーである Rachet を使用することをお勧めします。 Composer を使用してインストールできます。
composer require cboden/ratchet
- WebSocket サーバーの作成
Rachet を使用した WebSocket サーバーの作成は非常に簡単で、必要なコードは数行だけです。
require dirname(__DIR__) . '/vendor/autoload.php';
use RatchetMessageComponentInterface;
use RatchetConnectionInterface;
use RatchetServerIoServer;
use RatchetHttpHttpServer;
use RatchetWebSocketWsServer;
class Chat implements MessageComponentInterface {
protected $clients;
public function __construct() {
$this->clients = new SplObjectStorage;
}
public function onOpen(ConnectionInterface $conn) {
$this->clients->attach($conn);
echo "New connection! ({$conn->resourceId})
";
}
public function onMessage(ConnectionInterface $from, $msg) {
broadcast($msg);
}
public function onClose(ConnectionInterface $conn) {
$this->clients->detach($conn);
echo "Connection {$conn->resourceId} has disconnected
";
}
public function onError(ConnectionInterface $conn, Exception $e) {
echo "An error has occurred: {$e->getMessage()}
";
$conn->close();
}
public function broadcast($msg) {
foreach ($this->clients as $client) {
$client->send($msg);
}
}
}
$server = IoServer::factory(
new HttpServer(
new WsServer(
new Chat()
)
),
8080
);
echo "Server started!
";
$server->run();このサーバーはすべての接続を受け入れ、メッセージが到着するとブロードキャストします。 Grad ストリーム オブジェクトを使用してすべての接続を保存します。
- フロントエンド アプリケーションの作成
WebSocket API を使用すると、クロスプラットフォームおよびクロスブラウザでフロントエンド アプリケーションを作成できます。 JavaScript を使用してフロントエンド アプリケーションを作成する方法は次のとおりです。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Chat</title>
<meta name="description" content="Chat">
<meta name="author" content="Chat">
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/socket.io/1.4.5/socket.io.min.js"></script>
<style>
#log {
height: 200px;
overflow: auto;
}
</style>
</head>
<body>
<div id="log"></div>
<input type="text" id="message">
<button id="send">Send</button>
<script>
var socket = io('http://localhost:8080');
socket.on('message', function (data) {
$('#log').append('<p>' + data + '</p>');
});
$('#send').click(function() {
var message = $('#message').val();
socket.emit('message', message);
});
</script>
</body>
</html>Socket.io を使用して接続し、アプリケーションはメッセージを送受信します。
- ビデオおよびオーディオ チャットの実装
Ratchet および WebSockets API を通じて、双方向のリアルタイム ビデオおよびオーディオ チャットを実現できます。これには、いくつかの追加の使用が必要です。ライブラリとツール。ブラウザ間のピアツーピア通信を可能にするリアルタイム通信の最新標準である WebRTC を使用することをお勧めします。
PHP で WebSocket サーバーと WebRTC DSP を使用すると、双方向のリアルタイム ビデオおよびオーディオ チャット アプリケーションを作成できます。これには、SimpleWebRTC を使用して実装できる追加の JavaScript コードが必要です。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Chat</title>
<meta name="description" content="Chat">
<meta name="author" content="Chat">
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/socket.io/1.4.5/socket.io.min.js"></script>
<script src="//simplewebrtc.com/latest-v3.js"></script>
<style>
#log {
height: 200px;
overflow: auto;
}
#localVideo {
width: 200px;
height: 150px;
margin-bottom: 10px;
}
#remoteVideos video {
width: 400px;
height: 300px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div id="log"></div>
<div id="localVideo"></div>
<div id="remoteVideos"></div>
<script>
var server = {
url: 'http://localhost:8080',
options: {},
// Use media servers for production
signalingServerUrl: 'https://localhost:8888'
};
var webrtc = new SimpleWebRTC({
localVideoEl: 'localVideo',
remoteVideosEl: 'remoteVideos',
autoRequestMedia: true,
url: server.url,
socketio: {'force new connection': true},
debug: false,
detectSpeakingEvents: true,
autoAdjustMic: false,
peerConnectionConfig: {
iceServers: [
{url: 'stun:stun.l.google.com:19302'},
{url:'stun:stun1.l.google.com:19302'},
{url:'stun:stun2.l.google.com:19302'}
]
},
receiveMedia: {
mandatory: {
OfferToReceiveAudio: true,
OfferToReceiveVideo: true
}
}
});
webrtc.on('readyToCall', function () {
console.log('readyToCall');
webrtc.joinRoom('chat');
});
webrtc.on('localStream', function (stream) {
console.log('localStream');
$('#localVideo').show();
});
webrtc.on('videoAdded', function (video, peer) {
console.log('videoAdded');
$('#remoteVideos').append('<video id="' + peer.id + '" autoplay></video>');
webrtc.attachMediaStream($('#' + peer.id), video);
});
webrtc.on('videoRemoved', function (video, peer) {
console.log('videoRemoved');
$('#' + peer.id).remove();
});
webrtc.on('channelMessage', function (peer, label, message) {
console.log('channelMessage');
console.log('peer: ' + peer);
console.log('label: ' + label);
console.log('message: ' + message);
});
</script>
</body>
</html>ここでは、SimpleWebRTC を使用してビデオおよびオーディオ チャットを実装します。このコードにはクライアントとサーバーのコードが含まれており、ユーザーがページにアクセスすると、クライアントは WebSocket サーバーに接続してルームに参加しようとします。サーバーは WebSocket イベントを SimpleWebRTC に配信します。
概要
Rachet と WebSockets API を使用すると、双方向のリアルタイム ビデオおよび音声チャットを実現できます。 SimpleWebRTC を使用して、アプリケーションを簡単に拡張して、リアルタイムのオーディオおよびビデオ チャットをサポートできます。 WebRTC は、オンライン教育システム、コラボレーション アプリケーション、オンライン ゲームなど、さまざまなアプリケーションで使用できる強力なテクノロジです。 PHP で WebSockets API と WebRTC を使用すると、強力なリアルタイム アプリケーションを作成できます。
以上がPHP で WebSocket API を使用してライブビデオおよびオーディオチャットを行う方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。