Workerman 開発: WebSocket プロトコルに基づいたビデオライブブロードキャストシステムを実装する方法-Workerman-php.cn

Workerman 開発: WebSocket プロトコルに基づいたビデオライブブロードキャストシステムを実装する方法

WBOY

リリース： 2023-11-07 11:25:01

オリジナル

1168 人が閲覧しました

Workerman 開発: WebSocket プロトコルに基づいたビデオライブブロードキャストシステムを実装する方法

Workerman は、非同期ノンブロッキング I/O を通じて数千万の同時接続を実現できる高性能 PHP フレームワークです。リアルタイム通信、高同時実行に適しています。サーバーやその他のシナリオ。この記事では、Workerman フレームワークを使用して、サービスの構築、ライブビデオストリームのプッシュと受信の実装、フロントエンドページの表示などを含む、WebSocket プロトコルに基づくライブビデオシステムを開発する方法を紹介します。

1. サーバーを構築します

1. Workerman 依存関係パッケージをインストールします:

次のコマンドを実行して Workerman 依存関係パッケージをインストールします:

composer require workerman/workerman

ログイン後にコピー

2サービスの作成 End

workerman.php ファイルをサーバーコードとして作成します。コードは次のとおりです。

<?php
use WorkermanWorker;
use WorkermanLibTimer;

require_once __DIR__ . '/vendor/autoload.php';

// 创建一个Worker监听2345端口，使用websocket协议通讯
$worker = new Worker("websocket://0.0.0.0:2345");

// 启动4个进程对外提供服务
$worker->count = 4;

// 客户端连接时触发
$worker->onConnect = function($connection) {
    echo "New client connected!
";
};

// 客户端请求时触发
$worker->onMessage = function($connection, $data) {
    if(strpos($data, 'start') === 0) {
        // 该客户端请求直播视频流
        $connection->send(getVideoStream());
        // 启动定时器，每秒向客户端发送一份视频流
        $timer_id = Timer::add(1, function()use($connection){
            $connection->send(getVideoStream());
        });
        // 将定时器ID绑定到连接上，方便后续停止定时器
        $connection->timer_id = $timer_id;
    }
    else if(strpos($data, 'stop') === 0) {
        // 该客户端停止请求直播视频流
        Timer::del($connection->timer_id);
    }
    else {
        // 其他请求，直接返回响应
        $connection->send("Hello, $data!");
    }
};

// 客户端断开连接时触发
$worker->onClose = function($connection) {
    // 清除定时器
    Timer::del($connection->timer_id);
    echo "Client disconnected!
";
};

// 以下是获取直播视频流的代码，可以替换为你自己的视频流获取代码
function getVideoStream() {
    $fp = fopen("videos/video.mp4", "rb");
    $chunk_size = 1024*1024; // 每次读取1MB
    $buffer = "";
    while(!feof($fp)) {
        $buffer .= fread($fp, $chunk_size);
        ob_flush();
        flush();
    }
    fclose($fp);
    return $buffer;
}

// 运行worker
Worker::runAll();

ログイン後にコピー

上記のコードでは、worker という名前の Worker オブジェクトを作成し、ポート 2345 をリッスンして、WebSocket プロトコルを使用して通信します。 onMessage コールバック関数で、クライアントが「開始」メッセージを送信する場合、それはクライアントがライブビデオストリームを要求していることを意味します。 getVideoStream 関数を通じてビデオストリームを取得し、タイマーを使用してビデオストリームデータを毎秒クライアントにプッシュします。クライアントが「停止」メッセージを送信した場合、それはクライアントがライブビデオストリームの要求を停止し、接続に対応するタイマーを閉じることを意味します。他のリクエストは応答を直接返します。

2. ビデオファイルの作成

ルートディレクトリに videos フォルダーを作成し、その中に video.mp4 という名前のビデオファイルを追加します。このビデオファイルは、独自のライブビデオストリームと置き換えることができます。

3. サーバーを起動します

workerman.php が存在するディレクトリをコマンドラインに入力し、次のコマンドを実行してサーバーを起動します:

php workerman.php start

ログイン後にコピー

成功したら起動時、サーバーはポート 2345 でリッスンしており、クライアントからのリクエストを受信できます。

2. クライアントの実装

1.socket.io と video.js の導入

クライアント機能の実装には、socket.io と video.js の 2 つのライブラリを使用します。 . これら 2 つのライブラリを HTML ページに導入する必要があります。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Video live demo</title>
    <style>
        video {
            width: 800px;
            height: 600px;
        }
    </style>
</head>

<body>
    <h1>Video live demo</h1>
    <button id="start">Start live</button>
    <button id="stop">Stop live</button>
    <br/><br/>
    <video id="video-player" class="video-js vjs-default-skin"></video>

    <script src="https://cdn.bootcss.com/socket.io/3.1.3/socket.io.js"></script>
    <link href="https://cdn.bootcss.com/video.js/7.15.4/video-js.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/video.js/7.15.4/video.min.js"></script>
    <script>
        var socket = io('http://localhost:2345');
        var player = videojs('video-player');

        // 点击开始按钮，向服务端发起请求获取视频流
        document.querySelector('#start').addEventListener('click', function() {
            socket.send('start');
        });
        // 点击结束按钮，停止请求视频流
        document.querySelector('#stop').addEventListener('click', function() {
            socket.send('stop');
            player.pause();
        });
        // 收到服务端推送的视频流数据，开始播放视频
        socket.on('message', function(data) {
            player.src({ type: 'video/mp4', src: URL.createObjectURL(new Blob([data], { type: 'video/mp4' })) });
            player.play();
        });
    </script>
</body>
</html>

ログイン後にコピー

上記のコードでは、開始ボタン、終了ボタン、ビデオプレーヤーを含む単純な HTML ページを作成しました。開始ボタンをクリックすると、「開始」メッセージがサーバーに送信され、ビデオストリームを要求します。終了ボタンをクリックすると、「停止」メッセージがサーバーに送信され、ビデオストリームの要求を停止し、ビデオの再生を一時停止します。サーバーによってプッシュされたビデオストリームデータを受信すると、URL.createObjectURL 関数を使用してビデオストリーム URL を作成し、再生のためにその URL を video.js プレーヤーに渡します。

2. クライアントを開始します

ブラウザで上記の HTML ページにアクセスし、開始ボタンをクリックしてライブビデオストリームの再生を開始します。ビデオストリームの要求を停止し、ビデオの再生を一時停止するには、[停止] ボタンをクリックします。

概要

Workerman フレームワークと WebSocket プロトコルを使用すると、高性能、低遅延のビデオライブブロードキャストシステムを簡単に実装できます。 Workerman は、非同期ノンブロッキング I/O サポートを提供し、数百万の接続が同時にアクセスされるシナリオを迅速に処理できるため、リアルタイム通信、高同時実行サーバー、その他の分野に大きな利便性をもたらします。この記事では、Workerman の非同期通信機能を使用して、サーバーとクライアントの間でリアルタイムビデオストリームをプッシュおよび受信し、ライブブロードキャストシステムをよりスムーズかつ効率的にします。

以上がWorkerman 開発: WebSocket プロトコルに基づいたビデオライブブロードキャストシステムを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。