HTML5 カメラを使用して AngularJS で写真を撮影するグラフィックとテキストの詳細についての詳細な紹介

1. プロジェクトの背景

その会社は、ユーザーのアバターを変更する際に、カメラで写真を撮ってアバターを変更する機能を追加することに言及しました。当サイトはHtml5をベースに開発しているため、写真撮影にはH5を直接使用しております。最初はこの関数は非常に単純だと思いましたが、実際に実行してみると、それほど単純ではないことがわかりました。

これは、AngularJs で写真を撮り、スクリーンショットをアップロードするためにカメラを正常に呼び出す例です。ブラウザ情報を含むオブジェクト。ここでは、このオブジェクトを使用してカメラを開きます。 $scope は AndularJs の構文です。最初のステップは、ブラウザのさまざまなカメラ開始関数を呼び出すために navigator.getMedia を宣言することです。現在、メソッドは getUserMedia、webkitGetUserMedia、mozGetUserMedia、msGetUserMedia の 4 つだけで、それぞれ一般的なブラウザ、Google Chrome、Firefox、IE ブラウザに対応しています。どの関数を呼び出すかは自動的に決定されます。 2 番目のステップは、ブラウザを呼び出して開きます。ブラウザには 3 つのパラメータ、つまり、使用するマルチメディア タイプ、取得成功時に返されるストリーム データ処理関数、失敗時に返されるエラー メッセージ処理関数が含まれています。その中で、使用する場合、ビデオの設定だけでなく、マイクの設定も行うことができます。 設定方法は次のとおりです。

$scope.photoErr = false;
$scope.photoBtnDiable = true;
var mediaStream = null,track = null;

navigator.getMedia = (navigator.getUserMedia ||
                      navigator.webkitGetUserMedia || navigator.mozGetUserMedia ||
                      navigator.msGetUserMedia);
        if (navigator.getMedia) {
            navigator.getMedia(
           {
               video: true
           },
           // successCallback
           function (stream) {
               var s = window.URL.createObjectURL(stream);
               var video = document.getElementById('video');
               video.src = window.URL.createObjectURL(stream);
               mediaStream = stream;
               track = stream.getTracks()[0];
               $scope.photoBtnDiable = false;               $scope.$apply();
           },
           // errorCallback
           function (err) {
               $scope.errorPhoto();
               console.log("The following error occured:" + err);
           });
              } else {
            $scope.errorPhoto();
        }

カメラの電源を入れた後、通話が成功し、ビデオストリームデータが返されます。データを video タグに送信して、インターフェース上にリアルタイムで画像を表示します。 mediaStream は取得したストリーム データを記録するために使用され、track は Chrome ブラウザーでのカメラの状態を追跡するために使用されます。どちらの変数もカメラをオフにするために使用できます。

3. 写真を撮る

{
      video: true，
      audio: true
}

写真を撮るときは、canvas タグを作成し、写真を撮るのに必要なサイズを設定し、drawImage 関数を通じてビデオの現在の画像を Canvas タグに保存する必要があります。最後に画像データをbase64データに変換し、カメラの電源をオフにすると、写真撮影機能が完了します。ここでの $uibModalInstance オブジェクトは、プロジェクトでポップアップ レイヤーを開き、ポップアップ レイヤーの表示を制御するために使用されるオブジェクトです。

4. カメラをオフにする方法

$scope.snap = function () {
        var canvas = document.createElement('canvas');
            canvas.width = "400";
            canvas.height = "304";

            var ctx = canvas.getContext('2d');
            ctx.drawImage(video, 0, 0, 400, 304);
            $scope.closeCamera();
            $uibModalInstance.close(canvas.toDataURL("image/png"));
};

前述したように、カメラをオフにする方法は、mediaStream と track 変数を使用する方法ですが、これも Chrome ブラウザーでしかオフにすることができません。 Chrome バージョン 45 以降でカメラをオフにします。

5. AndularJs への統合

もちろん、ここでは写真の撮影と写真データの返却のみを実装します。他の場所で使用したい場合は、これを追加する必要があります。部分 独立して、ここでは AngularJs のサービス メカニズムを使用し、この部分を個別にサービスにしてプロジェクトに注入すると、他の場所から呼び出すことができます。

サービス登録:

$scope.closeCamera = function () {
            if (mediaStream != null) {
                if (mediaStream.stop) {
                    mediaStream.stop();
                }
                $scope.videosrc = "";
            }
            if (track != null) {
                if (track.stop) {
                    track.stop();
                }
            }
        }

呼び出しメソッド:

app().registerService("h5TakePhotoService", function ($q, $uibModal) {

        this.photo = function () {
            var deferred = $q.defer();
            require([config.server + "/com/controllers/photo.js"], function () {
                $uibModal.open({
                    templateUrl: config.server + "/com/views/modal_take_photo.html",
                    controller: "photoModalController",
                    windowClass: "modal-photo"
                }).result.then(function (e) {
                    deferred.resolve(e);
                });
            });
            return deferred.promise;
        }

    });

h5TakePhotoService はコントローラーに挿入されたフォト サービス オブジェクトで、最後に返された画像データを処理し、インターフェイスに表示するデータを設定します。

6. 互換性の問題

は、主に Chrome ブラウザーに存在します。ローカルでテストすると、Chrome ブラウザーで正常に使用できますが、サーバーにデプロイされると、エラー メッセージが [object NavigatorUserMediaError] として表示されます。これは、Chrome ブラウザがカメラを使用するときにサーバーが安全なソース アクセスのみをサポートしているため、https 経由でアクセスした場合にのみ通常に使用できるためです。

最後に、テスト中は http://www.php.cn/ を通じてのみ使用でき、file://url を通じてアクセスすることはできません。つまり、アクセスするにはコードをデプロイする必要があることを言っておきます。 Visual Studio でアクセスでき、Java Web と PHP で完成します。

上記は、AngularJS の HTML5 カメラを使用して撮影された写真とテキストの詳細についての詳細な紹介です。さらに関連するコンテンツについては、PHP 中国語 Web サイト (www.php.cn) に注目してください。