PHP で WebSocket API を使用してライブビデオおよびオーディオチャットを行う方法-PHPチュートリアル-php.cn

ホームページ

バックエンド開発

PHPチュートリアル

PHP で WebSocket API を使用してライブビデオおよびオーディオチャットを行う方法

王林

Jun 17, 2023 pm 02:37 PM

php websockets リアルタイムのインタラクション

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 サイトの他の関連記事を参照してください。

このウェブサイトの声明

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

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

Gmailメールのログイン入り口はどこですか？

7476

CakePHP チュートリアル

1377

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

Related knowledge

Ubuntu および Debian 用の PHP 8.4 インストールおよびアップグレードガイド Dec 24, 2024 pm 04:42 PM

PHP 8.4 では、いくつかの新機能、セキュリティの改善、パフォーマンスの改善が行われ、かなりの量の機能の非推奨と削除が行われています。このガイドでは、Ubuntu、Debian、またはその派生版に PHP 8.4 をインストールする方法、または PHP 8.4 にアップグレードする方法について説明します。

CakePHP の日付と時刻 Sep 10, 2024 pm 05:27 PM

Cakephp4 で日付と時刻を操作するには、利用可能な FrozenTime クラスを利用します。

CakePHP について話し合う Sep 10, 2024 pm 05:28 PM

CakePHP は、PHP 用のオープンソースフレームワークです。これは、アプリケーションの開発、展開、保守をより簡単にすることを目的としています。 CakePHP は、強力かつ理解しやすい MVC のようなアーキテクチャに基づいています。モデル、ビュー、コントローラー

CakePHP ファイルのアップロード Sep 10, 2024 pm 05:27 PM

ファイルのアップロードを行うには、フォームヘルパーを使用します。ここではファイルアップロードの例を示します。

CakePHP バリデータの作成 Sep 10, 2024 pm 05:26 PM

Validator は、コントローラーに次の 2 行を追加することで作成できます。

CakePHP のロギング Sep 10, 2024 pm 05:26 PM

CakePHP へのログインは非常に簡単な作業です。使用する関数は 1 つだけです。 cronjob などのバックグラウンドプロセスのエラー、例外、ユーザーアクティビティ、ユーザーが実行したアクションをログに記録できます。 CakePHP でのデータのログ記録は簡単です。 log()関数が提供されています