Access webcam in Opera 12

The recently released version 12 of  Opera allows the browser to access the PC webcam via the HTML5 navigator.getUserMedia API. This is probably the first stable version of a browser permitting this. As indicated in our earlier post, this allows the script to capture screenshots of the webcam. It also offers local storage which is another HTML5 feature. To try it out, go to http://html5.sapnagroup.com/gallery/camera.php and click to capture the photo.  The photo is stored in local storage till you . Till date, one could access webcam only via flash on a desktop browser. This would open up lots of new avenues. A typical use could be photographing a user when he/she is filling up an application thus avoiding the headache of uploading another photo. We are still researching if this allows capturing the video and will have an update on this soon.

Geolocation sensing

Most modern browsers support geolocation sensing. Essentially, when a user vists a webpage, the browser can sense the geolocation of that user. The user is prompted to share his location and only on approval. is the location shared. Typically, the location is determined using some of the following parameters (in order of accuracy)
- Using the GPS of the device. Typically works only in smart end phones which have inbuilt GPS chip.
- From the GSM/CDMA cell tower location.
- From user’s IP. This would be the most common for desktops on a landline broadband connection.

The geolocation can then be used to plot the user’s position on a map or for other bits. An example can be viewed here. In the example, click on the icon which appears on the right, above the map, to plot your location.

The geolocation is sensed using the navigator.geolocation object. The getCurrentPosition method gives the current position. One key argument for this function is enableHighAccuracy. Essentially, a higher accuracy would make the browser return back the GPS coordinates if they are available rather the position from IP. The returned values contain the latitude, longitude and altitude. But besides these, the function also returns a coords.accuracy. This shows the accuracy of the point in metres.

The watchPosition method is identical to the above except that it keeps giving the coordinates as the position changes. This is very handy to track the position in case the device is moving.

A combination of the above functions can be used to track a device movement over a period of time assuming the device has the page open and internet access is available to the device during that period. For such an application, one could discard points which fall below a certain accuracy level so that the path is smooth and is not zig zagged due to the some freak points which are inaccurate. Typical usage could be for tracking users with a mobile device or cargo tracking via a mobile device.

Upload photos from Phone Gallery to a server

Apple iPad/iPhone
Ipad doesn’t allow a web based app to access photos direclty. We have found an interesting way to go about accessing the photos on the Ipad and uploading them via the browser. Using “Aurigma Up” – a photo upload App for iOS devices, users can upload images from the device to your site.

To see it in action, you can do the following as detailed below.
1. Download “Aurigma Up” from App Store. This is a free app and you will only need an Apple account to download it.
2. After the native app is downloaded and ready to use, open in safari browser http://www.sapnagroup.com/mob/BasicDemo/test.html
3. Click on the link to upload images, this will open up the native app. You can select multiple images from Phone Gallery or click new ones using the camera and then upload.
5. After uploading you will be redirected to a gallery page showing the images uploaded.
6. Please note that when new files are uploaded all previously uploaded photos are deleted.

Let’s see now how to do it
1. Insert the upload link on the page
Inside the <BODY> tag add the following

<a href="aurup:?uploadUrl=http://yoursitename.com/upload.php&redirectUrl=http://yoursitename.com/gallery.php">
Upload Images
</a>

uploadUrl – the target page to which Aurigma Up sends the photos. We will explain below how to create such page
redirectUrl – the page to which Aurigma Up will bring the user back when the upload completes. It can be the same page or the photo gallery page.
licenseKey – more on this in the next step.

2. Get license key
Register at http://www.aurigma.com/MyAurigma/Register.aspx and get license key for your domain for free!

3. Saving the uploaded photos on your server hard drive
You need to create a simple server-side script, and specify its URL in the uploadUrl attribute as described above. This script will accept the POST request sent by Aurigma Up.

The following snippet of code handles uploads

PHP code example:

<?php
$path = realpath('./Temp/') . DIRECTORY_SEPARATOR;
$fileCount = $_POST["PackageFileCount"];
for ($i = 0; $i < $fileCount; $i++) {
  if (isset($_FILES['File0_' . $i])) {
    move_uploaded_file($_FILES['File0_' . $i]['tmp_name'], $path . $_POST['SourceName_' . $i]);
  }
}
?>

Android
Android browser now supports File Upload. To achieve this you can use the <input type=”file” /> element. When you click “Choose File” you will get a popup menu with options to: select a file from the Gallery, from the music collection or from the sound recorder.

This is how you can achieve it in 2 simple steps.

1. Insert the upload button on the page
Inside the <BODY> tag, add the following

<form name="fileupload" method="post" target="targetfile.php" enctype="multipart/form-data" >
<input type='file' name="upload" >
<input type="submit" value="Send">
</form>

2. Saving the uploaded photos on your server hard drive

PHP code example:

<?php
$target_path = "/path/to/store/file/";    // replace this with the path you are going to save the file to
if(is_array($_FILES)) {
   foreach($_FILES as $fileKey => $fileVal){
     if($fileVal[name]) {
       move_uploaded_file($_FILES["upload"]["tmp_name"],$target_path.$fileVal[name]);
     }
   }
}
?>

HTML5 new features – accessing the native device camera

W3C has now released the draft for accessing the native camera or webcam of the device. The API for navigator.getUserMedia is still in draft stages but gives a good insight of things to come. As of now, no stable browser version has support for this API. We found an Opera Lab version for Android which seems to have support for this. Details are at http://my.opera.com/core/blog/2011/03/23/webcam-orientation-preview.

Using the above Opera version, we have managed to coin up our first HTML5 app which access the cellphone’s camera. The app can capture images via the camera and they can be stored in the local SQLite database which could be handy if there is no internet connectivity at that time. The app then allows you to transfer these images to a server which can manipulate them and store them. In our app, the images are added to an online image gallery. A video of the working app is shown below.

HTML5 device access implementation demo on YouTube

In case you want to try it out, please open the url http://html5.sapnagroup.com/gallery/camera.php on your Android phone. Before you view it, please download the Opera Lab version from http://people.opera.com/richt/release/build/Opera_Mobile_11_LABS_device_orientation_preview_20110323.apk and do the following as detailed below.

  1. Install Opera Lab version
  2. Type in about:config into the address bar
  3. Go to Security Prefs  and tick  ”Allow Camera To Canvas Copy”
  4. Open  http://html5.sapnagroup.com/gallery/camera.php
  5. Click on the screen to capture an image
  6. This will store the captured screen locally into mobile storage
  7. Keep clicking more images
  8. Once you are onto wifi/3G coverage, click on the stored images (small thumbnails that appear below the capture screen) to upload to the server
  9. View your uploaded images at http://html5.sapnagroup.com/gallery/index.php

An app like this opens up opportunities to transfer photos from outdoor easily to any web based application. The next step to this would be to transfer videos and audio. We are still researching that.

Some new HTML5 apps worth looking at

We review two recent HTML5 apps which make extensive use of the newer features introduced in HTML5.

Financial Times (app.ft.com)

The app works online and also offers an offline version which can be viewed without internet access. The most innovative part of this app is that it downloads the offline version in the background when you load the app and it also shows a progress bar for the offline download. Videos are not available in offline mode. There is a also a clever image positioned just below the bookmark link with instructions on how to go about putting a bookmark icon on your home screen.

A string of touch events like flipping pages by swiping your finger or a cool menu which appears on click makes the interface very user friendly. But it definitely indicates the trend of things to come vis-a-vis HTML5 apps.

Aside mag (www.asidemag.com)

An German app tailored for the Ipad, it shows a lot of interesting effects for IPAD events like finger touch, swipe etc. Page flipping can be achieved by swiping your finger and there is also a cool left menu which comes up on touch. One drawback that has been pointed out is the jerky movement when one slides from one page to the other, particularly on the older IPADs. But it definitely shows the way forward for such apps.

Offline version of a web app

DEMO

One of the path breaking features of HTML5 is the ability to run an html application in an offline mode.  This becomes a very handy feature particularly on hand held devices like an IPAD, Tablet or a cellphone. IPAD and Iphone browsers already support HTML5 offline caching.

The offline mode that one talks of effectively caches the site on the browser. It is not something which was designed to run the entire html app as an offline application. But with a bit of innovation, one can make an HTML5 app run in offline mode to simulate a native app. Add to this, the advantage that this HTML app is OS independent thus saving the headache of developing different apps for different Operating Systems.

Click here to view our offline brochure which gives details of our clients. The entire functionality works online on any browser and offline on an HTML5 browser.

When we attempted to develop an app, we encountered a lot of practical issues for which there was very little documentation available. Without some of these features, the offline mode becomes more a theoretical concept offering no real value to the user. There are still some issues which we have yet to get round but we believe that the list below provides a starting point to develop a good offline app.

Cache limit

HTML5 allows download of files via the manifest file. This is pretty well documented and works file. The problem arises when the size of files starts going beyond 5 MB. In most cases, your total size of all cached files will be far higher than this limit. In fact, Safari on IPAD would just give you an error with no other help. Safari on IPAD has a cache limit of 5 MB by default. The idea is to stream files via the manifest file in such a way that it prompts the user to allow increase of the cache limit. This is how we achieved it.

var cache = window.applicationCache;
function addInstallationMessage(){
	...
}
cache.addEventListener("cached", function () {

	addInstallationMessage("Please click on reload to continue the offline version download.",2);

	sendDownLoadMsg = false;

}, false);

cache.addEventListener("checking", function () {

	 addInstallationMessage("Files checked.");

	 sendDownLoadMsg = false;

}, false);

cache.addEventListener("downloading", function () {

	addInstallationMessage("Files are downloading.");

	sendDownLoadMsg = false;

}, false);

cache.addEventListener("error", function (e) {

	addInstallationMessage("The download failed for some reason. Script is attempting to download again.",2);

	cache.update();

}, false);

cache.addEventListener("noupdate", function () {

	addInstallationMessage("Installation complete",1);

	location.href="home.html";
}, false);

cache.addEventListener("progress", function () {

	if(!sendDownLoadMsg){

		addInstallationMessage("Cache download complete.");

		sendDownLoadMsg = true;

	}

}, false);

cache.addEventListener("updateready", function () {

	cachInt = 0;

	addInstallationMessage("Files checked.");

	cache.update();

}, false);

Basically, the  Application Cache Object – window.applicationCache has different states and each of those is sensed by adding event listener function. Hence, the status codes help us to track the cache download progress in HTML5 browsers.

Database download

Now that we have managed to get our files cached, the next item on the agenda is to get your database data offline. Again, in reality, a good app would want the database data besides the files. The way we got round this is to insert the relevant tables from MYSQL to SQLite. This is executed through a series of SQL statements. The javascript call for any event then checks if the browser is in online or offline mode. HTML5 allows this via navigator.onLine variable. However, we have used the jQuery ajax functions to work around with offline and online mode. jQuery allow us to define the success and error mode functions of ajax.  If the browser is online, the script will connect to the live MYSQL database via an Ajax call. If the browser is offline, the script will query the local SQLite database. By and large this works well for not so complicated applications. There are still a few challenges which we are still working on. Some of them are:
- No proper progress bar when data is being downloaded from MYSQL to SQLite.
- Reversing syncing from SQLite to MYSQL.
- If you delete browser cache conciously unconciously, your SQLite data gets wiped out.

Progress bar

We haven’t found any resource on the net which offers a solution for a proper progress bar when the files are being cached. If data of 50 MB is being downloaded, one cannot just show the user a blank white screen. We have managed to get some kind of activity being shown on screen during the course of download, but it is still not a full fledged progress bar which shows the percentage completed etc. But we believe that there is a workaround for this which we hope to come up with soon.

HTML5 does open up opportunities for offline apps but some innovative solutions are required to get it functional like an full fledged native app.

Drag and Drop upload of files

DEMO

Conventional HTML4 has always supported file upload via an html form but it has its limitations. It provides an <input type=”file” /> element to achieve this. This has a limitation that you need to select the file using the browser button.  No progress bar is shown confusing the viewer as to what exactly is happening. You can upload only file at a time and typically any file bigger than 15 MB or so have a tendency to get the script timed out.

HTML5 gives us the ability to drag and drop a file into an html element. This is a very handy feature as a typical web application involves upload of images, PDFs and other documents. This file can then be manipulated to show the preview (in case of an image file) or even uploaded to the server. The user convenience is enhanced by the fact that it allows the user to select multiple files at one go and shows a progress bar for each file upload.

Most articles that we stumbled upon, demonstrated the drag and drop feature and the preview of the file. In a real life scenario, the trickier part is to upload the file to the server with a progress bar. Gmail does it successfully but there was very little documentation on the internet on how to go about doing this. The issue also complicates further as a user can drag multiple files at one time.

Click here to view a demo of drag and drop file upload. The files that you upload will show up from the server once the upload is finished. A brief explanation on how we have tackled this.

For the demo, we shall be using Andrew Valums’ Ajax Upload which can be found at http://valums.com/ajax-upload/.

The script uses XHR to upload multiple files with progress bar in Mozilla Firefox 3.6+, Apple Safari 4+, Google Chrome and gracefully degrades in other browsers using a hidden iframe based normal upload.

The action parameter of the script refers to the path of the server file which is used to handle the uploads to the server. In our example, we are using PHP to transfer files to the server.

When using Drag & Drop to upload files in HTML, files are sent as raw data which can then be accessed via the request body, which is why is not a very good idea to upload really large files. We have found 30MB to be an acceptable limit. Anything above this would crash your browser.

The following snippet of code handles XHR uploads:

function save($path) { // $path is the path we are going to save the file to
    $input = fopen("php://input", "r"); // Read raw data from request body
    $temp = tmpfile(); // Create a temporary file and open a corresponding stream
    stream_copy_to_stream($input, $temp); // Copy stream data to the temporary file
    fclose($input); // Close the file pointer
    $target = fopen($path, "w"); // Open a file pointer to the path we need to save the file to
    fseek($temp, 0, SEEK_SET); // Move to the beginning of the file
    stream_copy_to_stream($temp, $target); // Copy stream data to the destination path
    fclose($target);  // Close the file pointer
    return true;
}

If XHR uploads are not supported as is the case with most Microsoft Internet Explorer browsers, the normal file upload is used and we can access the files using the HTTP File Upload variable $_FILES. The following snippet of code handles the same:

function save($path) { // $path is the path we are going to save the file to
    if(!move_uploaded_file($_FILES['qqfile']['tmp_name'], $path)){ // Move the uploaded file to the destination path or else return false
        return false;
    }
        return true;
}

Why one more HTML5 Blog ?

There is a lot of buzz of HTML5 nowadays. HTML5 does introduce a lot of revolutionary bits which are expected to change the way data is presented over the internet. Primary among them are
- Offline storage through cache and database storage in a local SQLite database.
- Geo-location sensing via the browser.
- Canvas element which gives the ability to present drawings within an element.
- Rendering of video and audio via HTML eliminating the need for additional plugins like Flash.
- Proposed features like access to contact list of mobile device etc.

Our research on the internet on these topics led us to a lot of articles which demonstrated how to use these features in HTML and Javascript. But most were theoretical articles which explained the basics of how to go about. What we felt lacking was real life applications which introduced real life issues. A simple example was offline storage. In a practical scenario, the offline download could be several MB of data and it would be imperative that the user is shown some kind of visual progress bar at least. None of the topics on the subject of offline storage have indicated how to get round this problem. Lack of standards in HTML5 only compounds the issue.

Our blog on HTML5 is an attempt to showcase live examples which try to address the issues that face a live commercial application. We will be adding articles with examples where we highlight the process. Please note that since these are demonstration scripts, the focus on design has been less and you may find an odd bug or two. The idea is to demonstrate the newer HTML5 concepts and not focus on the standard aesthetics etc. Secondly, a lot of articles will focus on devices like Ipad and Iphone since these are the only devices which have the best HTML5 support and one can think of a commercial HTML5 application for these devices. We hope that with coming time, many other devices on Android and even PC browsers will have better HTML5 support. We welcome your views and comments on the articles so that we can collectively try to come up with workable solutions for HTML5.