I’m going to share 4 interesting Web APIs I’ve used, which might help you when building your next website:

• MediaStream and MediaRecorder APIs
• Fullscreen API
• Vibration API
• Geolocation API

1. MediaStream and MediaRecorder APIs

MediaStream and MediaRecorder APIs are used to capture audio or video from the device’s microphone and camera from the browser. There’s a wide variety of use cases for this, for example:

• Video and audio creation or editing software
• Capturing audio for song detection (SoundHound, Shazam)
• Voice commands and recognition

How to use it

A MediaStream object represents a stream of media content. A media stream from the device’s camera and microphone can be created using MediaDevices.getUserMedia(). The MediaRecorder API takes the data from a MediaStream, and provides the resulting video or audio data for use.

// A `MediaStream` is created using `getUserMedia`
const mediaStream = await window.navigator.mediaDevices.getUserMedia({
  audio: true,
  video: true,
});

// `MediaRecorder` accepts a `MediaStream`
const mediaRecorder = new MediaRecorder(mediaStream);

// MediaRecorder can be started and stopped
mediaRecorder.start();
mediaRecorder.stop()

// `dataavailable` is triggered when data is available to be saved
mediaRecorder.addEventListener('dataavailable', (e) => {});
// `stop` is triggered when the recorder has stopped recording.
mediaRecorder.addEventListener('stop', () => {});

Browser and device limitations

This API is supported on Chrome, Edge, Firefox and Safari, but works best on Chrome.

#web-design #javascript #api #web-development #programming