ホームページ  >  記事  >  バックエンド開発  >  PHP と WebRTC を使用してリアルタイムのビデオおよびオーディオ通信を行う方法

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

WBOY
WBOYオリジナル
2023-05-11 08:45:251860ブラウズ

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

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

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

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

  1. 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タグに。

  1. 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 を通じてサーバーとメッセージを送受信できるようになります。

  1. 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 を渡してリモート デバイスに送信します。

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

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

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