Detaillierte Einführung in die Grafik- und Textdetails der Verwendung einer HTML5-Kamera zum Aufnehmen von Bildern in AngularJS

1. Projekthintergrund

Bei der Änderung des Avatars des Benutzers erwähnte der Leiter das Hinzufügen einer Funktion zum Ändern des Avatars durch Aufnehmen von Bildern mit der Kamera. Da unsere Website auf HTML5 basiert, verwenden wir H5 direkt zum Aufnehmen von Bildern. Zuerst dachte ich, diese Funktion sei sehr einfach, aber als ich sie ausführte, wurde mir klar, dass sie nicht so einfach war.

Dies ist ein Beispiel für den erfolgreichen Aufruf der Kamera zum Aufnehmen von Bildern und Hochladen von Screenshots in AngularJs:

2. So rufen Sie die Kamera auf

$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();
        }

Code-Analyse:

Navigator ist ein Browserobjekt, das Browserinformationen enthält. Dieses Objekt wird zum Öffnen der Kamera verwendet Hier. $scope ist die Syntax von AndularJs. Der erste Schritt besteht darin, navigator.getMedia zu deklarieren, um die verschiedenen Kameraöffnungsfunktionen des Browsers aufzurufen. Derzeit gibt es nur vier Methoden: getUserMedia, webkitGetUserMedia, mozGetUserMedia und msGetUserMedia, die den allgemeinen Browsern Google Chrome, Firefox und IE entsprechen . Es wird automatisch bestimmt, welche Funktion aufgerufen werden soll. Der zweite Schritt besteht darin, den Browser aufzurufen und zu öffnen, der drei Parameter enthält, nämlich den zu verwendenden Multimediatyp, die Stream-Datenverarbeitungsfunktion, die bei erfolgreicher Erfassung zurückgegeben wird, und die Fehlermeldungsverarbeitungsfunktion, die bei einem Fehler zurückgegeben wird. Unter anderem können Sie bei der Verwendung nicht nur das Video, sondern auch das Mikrofon einstellen. Die Einstellungsmethode ist:

{
      video: true，
      audio: true
}

Der Anruf ist erfolgreich und die Videostream-Daten werden nach dem Einschalten zurückgegeben Wir können die Stream-Daten auf das Video-Tag auf der Schnittstelle einstellen. mediaStream wird zum Aufzeichnen der erhaltenen Stream-Daten und track zum Verfolgen des Kamerastatus im Chrome-Browser verwendet. Beide Variablen können zum Ausschalten der Kamera verwendet werden.

3. Bilder aufnehmen

$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"));
};

Sie müssen beim Aufnehmen von Bildern ein Canvas-Tag verwenden, die Größe festlegen, die wir zum Fotografieren benötigen, und das aktuelle Bild speichern Übertragen Sie das Video über das Tag „drawImage“ auf die Leinwand und konvertieren Sie schließlich die Bilddaten in Base64-Daten, geben Sie sie zurück und schalten Sie die Kamera aus, wodurch unsere Fotoaufnahmefunktion abgeschlossen ist. Das $uibModalInstance-Objekt ist hier ein Objekt, das die Popup-Ebene in unserem Projekt öffnet und zur Steuerung der Anzeige der Popup-Ebene verwendet wird.

4. So schalten Sie die Kamera aus

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

Wie bereits erwähnt, erfolgt das Ausschalten der Kamera über mediaStream und Track-Variablen Im Chrome-Browser können Sie die Kamera auch in Chrome-Version 45 und höher ausschalten.

5. Integriert in AndularJs

Tatsächlich ist alles, was oben erwähnt wurde, in AndularJs implementiert. Wir wollen es hier natürlich nur tun. Wenn Sie es verwenden möchten, müssen Sie diesen Teil trennen. Hier verwenden wir den Dienstmechanismus in AngularJs, um diesen Teil zu einem separaten Dienst zu machen und ihn in das Projekt einzufügen, und dann kann er an anderen Stellen aufgerufen werden.

Dienstregistrierung:

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;
        }

    });

Aufrufmethode:

$scope.takePhoto = function () {
      h5TakePhotoService.photo().then(function (res) {
           if (res != null && res != "") {
               $scope.myImage = res;
           }
      });
}

h5TakePhotoService ist das in den Controller injizierte Fotodienstobjekt und verarbeitet schließlich die zurückgegebenen Bilddaten und -sätze die auf der Schnittstelle angezeigten Daten.

6. Kompatibilitätsprobleme treten hauptsächlich im Chrome-Browser auf. Während des lokalen Tests kann er nicht normal verwendet werden Die Fehlermeldung lautet [object NavigatorUserMediaError]. Dies liegt daran, dass der Chrome-Browser bei Verwendung der Kamera nur den sicheren Quellzugriff unterstützt und daher nur über https-Zugriff normal verwendet werden kann.

Abschließend muss ich sagen, dass beim Testen nur über http://www.php.cn/ und nicht über file://url darauf zugegriffen werden kann, das heißt, wir müssen es bereitstellen Der Code für den Zugriff wurde in Visual Studio, Java Web und PHP erstellt.

Das Obige ist eine detaillierte Einführung in die Details von Bildern und Texten, die mit der HTML5-Kamera in AngularJS aufgenommen wurden. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn).