Exploring Lesser-Known Browser APIs: Enhancing Web Experiences

Hey Web folks, there exists a multitude of Application Programming Interfaces (APIs) provided by modern web browsers in Web Development, offering developers an array of tools to craft rich, interactive, and innovative web experiences. While some APIs like DOM manipulation and XMLHttpRequest are widely known and extensively used, numerous lesser-known browser APIs offer powerful functionalities, often overlooked by developers. In this article, we'll delve into some of these lesser-known APIs, exploring their capabilities and providing code samples to demonstrate how they can be harnessed to enhance web applications.

Gamepad API

The Gamepad API enables web applications to interact with game controllers connected to the user's device. This API opens up opportunities for creating browser-based gaming experiences with native gamepad support.

window.addEventListener("gamepadconnected", function(event) {
  let gamepad = event.gamepad;
  console.log("Gamepad connected at index " + gamepad.index + ": " + gamepad.id);
});

Web Serial API

The Web Serial API provides access to serial ports on the device, allowing web applications to communicate with serial devices such as microcontrollers or hardware peripherals.

navigator.serial.requestPort()
  .then(port => {
    console.log('Serial port connected:', port);
  })
  .catch(error => {
    console.error('Serial port connection failed:', error);
  });

Presentation API

The Presentation API allows web pages to control external presentation devices, such as projectors or secondary screens. This API can be utilized to create web-based presentation applications or interactive displays

navigator.presentation.defaultRequest = new PresentationRequest('presentation.html');

Use Cases:

• Multi-screen presentations: Allows web applications to display content on both the user's device (e.g., laptop or smartphone) and an external display or projector simultaneously.

• Remote control of presentations: Enables control of presentation content from one device while displaying it on another device.

• Collaborative presentations: Facilitates multiple users interacting with the same presentation simultaneously from different devices.

Proximity Sensor API

The Proximity Sensor API allows web applications to access data from proximity sensors on devices, enabling functionalities like detecting when an object is nearby or detecting motion gestures.

window.addEventListener('userproximity', function(event) {
  let isNearby = event.near;
  console.log('Object is nearby: ' + isNearby);
});

Supported Browsers:

• Firefox 15 - 126

• Firefox for Android 123

• KaiOS Browser

Ambient Light API

The Ambient Light API provides access to the ambient light sensor of the user's device. Web applications can utilize this API to adjust their appearance or behaviour based on changes in ambient lighting conditions.

if ("AmbientLightSensor" in window) {
  const sensor = new AmbientLightSensor();
  sensor.addEventListener("reading", (event) => {
    console.log("Current light level:", sensor.illuminance);
  });
  sensor.addEventListener("error", (event) => {
    console.log(event.error.name, event.error.message);
  });
  sensor.start();
}

It measures the light around the device in lux, an international unit of measurement for light intensity. The MDN’s article on Using light sensors provides a good overview of what these lux value ranges represent:

10 ~ 50 lux: Dim Environment

100 ~ 1000 lux: Normal

10000 lux: Bright

Imagine utilizing the API to automatically set your webpage theme based on how bright your user's environment is.

Note:

Visit MDN or study more on this API to understand its browser support level and how to explicitly enable this feature.

Web Bluetooth API

The Web Bluetooth API enables web applications to communicate with Bluetooth devices nearby. This API facilitates scenarios like controlling IoT devices or interacting with Bluetooth-enabled peripherals.

navigator.bluetooth.requestDevice({ filters: [{ services: ['battery_service'] }] })
  .then(device => {
    console.log('Bluetooth device connected:', device.name);
  })
  .catch(error => {
    console.error('Bluetooth device connection failed:', error);
  });

MediaStream Recording API

Sometimes called Media Recording API or MediaRecorder API, the MediaStream Recording API allows web applications to record audio and video streams directly from the user's device. This API is useful for features like in-browser voice memos or screen capturing and it is closely affiliated with the Media Capture and Streams API and the WebRTC API. It's also surprisingly easy to work with.

navigator.mediaDevices.getUserMedia({ audio: true, video: true })
  .then(stream => {
    let recorder = new MediaRecorder(stream);
    recorder.start();
    recorder.ondataavailable = function(event) {
      let blob = event.data;
      console.log('Recorded data:', blob);
    };
  })
  .catch(error => {
    console.error('Media stream access denied:', error);
  });

Conclusion

These lesser-known browser APIs offer developers many capabilities to create unique and engaging web experiences. By leveraging these APIs creatively, developers can push the boundaries of web development and unlock new possibilities for interaction and functionality in their web applications.