How to Use HTML5 to call a mobile phone camera to take photos and code _ html5 tutorial skills-

HTML5TheMediaCaptureAPI provides programmable access to the camera. Users can directly use getUserMedia to obtain the video stream provided by the camera. The idea is provided to everyone. The most important thing to learn programming is practice, although I have complete code, I hope everyone can write their own code.
HTML5 The Media Capture API provides programmable access to The camera. You can directly use getUserMedia to obtain The video stream provided by The camera. But in fact, using html5 to call a mobile phone camera has many problems:
1) Google added a new getUserMedia API for high-quality video and audio communication after Chrome was released to version 21, which allows Web applications to access cameras and microphones, for other mobile browsers, only opera supports html5 to call the local camera function.
2) Neither browser supports access to multiple cameras: chrome does not support access to the rear camera, and pera supports access to the rear camera

For android phones, the browser chrome 32 allows a browser to call a device camera to take photos. The process is completed in three steps:

1) obtain the video stream
Add an HTML5 Video tag and obtain the Video from the camera as the input source of the tag.

The Code is as follows:

Var video = document. getElementByIdx_x_x ("video ");
Navigator. getUserMedia ({video: true}, function (stream ){
Video. src = window. webkitURL. createObjectURL (stream );
}, Function (error) {alert (error );});

2) Take a photo
For the photo taking function, HTML5 Canvas is used to capture the Video TAG content in real time. The Video element can be used as the input of the Canvas image.

The Code is as follows:

Function scamera (){
Var videoElement = document. getElementByIdx_x_x ('video ');
Var canvasObj = document. getElementByIdx_x_x ('canvas1 ');
Var context1 = canvasObj. getContext ('2d ');
Context1.fillStyle = "# ffffff ";
Context1.fillRect (0, 0,320,240 );
Context1.drawImage (videoElement, 0, 0,320,240 );
}

3) Image Acquisition
The core idea of retrieving image data from the Canvas is to use the toDataURL of the canvas to convert the Canvas data to a base64-encoded PNG image.

The Code is as follows:

Var imgData = canvas. toDataURL ("image/png ");

The imgData format is as follows: "data: image/png; base64, xxxxx"
Real Image Data is part of the base64 encoded comma