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

Source: Internet
Author: User
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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.