PHP カメラ呼び出しスキル: マルチカメラ切り替えの実装方法-PHPチュートリアル-php.cn

PHP カメラ呼び出しスキル: マルチカメラスイッチングの実装方法

カメラアプリケーションは、ビデオ会議、リアルタイム監視など、多くの Web アプリケーションの重要な部分になっています。 PHP では、さまざまなテクノロジーを使用してカメラを呼び出し、操作できます。この記事では、マルチカメラ切り替えの実装方法に焦点を当て、読者の理解を助けるサンプルコードをいくつか紹介します。

カメラ呼び出しの基本

PHP では、JavaScript API を呼び出すことでカメラを呼び出すことができます。具体的には、<video> タグと navigator.mediaDevices.getUserMedia() メソッドを使用して、カメラにアクセスして操作します。

以下は、カメラを通じてビデオデータをキャプチャし、ページに表示する簡単なサンプルコードです。

<!DOCTYPE html>
<html>
    <head>
        <script>
            function start() {
                navigator.mediaDevices.getUserMedia({ video: true })
                    .then(function(stream) {
                        var videoElement = document.getElementById('video');
                        videoElement.srcObject = stream;
                    })
                    .catch(function(error) {
                        console.error('Error accessing the camera:', error);
                    });
            }
        </script>
    </head>
    <body>
        <button onclick="start()">Start</button>
        <video id="video" autoplay></video>
    </body>
</html>

ログイン後にコピー

navigator.mediaDevices.getUserMedia() を呼び出すことにより、メソッドに { video: true } パラメータを渡すと、カメラからビデオデータストリームを取得し、それを <video> の srcObject に割り当てることができます。 タグのプロパティを使用して、ページにビデオを表示します。

マルチカメラスイッチングの実現

マルチカメラスイッチングを実装するには、まずシステム上で利用可能なすべてのカメラデバイスのリストを取得し、次にカメラデバイス間で切り替える必要があります。ユーザーが選択したカメラを介してさまざまなカメラを使用できます。

以下は、マルチカメラ切り替え機能の実装方法を示すサンプルコードです:

<!DOCTYPE html>
<html>
    <head>
        <script>
            function start() {
                navigator.mediaDevices.enumerateDevices()
                    .then(function(devices) {
                        var videoDevices = [];
                        devices.forEach(function(device) {
                            if (device.kind === 'videoinput') {
                                videoDevices.push(device);
                            }
                        });
                        
                        var selectElement = document.getElementById('devices');
                        videoDevices.forEach(function(device) {
                            var optionElement = document.createElement('option');
                            optionElement.value = device.deviceId;
                            optionElement.text = device.label || 'Camera ' + (selectElement.length + 1);
                            selectElement.add(optionElement);
                        });
                        
                        selectElement.onchange = function() {
                            var deviceId = selectElement.value;
                            navigator.mediaDevices.getUserMedia({ video: { deviceId: deviceId } })
                                .then(function(stream) {
                                    var videoElement = document.getElementById('video');
                                    videoElement.srcObject = stream;
                                })
                                .catch(function(error) {
                                    console.error('Error accessing the camera:', error);
                                });
                        };
                    })
                    .catch(function(error) {
                        console.error('Error enumerating devices:', error);
                    });
            }
        </script>
    </head>
    <body>
        <button onclick="start()">Start</button>
        <select id="devices"></select>
        <video id="video" autoplay></video>
    </body>
</html>

ログイン後にコピー

この例では、最初に navigator.mediaDevices.enumerateDevices()## を呼び出します。 # システム上で利用可能なすべてのデバイスのリストを取得するメソッド。次に、kind が videoinput であるデバイスをフィルターで除外することで、カメラデバイスオブジェクトを videoDevices 配列に保存します。

次に、