DEV Community

Cover image for 7 JavaScript Web APIs to build Futuristic Websites you didn't know🤯
Tapajyoti Bose
Tapajyoti Bose

Posted on • Updated on

7 JavaScript Web APIs to build Futuristic Websites you didn't know🤯

With the rapidly changing technologies, developers are being provided with incredible new tools and APIs. But it has been seen that out of the 100+ APIs, only 5% of them are actively used by developers.

Let's take a look at some of the useful Web APIs that can help you skyrocket your website to the moon!🌕🚀

1. Screen Capture API

The Screen Capture API, as the name suggests, allows you to capture the contents of a screen, making the process of building a screen recorder a piece of cake.

You need a video element to display the captured screen. The start button will start the screen capture.

<video id="preview" autoplay>
  Your browser doesn't support HTML5.
</video>
<button id="start" class="btn">Start</button>
Enter fullscreen mode Exit fullscreen mode
const previewElem = document.getElementById("preview");
const startBtn = document.getElementById("start");

async function startRecording() {
  previewElem.srcObject =
    await navigator.mediaDevices.getDisplayMedia({
      video: true,
      audio: true,
    });
}

startBtn.addEventListener("click", startRecording);
Enter fullscreen mode Exit fullscreen mode

2. Web Share API

The Web Share API allows you to share text, links, and even files from a web page to other apps installed on the device.

async function shareHandler() {
  navigator.share({
    title: "Tapajyoti Bose | Portfolio",
    text: "Check out my website",
    url: "https://tapajyoti-bose.vercel.app/",
  });
}
Enter fullscreen mode Exit fullscreen mode

NOTE: To use the Web Share API, you need an interaction from the user. For example, a button click or a touch event.

3. Intersection Observer API

The Intersection Observer API allows you to detect when an element enters or leaves the viewport. This is exceptionally useful for implementing infinite scroll.

NOTE: The demo uses React because of my personal preference, but you can use any framework or vanilla JavaScript.

4. Clipboard API

The Clipboard API allows you to read and write data to the clipboard. This is useful for implementing the copy to clipboard functionality.

async function copyHandler() {
  const text = "https://tapajyoti-bose.vercel.app/";
  navigator.clipboard.writeText(text);
}
Enter fullscreen mode Exit fullscreen mode

5. Screen Wake Lock API

Ever wondered how YouTube prevents the screen from being switched off while playing the video? Well, that's because of the Screen Wake Lock API.

let wakeLock = null;

async function lockHandler() {
  wakeLock = await navigator.wakeLock.request("screen");
}

async function releaseHandler() {
  await wakeLock.release();
  wakeLock = null;
}
Enter fullscreen mode Exit fullscreen mode

NOTE: You can only use the Screen Wake Lock API if the page is already visible on the screen. Otherwise, it would throw an error.

6. Screen Orientation API

The Screen Orientation API allows you to check the current orientation of the screen and even lock it to a specific orientation.

async function lockHandler() {
  await screen.orientation.lock("portrait");
}

function releaseHandler() {
  screen.orientation.unlock();
}

function getOrientation() {
  return screen.orientation.type;
}
Enter fullscreen mode Exit fullscreen mode

orientation

7. Fullscreen API

The Fullscreen API allows you to display an element or the entire page in full screen.

async function enterFullscreen() {
  await document.documentElement.requestFullscreen();
}

async function exitFullscreen() {
  await document.exitFullscreen();
}
Enter fullscreen mode Exit fullscreen mode

NOTE: To use the Fullscreen API too, you need an interaction from the user.

Finding personal finance too intimidating? Checkout my Instagram to become a Dollar Ninja

Thanks for reading

Need a Top Rated Front-End Development Freelancer to chop away your development woes? Contact me on Upwork

Want to see what I am working on? Check out my Personal Website and GitHub

Want to connect? Reach out to me on LinkedIn

Follow me on Instagram to check out what I am up to recently.

Follow my blogs for bi-weekly new Tidbits on Dev

FAQ

These are a few commonly asked questions I get. So, I hope this FAQ section solves your issues.

  1. I am a beginner, how should I learn Front-End Web Dev?
    Look into the following articles:

    1. Front End Development Roadmap
    2. Front End Project Ideas
  2. Would you mentor me?

    Sorry, I am already under a lot of workload and would not have the time to mentor anyone.

Top comments (49)

Collapse
 
anubarak profile image
Robin Schambach

Liar - I knew them all 😜
Especially intersection observers should be used on many pages in order to increase the performance.

Another great tool for custom management systems or other content like this is the Broadcast channel Api. The Drag and Drop API is also interesting (to avoid library overhead)

Collapse
 
tmgaston profile image
Tchinda MOISE GASTON

Interesting.

Collapse
 
htho profile image
Hauke T.

Nice Post.

I'd suggest you to add links to the according MDN pages.

Note that the WebShare API is not available (yet) in Firefox Desktop: developer.mozilla.org/en-US/docs/W...

Collapse
 
adam_cyclones profile image
Adam Crockett 🌀

Learned one or two thanks 🙏

Collapse
 
bretbernhoft profile image
Bret Bernhoft

The clipboard API is one of the more powerful tools mentioned on this post, in my opinion. You can add entire files, including images, to a persons clipboard in association with any event. That's a lot of flexibility.

Collapse
 
abdulmuminyqn profile image
Abdulmumin yaqeen

Really great API's.

Please is it possible to share media with the Web Share Api?

Collapse
 
zalithka profile image
Andre Greeff

the MDN docs for the Web Share API does state:

The Web Share API allows a site to share text, links, files, and other content to user-selected share targets, utilizing the sharing mechanisms of the underlying operating system.

the docs for the navigator.share() also includes a list of shareable types. so yes, you can indeed share "media files". (:

Collapse
 
varshithvhegde profile image
Varshith V Hegde

I particularly like screen Capture API

Collapse
 
legaciespanda profile image
Ernest Obot

Lovely

Collapse
 
junaidashraf profile image
Junaid Ashraf

Wow it's just amazing, thanks dude. Such a helpful post. My takeaway, Screen Capture API & Intersection Observer API 😋

Collapse
 
wilmela profile image
Wilmela

Lovely, thanks for sharing.

Collapse
 
saurabhmisra profile image
Saurabh Misra

Wow! This is a great list. I wasn't aware of any of these native APIs. Thanks for sharing.👍