transloadit/uppy · error · Error

Screen capture is not supported

Error message

Screen capture is not supported

What it means

captureScreenshot throws this when navigator.mediaDevices.getDisplayMedia is missing, i.e. the current environment does not support the Screen Capture API. The plugin guards explicitly before attempting to capture a screenshot of the shared screen.

Source

Thrown at packages/@uppy/screen-capture/src/ScreenCapture.tsx:535

        ),
      )
    }

    const name = `screencap-${Date.now()}.${fileExtension}`
    const blob = new Blob(this.recordingChunks!, { type: mimeType })
    const file = {
      source: this.id,
      name,
      data: new Blob([blob], { type: mimeType }),
      type: mimeType,
    }

    return Promise.resolve(file)
  }

  async captureScreenshot(): Promise<void> {
    if (!this.mediaDevices?.getDisplayMedia) {
      throw new Error('Screen capture is not supported')
    }

    try {
      let stream = this.videoStream

      // Only request new stream if we don't have one
      if (!stream) {
        const newStream = await this.selectVideoStreamSource()
        if (!newStream) {
          throw new Error('Failed to get screen capture stream')
        }
        stream = newStream
      }

      const video = document.createElement('video')
      video.srcObject = stream

      await new Promise((resolve) => {

View on GitHub (pinned to 5d4dedd02a)

Solutions

  1. Serve the app over HTTPS (or localhost) so getDisplayMedia is exposed
  2. Add allow="display-capture" to any iframe embedding the app
  3. Feature-detect and hide/disable the screenshot button when the API is absent

Example fix

// before
<button {...plugin.getScreenshotButtonProps()} />

// after
const canScreenshot = typeof navigator.mediaDevices?.getDisplayMedia === 'function'
{canScreenshot && <button {...plugin.getScreenshotButtonProps()} />}
Defensive patterns

Strategy: type-guard

Validate before calling

if (typeof navigator.mediaDevices?.getDisplayMedia !== 'function') {
  // hide screenshot UI
}

Type guard

const hasDisplayMedia = (md?: MediaDevices): md is MediaDevices & { getDisplayMedia: () => Promise<MediaStream> } =>
  typeof md?.getDisplayMedia === 'function'

Try / catch

try { await plugin.captureScreenshot() } catch (e) { if (e.message === 'Screen capture is not supported') { /* disable feature */ } }

Prevention

When it happens

Trigger: Calling captureScreenshot() (or clicking the screenshot button from getScreenshotButtonProps) in a browser or context where mediaDevices.getDisplayMedia is undefined: insecure http origins, some WebView/embedded browsers, or older Safari/Firefox.

Common situations: App served over plain http, iframes without the allow="display-capture" permission policy, corporate WebViews, or unit tests in jsdom where the API doesn't exist.

Related errors


AI-assisted analysis of transloadit/uppy@5d4dedd02a (2026-08-28). Data as JSON: /api/errors/5c21c72d2968dd61. Report an issue: GitHub.