Using HTML5 APIs in Your Web App

Subscribe to my email list now at http://jauyeung.net/subscribe/

Follow me on Twitter at https://twitter.com/AuMayeung

Many more articles at https://medium.com/@hohanga

HTML5 brings a lot of exciting new features for developers to enhance their web apps. It allows developers to access data from new hardware and adds multimedia capabilities that weren’t available before and required plugins. Some new things include audio and video APIs, WebRTC for streaming video and audio, accessing battery data from mobile devices, location a device’s physical location, and much more.

The API specifications are very detailed. Everything is defined up to the level of individual functions that developers can call to make sure the APIs exist. For example, we can call functions in the Battery Status API to get the battery level of a device and use properties to access the battery level and charging status. The specification is very precise, and it tells developers what to do to make use of the APIs. We can know how APIs interact with the software that uses it and how the software should deal with the results returned from the API. There are still many APIs that are not finalized yet and shouldn’t be used in production. They are experimental and are subject to breaking changes.

Every browser has different levels of supports for the new APIs. You must check carefully to see if the browsers you want for your web app work with the desired APIs. However, in most cases, support for the most popular APIs more consistent among the most popular browsers.

To check for API support for different browser APIs, we can use the Mozilla Developer Network documentation located at https://developer.mozilla.org/en-US/ or use websites like www.caniuse.com which lists all the APIs and the browser support for each. We can see which versions support it in the details so we can handle the usage correctly.

The following are some of the APIs that are in the HTML5 API specifications:

• Battery status: lets us check the battery status of a device
• Clipboard: lets us copy content to the operating system’s clipboard
• Drag and drop: lets us add drag and drop items around our apps
• Fetch: lets us make HTTP requests more easily than with XMLHttpRequest
• File: lets us access files securely on the user’s computer
• Forms: added new types that we can use for form validation and render form fields differently
• Geolocation: lets us locate the device’s location
• getUserMedia/Stream: lets us retrieve audio and video from an external device like a camera
• Indexed database: lets us store database data locally
• Internalization: provides international formatting and string comparison features
• Screen orientation: lets us check the screen orientation of a device
• Selection: lets us select elements using CSS selectors
• Server sent events: allows servers to push data to clients without requesting it on the client-side
• User timing: lets us get more precise timestamps to measure the performance of our applications
• Vibration: lets us make devices vibrate if it has this capability
• Web audio: lets us process audio on the client-side
• Web speech: lets us add text to speech features into our web apps
• Web sockets: lets us make real-time communication between client and server
• Web workers: lets us run tasks in the background in user browsers

Below we’ll discuss some of the most popular HTML5 APIs.

Geolocation API

The Geolocation API allows us to get the physical location of a device when given permission by the user. It is a well-supported API implemented in more than 90% of desktop and mobile browsers. We can get the geolocation information of a device by using the navigator.geolocation object. This gives us information like the latitude, which is given in decimal degrees, the longitude in decimal degrees, the altitude in meters, the direction the device is heading towards, the speed the device is traveling, and the accuracy of the latitude and longitude measured in meters.

When a JavaScript app initiates a request for the device’s position, it has to go through a number of steps before it will be able to receive the data. First, the app must request permission to get the data from the user. This is typically done with a popup or notification.

Once the user allows the app to get the data, then an icon will be displayed indicating that the app can get the data through the Geolocation API. There are a few ways that the data can be obtained. The most accurate is using a device’s GPS. This will take longer but it’s the most accurate way to do it. If GPS is not available or we want it to get the location faster, then we use the device's wireless network connection, the cell tower that your phone or mobile device is connected to, or the IP address of the device.

Accessing the User’s Location

Geolocation in JavaScript is done with the navigator.geolocation object’s getCurrentPosition method. It takes 3 arguments. The first is a callback for when geolocation data is successfully retrieved. The callback function should have a Position object that we can use to get the data. The second argument is a callback function which is called when getting geolocation data failed. This callback function should have a PositionError object with the details of the error. The third argument is an object with the options for geolocation which controls how location lookup is done.

The Position object that’s in the success callback we pass in in the first argument will have the 2 properties. It has a coords property with the coordinates of the device on Earth, which has the latitude, longitude, altitude, etc., which are all the properties we described before. Also there’s a timestamp property that lets us know when the data was retrieved.

To get the location of a device, we can put the following in a script file:

navigator.geolocation.getCurrentPosition(  
   (position) => {  
     for (key in position.coords) {  
       console.log(key, position.coords[key])  
     }  
   });

When this script is run, the browser will ask for permission to enable geolocation. If we allow that, then we get the data in the position object. When we open the Chrome developer console of our browser and click on the Console tab, we get something like the following:

latitude 41.2833669  
longitude -120.040943  
altitude null  
accuracy 960  
altitudeAccuracy null  
heading null  
speed null

altitude, heading, speed are null because the device isn’t moving and it’s also not moving up or down.

Using the Geolocation API with Google Maps

Using Google Maps, we can convert our latitude and longitude into a location on the map. To do this, we use the Google Map API to add our coordinates. To use the Google Maps API, we have to sign up for an API key. It’s free for low usage situations, but regardless, we have to put in a credit card number to sign up. We can sign up with the ‘Get started’ link on https://developers.google.com/maps and follow the instructions.

Once we sign up, we put the following code to display a Google map of your device’s location. First, in index.html, we add:

<html>  
  <head>  
    <title>Google Map</title>  
    <link href="styles.css" rel="stylesheet" type="text/css" />  
  </head>  
  <body>  
    <div id="map"></div>  
    <script src="script.js"></script>  
    <script  
      async  
      defer  
      src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"  
    ></script>  
  </body>  
</html>

Then in scripts.js, we add:

initMap = () => {  
  navigator.geolocation.getCurrentPosition(position => {  
    const map = new google.maps.Map(document.getElementById("map"), {  
      center: { lat: position.coords.latitude, lng: position.coords.longitude },  
      zoom: 8  
    });  
  });  
};

And in styles.css we add:

#map {  
  height: 100%;  
}

html,  
body {  
  height: 100%;  
  margin: 0;  
  padding: 0;  
}

All we had to do is to get the geolocation data like in the previous example, then from the position object we access the location in the callback. We pass in the element that we want to display our map in and latitude and longitude in the center object into the Google Map’s constructor. We also pass in the zoom property to set the default zoom level. It’s important that we have the code that we have in styles.css since the height by default will be 0. We have to set it explicitly in order for the map to be displayed. Also in index.html, we have to substitute YOUR_API_KEY with your own Google Map API key that you got when you signed up.

Accessing Audio and Video from Devices

With HTML5, we can get audio and video from devices that we attached to our computers or cameras built into portable devices without any plugins. The WebRTC API is the way to do this. WebRTC stands for Web Real-Time Communications. If your browser supports WebRTC, we should get a navigatior.getUserMedia() method, which gets the audio and video from the user’s device.

It is supported in most of the popular browsers, so it’s safe to use. If it’s not supported in a browser you want to use, we can add a polyfill to add support for it. The getUserMedia object gets takes a few parameters. The first one is an object that has the boolean video and audio properties. For example, if we want to get both video and audio, then pass in {video: true, audio: true}. The second parameter of the getUserMedia function are a callback function for when getting the data is successful and the last one is a callback function that’s called when there’s an error getting the data.

To use the getUserMedia function, we can write the following code to get audio from a microphone and play it back in our browser. In index.html, we add the following:

<html>  
  <head>  
    <title>Audio Playback</title>  
  </head>  
  <body>  
    <h1>Audio Playback</h1>  
    <audio id="audio"></audio>  
    <script src="script.js"></script>  
  </body>  
</html>

Then in scripts.js we add:

window.onload = () => {  
  navigator.getUserMedia =  
    navigator.getUserMedia ||  
    navigator.webkitGetUserMedia ||  
    navigator.mozGetUserMedia ||  
    navigator.msGetUserMedia;  
  if (navigator.getUserMedia) {  
    const audio = document.getElementById("audio");  
    navigator.getUserMedia(  
      {  
        video: false,  
        audio: true  
      },  
      stream => {  
        audio.srcObject = stream;  
        audio.play();  
      },  
      error => {}  
    );  
  }  
};

We check that getUserMedia is supported in our browser of choice before running the function. Then in the first argument, we pass in { video: false, audio: true } to get the audio only. Then in the success callback function, we get the stream object which contains the audio that’s inputted from the microphone, and assign it directly to the srcObject property of our audio element. Then we call play on the audio element to play the audio. When we load our page then we should get a prompt to allow the browser to receive audio from the microphone. If we choose to allow it, then audio should play from the microphone if we speak to or send any sound to it.

HTML5 APIs are great. It lets developers access hardware and files securely, allowing us to create much richer web applications. We barely scratched the surface on what we can do with those APIs. There are too many of them available to us to cover them all here, but they give us many tools to incredible experiences for our users.