Introduction détaillée aux détails graphiques et textuels de l'utilisation d'un appareil photo HTML5 pour prendre des photos dans AngularJS

1. Contexte du projet

L'entreprise a développé un site Web Lors de la modification de l'avatar de l'utilisateur, le dirigeant a mentionné l'ajout d'une fonction permettant de modifier l'avatar en prenant des photos avec l'appareil photo. Notre site Web étant développé sur la base de HTML5, nous utilisons directement H5 pour prendre des photos. Au début, je pensais que cette fonction était très simple, mais quand je l'ai fait, j'ai réalisé que ce n'était pas si simple.

Voici un exemple d'appel réussi de l'appareil photo pour prendre des photos et télécharger des captures d'écran dans AngularJs :

2. Comment appeler la caméra

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

Analyse du code :

le navigateur est un objet navigateur, contenant des informations sur le navigateur. ici. $scope est la syntaxe AndularJs. La première étape consiste à déclarer navigator.getMedia pour appeler les différentes fonctions d'ouverture de caméra du navigateur. Actuellement, il n'existe que quatre méthodes : getUserMedia, webkitGetUserMedia, mozGetUserMedia et msGetUserMedia, qui correspondent respectivement aux navigateurs généraux, Google Chrome, Firefox et IE. . Il déterminera automatiquement quelle fonction appeler. La deuxième étape consiste à appeler et ouvrir le navigateur, qui contient trois paramètres, à savoir le type multimédia à utiliser, la fonction de traitement des données de flux renvoyée en cas d'acquisition réussie et la fonction de traitement des messages d'erreur renvoyés en cas d'échec. Parmi eux, lorsque vous l'utilisez, vous pouvez non seulement régler la vidéo mais également régler le microphone. La méthode de réglage est la suivante :

{
      video: true，
      audio: true
}

L'appel est réussi et les données du flux vidéo seront renvoyées après la mise sous tension. caméra. Nous pouvons définir les données du flux sur la balise vidéo sur l'interface. mediaStream est utilisé pour enregistrer les données de flux obtenues et track est utilisé pour suivre l'état de la caméra dans le navigateur Chrome. Les deux variables peuvent être utilisées pour éteindre la caméra.

3. Prendre des photos

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

Vous devez utiliser la balise canevas lorsque vous prenez des photos. Créez une balise canevas, définissez la taille dont nous avons besoin pour prendre des photos et enregistrez l'image actuelle. la vidéo sur toile via la balise de la fonction drawImage, et enfin convertir les données d'image en données base64, les renvoyer et éteindre l'appareil photo, complétant ainsi notre fonction de prise de photo. L'objet $uibModalInstance ici est un objet qui ouvre la couche contextuelle dans notre projet et est utilisé pour contrôler l'affichage de la couche contextuelle.

4. Comment éteindre la caméra

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

Comme mentionné précédemment, la façon d'éteindre la caméra consiste à utiliser mediaStream et à suivre les variables. Cependant, track ne peut qu'éteindre la caméra. dans le navigateur Chrome. Voici également comment désactiver la caméra dans Chrome version 45 et supérieure.

5. Intégré à AndularJs

En fait, tout ce qui est mentionné ci-dessus est implémenté dans AndularJs. Bien sûr, nous implémentons ici uniquement la prise de photos et le renvoi des données photo. Si vous souhaitez l'utiliser, vous devez séparer cette partie. Ici, nous utilisons le mécanisme de service dans AngularJs pour faire de cette partie un service distinct et l'injecter dans le projet, puis elle peut être appelée à d'autres endroits.

Enregistrement du service :

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

    });

Méthode d'appel :

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

h5TakePhotoService est l'objet de service photo injecté dans le contrôleur, et traite enfin les données et ensembles d'image renvoyés les données affichées sur l'interface.

6. Problèmes de compatibilité

Existent principalement dans le navigateur Chrome Lors des tests locaux, le navigateur Chrome peut être utilisé normalement, mais après avoir été déployé sur le serveur, il ne peut pas être utilisé normalement. Le message d'erreur est [object NavigatorUserMediaError], en effet, le navigateur Chrome ne prend en charge que l'accès sécurisé à la source lors de l'utilisation de la caméra, il ne peut donc être utilisé normalement qu'en accédant via https.

Enfin, je dois dire que pendant les tests, il n'est accessible que via http://www.php.cn/ et n'est pas accessible via file://url, c'est-à-dire que nous devons déployer le code pour y accéder. Complété dans Visual Studio, java web, php.

Ce qui précède est une introduction détaillée aux détails des images et des textes pris à l'aide de la caméra HTML5 dans AngularJS. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn) !