Angularjs use HTML5 Mobile camera to take photos _angularjs

1. Project background

The company develops a website, in makes the user avatar changes when the leader mentions adds one by the camera photography realizes modifies the Avatar function. Because our site is based on HTML5 development, so directly using H5 to achieve the photo. At first I thought it was a simple function, but when I did it it was not that simple.

This is the successful implementation of the call in the ANGULARJS camera photos and screenshots upload the example diagram:

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 resolution:

Navigator is the browser object that contains the browser's information, and this is the object that opens the camera. $scope is the ANDULARJS syntax. The first step is to declare Navigator.getmedia to invoke different open camera functions for browsers, with only Getusermedia, Webkitgetusermedia, Mozgetusermedia, Msgetusermedia four different ways for the General browser, Google Browser, Firefox browser and IE browser, the browser will automatically determine which function to call. The second step is to invoke the open browser, which contains three parameters, one for the type of media you need to use, for the stream data processing function to get the successful return, and for the operation failure to return the error message handler function. In which, not only can you set up the video to set up the use of the microphone, set the way:

{
video:true,
audio:true
}

The success of the call is to turn on the camera and return the video stream data, we can set the stream data to the screen tag in real-time display image. MediaStream is used to record the captured stream data, track in a Chrome browser to track the camera status, both of which can be used to turn off the camera.

3. Take photos

$scope. Snap = function () {
var canvas = document.createelement (' canvas ');
Canvas.width = "the";
Canvas.height = "304";

var ctx = Canvas.getcontext (' 2d ');
Ctx.drawimage (video, 0, 0, 304);
$scope. Closecamera ();
$uibModalInstance. Close (Canvas.todataurl ("image/png"));

You need to use the canvas tag, create a canvas tag, set the size of the picture we need to take pictures, save the current image of the video to the canvas tag via the DrawImage function, and finally convert the image data to Base64 data and turn the camera back on. This completes our photo-taking function. The $uibmodalinstance object here is an object that opens the pop-up layer in our project 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 earlier, the way to turn off the camera is through the MediaStream and track variables, except that track can only turn off the camera in the Chrome browser, which is also the way to turn off the camera in Chrome version 45.

5. Integrated into Andularjs

In fact, all of the above is implemented in Andularjs, of course, here just to achieve the picture and return to the camera data, we want to use elsewhere, we need to separate this part, where we use the ANGULARJS service mechanism, Make this Part a separate service and inject it into the project, which can then be invoked 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;
}

});

Call Mode:

$scope. Takephoto = function () {
H5takephotoservice.photo (). Then (function (res) {
if (res!= null && RE S!= "") {
$scope. myimage = res;
}
);
}

H5takephotoservice the camera service object injected into the controller, finally processing the returned image data, setting the data to display to the interface.

6. Compatibility issues

Mainly in the Chrome browser, the local test, the Chrome browser can be used normally, but deployed to the server can not 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 be used only through HTTPS access.

Finally, we need to say that the test can only be used through Http://url access, not through File://url access, that is, we need to deploy the code to access, can be done in visual Studio, Java Web, PHP.

The above is a small set to introduce the ANGULARJS in the use of HTML5 mobile phone camera photos of the relevant knowledge, hope to help you!