How to Hide Mouse Cursor in Screen Capture with getDisplayMedia (2026)

Screen capturing is a powerful feature often used for creating tutorials, demonstrations, or even recording gameplay. However, there are times when you want to hide the mouse cursor to keep the focus on the content itself. This tutorial will guide you through the process of using the getDisplayMedia() API in JavaScript to perform screen capture while ensuring the mouse cursor remains hidden.

Key Takeaways

• Learn how to initiate screen capture using the getDisplayMedia() API.
• Understand how to configure media options to hide the mouse cursor.
• Discover troubleshooting tips for common issues.
• Ensure compatibility with different browsers and platforms.

Introduction

JavaScript's getDisplayMedia() API allows web applications to capture the contents of a user's screen. This can include the entire screen, a specific window, or a particular tab. A recurring challenge developers face is hiding the mouse cursor during the capture, especially when the cursor detracts from the content being recorded.

In this tutorial, we will explore how to set up screen capture with getDisplayMedia() while ensuring that the mouse cursor does not appear in the recording. We'll also cover some troubleshooting tips for common issues such as cursor visibility despite configuration settings.

Prerequisites

• Basic understanding of JavaScript and browser APIs.
• A modern web browser that supports the getDisplayMedia() API (e.g., Chrome, Firefox).
• Access to a code editor for creating and running JavaScript code.

Step 1: Setting Up the Environment

Before we start coding, ensure that your environment is ready for JavaScript development. This includes having a text editor like Visual Studio Code and a browser that supports the getDisplayMedia() API. You can verify your browser's compatibility by consulting the Can I use website.

Step 2: Initiating Screen Capture

The core of this tutorial is the getDisplayMedia() API, which enables you to capture screen content. Let's start by writing a function to initiate the screen capture:

async function startScreenRecording() {
  try {
    const displayMediaOptions = {
      video: {
        cursor: "never" // Attempt to hide the cursor
      },
      audio: true // Capture audio as well
    };
    const mediaStream = await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);
    // At this point, mediaStream contains the screen capture
    const videoElement = document.querySelector("video");
    videoElement.srcObject = mediaStream;
    videoElement.onloadedmetadata = () => {
      videoElement.play();
    };
  } catch (err) {
    console.error("Error: ", err);
  }
}

In this code snippet, we set the cursor option to "never" in an attempt to hide the cursor from appearing in the video stream. This option is supposed to prevent the cursor from being included in the video capture.

Step 3: Handling Browser Compatibility

Not all browsers handle the cursor option the same way. While it should work as intended in most modern browsers, there might be discrepancies. Here are some tips to ensure broader compatibility:

• Test your implementation in multiple browsers to verify consistent behavior.
• Check for specific browser flags or settings that may affect screen capture.
• Consider falling back to a visual indicator or overlay to obscure the cursor if it appears.

Step 4: Troubleshooting Common Issues

Despite setting cursor: "never", you might still see the cursor in your captures. Here are some troubleshooting steps:

• Ensure your browser is up-to-date, as older versions may not support all features of the API.
• Verify that no extensions or plugins are interfering with screen capture.
• Check your operating system's settings for mouse visibility options during media playback.
• Test alternate configurations, such as capturing full screen versus a single application window.

Step 5: Example Application

Let's create a simple web application to demonstrate screen capture without the cursor. This application will include basic controls to start and stop recording:

  
  
  Screen Capture Example


  Screen Capture without Cursor
  
  Start Recording
  

The screenCapture.js script will contain the JavaScript code for handling the screen capture process.

Common Errors/Troubleshooting

Even with the correct settings, errors can occur during screen capture. Here are some common issues and their solutions:

• Permission Denied: Ensure your web application has the necessary permissions to access screen capture features.
• Browser Support: Confirm that your browser version supports the getDisplayMedia() API.
• Cursor Visibility: If the cursor still appears, check for browser-specific bugs or inconsistencies.

Frequently Asked Questions

Why is the cursor still visible in my recording?

Ensure your browser is updated and supports the cursor option. Test on different browsers to rule out compatibility issues.

Does the getDisplayMedia() API work on mobile browsers?

Currently, getDisplayMedia() is primarily supported on desktop browsers. Check specific documentation for mobile compatibility updates.

Can I capture audio along with video using getDisplayMedia()?

Yes, you can capture audio by setting the audio option to true in the media options.

Frequently Asked Questions

Why is the cursor still visible in my recording?

Ensure your browser is updated and supports the cursor option. Test on different browsers to rule out compatibility issues.

Does the getDisplayMedia() API work on mobile browsers?

Currently, getDisplayMedia() is primarily supported on desktop browsers. Check specific documentation for mobile compatibility updates.

Can I capture audio along with video using getDisplayMedia()?

Yes, you can capture audio by setting the audio option to true in the media options.