Cannot view video elements in Sentry Replay

[slicertech]

Is there an existing issue for this?

• I have checked for existing issues https://github.com/getsentry/sentry-javascript/issues
• I have reviewed the documentation https://docs.sentry.io/
• I am using the latest SDK release https://github.com/getsentry/sentry-javascript/releases

How do you use Sentry?

Sentry Saas (sentry.io)

Which SDK are you using?

@sentry/react

SDK Version

7.77.0

Framework Version

"react": "^18.1.0"

Link to Sentry event

https://mytaverse.sentry.io/replays/06a07cfc9c304836a242b2dda5124ae4

SDK Setup

Sentry.init({
  dsn: process.env.REACT_APP_SENTRY_DSN,

  // This sets the sample rate to be 10%. You may want this to be 100% while
  // in development and sample at a lower rate in production
  replaysSessionSampleRate: Number(process.env.REACT_APP_SENTRY_REPLAY_SESSION_RATE || 0.1),
  // If the entire session is not sampled, use the below sample rate to sample
  // sessions when an error occurs.
  replaysOnErrorSampleRate: Number(process.env.REACT_APP_SENTRY_REPLAY_ERROR_RATE || 1.0),

  environment: getSentryEnvironment(),
  integrations: [
    new BrowserTracing(),
    new Sentry.Breadcrumbs({ dom: false, console: true }),
    new Sentry.Replay({
      maskAllText: false,
      maskAllInputs: false,
      blockAllMedia: false,
      networkDetailAllowUrls: [
        window.location.origin,
        'amazonaws.com',
        'mytaverse.com',
        'pureweb.io',
        'dolby.io',
        'coreweave'
      ],
    }),
  ],
  beforeBreadcrumb(breadcrumb, hint) {
    if (!breadcrumb.category || !hint) {
      return breadcrumb;
    }

    const category = breadcrumb.category as SentryBreadcrumbCategory;

    if (
      checkIsTransactionCategory(category) ||
      checkIsFetchCategory(category)
    ) {
      return null;
    }

    const updatedBreadcrumb = sanitizedBreadcrumb(breadcrumb, hint);

    return updatedBreadcrumb;
  },
  tracesSampleRate: 1.0,
});

Steps to Reproduce

Hi,
We have a react application viewed on a web browser, usually Chrome. We display video content in a video HTML tag from "@tensorworks/libspsfrontend": "^0.3.4". Essentially pixel streaming.
We cannot view the video content in the replays.
Also, in a less complicated fashion, we display a YouTube video in an iFrame. This also does not display. While the YouTube content is not important, I am assuming that they are both related.

Tried unblock: ['img', 'video', 'object', 'picture', 'embed', 'map', 'audio'], but did not work.

Expected Result

I can see video content in replays.

Actual Result

We just see a blank element.

[mydea]

Hey!

I think we cannot capture streamed video content. Replay can only capture videos if they are hosted as a file (e.g. /assets/my-video.mp4), because replay does not capture a video reproduction of what is happening on screen, but captures dom changes to replay those. Maybe this is really a documentation issue, where we should explain this better. cc @billyvg / @bruno-garcia / @jas-kas ?

[jas-kas]

@mydea our troubleshooting page on Replay SDK docs seems like a good spot. :)

We could also make it clearer what is captured and what isn't in the "What is a replay?" docs --> https://docs.sentry.io/product/session-replay/?original_referrer=https%3A%2F%2Fdocs.sentry.io%2F#what-is-a-replay

[mydea]

We've added docs to explain this! so hopefully this is clearer in the future.