Session replay video player should indicate that it is the PostHog video player

glencbz commented 4 days ago

Feature request

Is your feature request related to a problem?

This was originally posted to: https://posthog.com/questions/can-i-replace-an-element-with-another-element-during-replay. As I understand it, PostHog uses rrweb to capture the replay, and rrweb does not support capturing video streams without a downloadable URL. Since canvases can be captured, however, as a (hilarious) workaround:

I created a <canvas> that is under the <video>, and I'm drawing the contents of the <video> onto the canvas. By being the same size as the video, the canvas is never visible to the end user (see attached image for illustration).
I add CSS styles to the video so that it has opacity: 0 during playback, so that it becomes 'invisible' and the canvas can be seen. The (hilarious) trick here is that the player's <html> element gets the class rrweb-paused when the player is paused, and I can use that to conditionally style the <video>, e.g.:
```
html.rrweb-paused #streamingVideo {
opacity: 0;
}
```
but this means that the video stream is only visible when the player is paused.

Describe the solution you'd like

Permanently add a class to the video player's html element so that it can be used for conditional styling. (Or.. officially support <video> capture, but I know that's a tall order.)

Describe alternatives you've considered

Changing the video stream format to HLS, since there is support for that (unsuccessful, does not work for my setup).
Attaching classes to the player via Chrome plugin/code snippet (hasn't worked yet, but I think it should, in theory).
Posting this feature request to rrweb (the limitations are somewhat PostHog-specific, so I think this might be better here).

Additional context

Overlapping video and canvas:

Debug info

- [ ] PostHog Cloud, Debug information: [please copy/paste from https://us.posthog.com/settings/project-details#variables]
- [ ] PostHog Hobby self-hosted with `docker compose`, version/commit: [please provide]
- [ ] PostHog self-hosted with Kubernetes (deprecated, see [`Sunsetting Kubernetes support`](https://posthog.com/blog/sunsetting-helm-support-posthog)), version/commit: [please provide]

pauldambra commented 2 days ago

Hey Glen,

I don't actually follow the solution you've asked for here, so would be great if you could describe a little more

Posting this feature request to rrweb (the limitations are somewhat PostHog-specific, so I think this might be better here).

Also, since we rely on rrweb could you expand on why the limitation is posthog-specific?

Full disclosure we would want to work towards making what is seen a more-true representation of what was shown to the user I don't think we'd want to capture alternative views that you can swap in... but ofc i might be misunderstanding

Is the site in question public so we can take a look at what is happening during recording?

glencbz commented 2 days ago

I don't actually follow the solution you've asked for here, so would be great if you could describe a little more

Sure. I think I wasn't super clear initially since I don't really know how to put this across. Basically, the rrweb player creates an <iframe> whose internal structure is like this:

<html class=":hover rrweb-paused">
  The captured page here
</html>

Notice that the class .rrweb-paused is present on the html when the player is paused. What I would like is for something like this:

<html class=":hover ph-player rrweb-paused">
  The captured page here
</html>

where the .ph-player class is always applied regardless of whether the player is paused or not. This would allow me to attach CSS in my page that can detect when they are a descendant of html.ph-player so that they can be styled differently. The specific use case I have is that I have a <video> that I would like to capture, but since PostHog does not support <video> capture, I'm trying to implement a workaround where I create a <canvas> that copies the <video> content and lives under the <video>. Then, in the PostHog player, I set the <video>'s opacity to 0 so that I can see the <canvas>.

Posting this feature request to rrweb (the limitations are somewhat PostHog-specific, so I think this might be better here).

Also, since we rely on rrweb could you expand on why the limitation is posthog-specific?

I suppose I didn't phrase this right; what I mean is that I'd expect that PostHog has made their own customisations to how rrweb captures and plays back sessions, and since I'm using PostHog, I figure the best people for me to talk to would be PostHog.

Full disclosure we would want to work towards making what is seen a more-true representation of what was shown to the user I don't think we'd want to capture alternative views that you can swap in... but ofc i might be misunderstanding

Yes, that's a perfectly reasonable goal from your end, and yes, I am sort of creating an alternative view to swap in. If we can get to a state where <video> is supported, then my use case would be obsolete.

Is the site in question public so we can take a look at what is happening during recording?

Unfortunately it is not.

PostHog / posthog