Detailed introduction to the graphic and text details of using HTML5 camera to take pictures in AngularJS

1. Project Background

The company developed a website. When modifying the user's avatar, the leader mentioned adding a function to modify the avatar by taking pictures with the camera. Because our website is developed based on Html5, we directly use H5 to take pictures. At first I thought this function was very simple, but when I did it I realized it was not that simple.

This is an example of successfully calling the camera to take pictures and upload screenshots in AngularJs:

2. How to call the camera

$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 analysis:

navigator is a browser object, containing browser information. This object is used to open the camera here. $scope is AndularJs syntax. The first step is to declare navigator.getMedia to call the browser's different camera opening functions. Currently, there are only four methods: getUserMedia, webkitGetUserMedia, mozGetUserMedia, and msGetUserMedia, which respectively correspond to general browsers, Google Chrome, Firefox, and IE browsers. It will automatically determine which function to call. The second step is to call and open the browser, which contains three parameters, namely the multimedia type to be used, the stream data processing function returned upon successful acquisition, and the error message processing function returned upon failure. Among them, when using it, you can not only set the video but also set the microphone. The setting method is:

{
      video: true，
      audio: true
}

The call is successful and the video stream data is returned after turning on the camera. We can set the stream data to the video tag and display it in real time on the interface. image. mediaStream is used to record the obtained stream data, and track is used to track the camera status in the Chrome browser. Both variables can be used to turn off the camera.

3. Taking pictures

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

You need to use the canvas tag when taking pictures. Create a canvas tag, set the size we need to take pictures, and save the current image of the video to the canvas tag through the drawImage function. Finally, the image data is converted to base64 data and returned and the camera is turned off, thus completing our camera function. The $uibModalInstance object here is an object that opens the pop-up layer in our project and is used to control the display of the pop-up layer.

4. How to turn off the camera

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

As mentioned before, the way to turn off the camera is through mediaStream and track variables. However, track can only turn off the camera in the Chrome browser. This is also How to turn off the camera in Chrome version 45 and above.

5. Integrated into AndularJs

In fact, the above mentioned are all implemented in AndularJs. Of course, here we only implement taking pictures and returning the picture data. We want to do it elsewhere. If you also use it, you need to separate this part. Here we use the service mechanism in AngularJs to make this part a separate service and inject it in the project, and then it can be called elsewhere.

service registration:

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

    });

Calling method:

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

h5TakePhotoService is the photo service object injected into the controller, and finally processes the returned image data and sets the data to be displayed on the interface .

6. Compatibility issues

Mainly exist in the Chrome browser. When tested locally, the Chrome browser can be used normally, but after being deployed to the server, it cannot be used normally. The error message is [object NavigatorUserMediaError], this is because the Chrome browser only supports secure source access when using the camera, so it can only be used normally through https access.

Finally, I need to say that during testing, it can only be accessed through http://www.php.cn/ and cannot be accessed through file://url, that is, we need to deploy the code to access it. Completed in Visual Studio, java web, php.

The above is a detailed introduction to the details of pictures and texts taken using the HTML5 camera in AngularJS. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!