简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
ホームページ > バックエンド開発 > PHPチュートリアル > 本文

PHP カメラ呼び出しスキル: マルチカメラ切り替えの実装方法

WBOY
リリース： 2023-08-04 19:08:01
オリジナル
1659 人が閲覧しました

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

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

  1. カメラ呼び出しの基本

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 に割り当てることができます。 タグのプロパティを使用して、ページにビデオを表示します。

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

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

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

<!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 配列に保存します。

次に、