JavaScript能否在iOS/Android浏览器检测并禁用屏幕镜像？

Great question—this is a common pain point for media platforms aiming to protect copyrighted content from unauthorized playback via system-level mirroring. Let’s break down your two core questions:

1. Can JavaScript detect and block system-level mirroring (iOS AirPlay Mirroring, Miracast, etc.) in browsers? #

Short answer: No, not reliably or consistently across platforms. Here’s why:

• Browser sandbox limitations: Browsers run in a restricted sandbox that prevents JavaScript from accessing low-level system state, including whether a device is actively mirroring its screen. This is a deliberate security and privacy choice to limit what web apps can extract about your system.
• Platform-specific gaps:
  • iOS Safari: There’s no public API to directly detect AirPlay Mirroring. Hacky workarounds (like checking for sudden jumps in window.screen resolution) are unreliable—they can’t distinguish between mirroring and connecting an external display normally. Apple also restricts access to system-level screen capture state in Safari to protect user privacy.
  • Android/Chrome: Similarly, there’s no standard API to detect Miracast/WiDi mirroring. Resolution-based checks are hit-or-miss and fail in scenarios where users have multiple displays connected natively.
• Native vs. browser difference: Mobile native apps can detect mirroring because they have access to platform-specific APIs (e.g., iOS’s UIScreen.isCaptured property, Android’s MediaProjection callbacks). Browsers don’t expose these sensitive APIs to JavaScript.

In short, you can’t reliably block system-level mirroring using JavaScript in the browser—your existing AirPlay/Chromecast blocks are the best you can do for browser-specific casting protocols.

2. How does Netflix detect mirroring to non-HDCP displays in Safari? #

Netflix’s implementation relies on DRM (Digital Rights Management) integration with Safari’s media stack, specifically using Apple’s FairPlay DRM. Here’s the step-by-step breakdown:

1. DRM Setup: When playing protected content, Netflix uses Safari’s Encrypted Media Extensions (EME) to establish a DRM session with FairPlay.
2. System-Level HDCP Check: The FairPlay DRM module integrates with iOS/macOS’s low-level media output system, which automatically checks if the display device supports HDCP (High-bandwidth Digital Content Protection). If the content is mirrored to a non-HDCP-compliant display, the system triggers a DRM error.
3. JS Error Handling: Netflix’s JavaScript code listens for DRM-related error events from the video element, then uses that signal to block playback and show a user-facing error message.

Here’s a simplified example of how you might listen for these errors in Safari:

const protectedVideo = document.getElementById('protected-video');

// Handle encrypted content to initialize DRM
protectedVideo.addEventListener('encrypted', (event) => {
  // Initialize FairPlay DRM session here (requires integration with a DRM provider)
});

// Listen for media errors, including DRM-related issues
protectedVideo.addEventListener('error', (event) => {
  if (protectedVideo.error.code === MediaError.MEDIA_ERR_ENCRYPTED) {
    // Extract DRM-specific error details
    const drmErrorMessage = protectedVideo.error.message;
    // Check for HDCP-related failure (message wording varies by platform)
    if (drmErrorMessage.includes('HDCP') || drmErrorMessage.includes('output protection')) {
      protectedVideo.pause();
      // Show custom error to the user
      document.getElementById('error-message').textContent = 
        "Playback is not allowed on non-HDCP compliant displays.";
    }
  }
});

Key notes:

• This only works for DRM-protected content. Non-encrypted content can’t leverage this system-level enforcement, as there’s no mechanism for the browser to check output protection.
• The actual HDCP detection is handled by the browser’s DRM engine, not pure JavaScript—JS just acts on the error events emitted by the system.
• Behavior varies by browser and DRM provider: Chrome uses Widevine DRM, which has similar output protection logic but may emit different error codes or messages.

If you’re looking to replicate this functionality, you’ll need to implement DRM for your content (via EME) and partner with a DRM provider that supports output protection checks. There’s no way to do this for unencrypted media.

内容的提问来源于stack exchange，提问作者codneto