HTML5 photo taking and uploading app implementation

1.     Videostream

HTML5 TheMedia Capture API provides the programmable  access to video camera on phones, users canuse the getUserMedia() method to get the video stream provided by video camera.What we need to do is to add a HTML <video> tag and make the videostream from the video camera as the input to the <video> tag.  (Please note currently only Chrome and Operasupport getUserMedia() method)

1. <video id="video" autoplay=""></video>  
2. <script>  
3. var video_element = document.getElementById('video');  
4. if (navigator.getUserMedia) { // opera should use opera.getUserMedia now  
5.          navigator.getUserMedia('video',success, error);  
6. }  
7. function success(stream) {  
8.          video_element.src =stream;  
9. }  
10. </script>  

Video stream

2.     Takingphoto

We will use HTML5’s Canvas tocapture the contents of <video> tag in real time. <video> tag canbe the input of Canvas. The code of this functionality is :

1.       <script>  
2.          var canvas =document.createElement('canvas');  
3.    
4.          var ctx = canvas.getContext('2d');  
5.          var cw = vw;  
6.          var ch = vh;  
7.          ctx.fillStyle = "#ffffff";  
8.          ctx.fillRect(0, 0, cw, ch);  
9.          ctx.drawImage(video_element, 0, 0, vvw,vvh, 0,0, vw,vh);  
10.          document.body.append(canvas);  
11. </script>  

3.     Capturepicture

Next we willretrieve picture data from Canvas, the key here is to use Canvas’s toDaatURL(0to convert picture data into base64 encoded PNG picture data. The data has theformat similar to “data image/png,base64,xxxxx”

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

Because the useful picture data is the portion after “base64,” on the above   whichis xxxxx.So we actually only need to processthis portion of data. We can use two methods here/

a). We retrieve the data after 22 bytes of the data as picture data onclient side

1. var data = imgData.substr(22);  

If we want to get the picture size before uploading it, we can use

var length = atob(data).length;// atob decodes a string of data which has been encoded using base-64 encoding 

b). On theserver side to retrieve the picture data after 22 bytes. For example in PHP:

1. $image = base64_decode( str_replace('data:image/jpeg;base64,', '',$data);  

4.      Pictureuploading

On client side we can use Ajax to uploading the picture data to serverside script. If using jQuery:

$.post('upload.php',{ 'data' : data } );  

On serverside we can use PHP script to receive and store the picture

1. function convert_data($data){  
2.     $image = base64_decode( str_replace('data:image/jpeg;base64,', '',$data);  
3.     save_to_file($image);  
4. }  
5. function save_to_file($image){     
6.     $fp = fopen($filename, 'w');  
7.     fwrite($fp, $image);  
8.     fclose($fp);  
9. }  

Please note, the above solution can be used to do Web App pictureuploading, also you can convert the output of Canvas into picture. By doing so,you can use Canvas to provide image editing capability such as cropping,rendering and doodling, then you can savethe picture onto server using the edited picture.

Canvasdoodle

Drivenby HTML5, Is there really a big gap which cannot be jumped over between Web Appand Native App? I will answer this question on Baidu Developer Conference on 23rdMarch 2012.

References:

The MediaCapture API：http://www.w3.org/TR/media-capture-api/

Canvas：http://dev.w3.org/html5/2dcontext/