PHP と WebRTC を使用してリアルタイムのビデオおよびオーディオ通信を行う方法-PHPチュートリアル-php.cn

PHP と WebRTC を使用してリアルタイムのビデオおよびオーディオ通信を行う方法

WBOY

リリース： 2023-05-11 10:00:02

オリジナル

1946 人が閲覧しました

インターネットの継続的な発展に伴い、リアルタイムのビデオおよびオーディオ通信は人々のコミュニケーション手段としてますます重要なものとなり、日常生活や仕事のあらゆる側面に浸透しています。 PHP と WebRTC は、リアルタイムのビデオおよびオーディオ通信を実装する場合に非常に便利なツールです。では、PHP と WebRTC を使用してリアルタイムのビデオおよびオーディオ通信を行うにはどうすればよいでしょうか?次に、詳細な操作手順をステップごとに説明します。

まず、WebRTC の基礎知識を理解する必要があります。WebRTC は、ブラウザ上で映像と音声の通信を可能にするリアルタイム通信プロトコルです。JavaScript API を使用しているため、インストールすることなく利用できます。プラグイン。ブラウザと通信します。ただし、WebRTC は独立したテクノロジではなく、リアルタイムのビデオおよびオーディオ通信を実現するには他のテクノロジと連携する必要があります。次に、PHP と WebRTC を使用してリアルタイムのビデオおよびオーディオ通信を実現する前に、次の技術的基盤を習得する必要があります。

WebRTC
WebRTC はブラウザをエンドツーエンドで実現する方法です。ポイントリアルタイムオーディオおよびビデオ通信テクノロジー。 WebRTC を使用すると、ブラウザとサーバー間のリアルタイム通信を実現できます。
WebSocket
WebSocket は、TCP プロトコルに基づく全二重通信プロトコルです。WebSocket は、速度が速く、遅延が少なく、パフォーマンスが優れているため、サーバーとブラウザ間の接続の通信がより効率的になります。。
WebRTC API
WebRTC API は、WebRTC オーディオおよびビデオ呼び出しを定義する JavaScript API であり、オーディオおよびビデオストリームを処理するための一連のインターフェイス、セッションを作成および管理するためのインターフェイス、およびオーディオを送信するためのインターフェイスを提供します。安全、信頼性が高く効率的な方法でビデオデータを保存できるほか、WebRTC アプリケーションのデバッグや監視のためのインターフェイスなども提供されます。

次に、PHP と WebRTC を使用してリアルタイムのビデオと音声の通信を実現するための具体的な手順を紹介します。

WebRTC API を使用して音声とビデオのストリームを作成する

WebRTC API を使用してオーディオおよびビデオストリームを作成することは、リアルタイムのビデオおよびオーディオ通信を実現するための最初のステップです。 WebRTC API を通じて、ローカルのオーディオおよびビデオストリームを作成し、リモートデバイスに送信できます。次のコードを使用して、ローカルオーディオストリームとビデオストリームを作成できます。

<script>
const getUserMedia = (navigator.getUserMedia ||
                navigator.webkitGetUserMedia ||
                navigator.mozGetUserMedia ||
                navigator.msGetUserMedia);
 
const constraints = {
    audio: true,
    video: {
        width: 1280,
        height: 720
    }
};

getUserMedia(constraints, (stream) => {
    const video = document.querySelector('video');
    video.srcObject = stream;
    video.onloadedmetadata = (e) => {
        video.play();
    };
 }, (err) => {
    console.log(err);
});
</script>

ログイン後にコピー

上記のコードでは、getUserMedia () メソッドを使用してローカルオーディオストリームとビデオストリームを取得し、それらを割り当てます。 videoタグに。

WebSocket を使用して接続を確立する

WebSocket は、TCP プロトコルに基づく双方向データ送信プロトコルです。 WebSocket を使用すると、クライアントとサーバーの間に長時間持続する接続を確立できます。次のコードを使用して WebSocket 接続を確立できます。

<script>

    var ws = new WebSocket('ws://yourserveraddress:port/');

    ws.onopen = function() {
        console.log('WebSocket已打开');
    };

    ws.onmessage = function(e) {
        console.log('收到消息', e.data);
    };

    ws.onclose = function() {
        console.log('WebSocket已关闭');
    };

    ws.onerror = function(e) {
        console.log('WebSocket发生错误:', e);
    };

</script>

ログイン後にコピー

上記のコードでは、WebSocket コンストラクターを使用して WebSocket オブジェクトを作成し、接続されたサーバーのアドレスとポートを指定し、onopen、onmessage、それぞれ onclose および onerror メソッド。オープン、メッセージ受信、クローズ、およびエラーイベントを処理します。 WebSocket が開かれると、WebSocket を通じてサーバーとメッセージを送受信できるようになります。

WebSocket を介してリモートデバイスにオーディオストリームとビデオストリームを送信する

WebSocket はバイナリデータ送信を使用でき、WebSocket を介してローカルのオーディオストリームとビデオストリームをリモートデバイスに渡すことができます。次のコードを使用して、オーディオストリームとビデオストリームを送信できます。

<script>

    var ws = new WebSocket('ws://yourserveraddress:port/');

    ...

    function sendData() {
        var video = document.getElementById('video');
        var canvas = document.createElement('canvas');
        canvas.width = video.videoWidth;
        canvas.height = video.videoHeight;
        canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
        canvas.toBlob(function(blob) {
            ws.send(blob);
        });
    }

</script>

ログイン後にコピー

上記のコードでは、ビデオストリームをキャンバスキャンバスに変換し、toBlob() 関数を使用して変換します。を Blob オブジェクトに変換し、WebSocket を渡してリモートデバイスに送信します。

リモートデバイスからオーディオストリームとビデオストリームを受信する

onmessage() 関数を使用して、リモートデバイスからオーディオストリームとビデオストリームを受信できます。次のコードを使用して、オーディオストリームとビデオストリームを受信できます。

<script>

    var video2 = document.getElementById('video2');

    function startVideo(stream) {
        video2.srcObject = stream;
        video2.onloadedmetadata = function(e) {
            video2.play();
        };
    }

    ...

    ws.onmessage = function(e) {
        var blob = e.data;
        var videoUrl = window.URL.createObjectURL(blob);
        video2.src = videoUrl;
    };

</script>

ログイン後にコピー

上記のコードでは、URL.createObjectURL() 関数を使用して、ブラウザの Blob オブジェクトを URL アドレスに変換します。をクリックし、video2 タグを割り当てます。

要約すると、PHP と WebRTC を使用してリアルタイムのビデオと音声の通信を実装することは難しいことではなく、いくつかの基礎知識を習得し、上記の手順を段階的に実行するだけで済みます。リアルタイムのビデオおよびオーディオ通信は、私たちの生活や仕事に大きく役立つ非常に実用的なテクノロジーです。

以上がPHP と WebRTC を使用してリアルタイムのビデオおよびオーディオ通信を行う方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。