Resizing the live view iframe

[randy-johnson]

Hello,

I am working on a feature that resizes the iframe in the live viewer. This allows me to record events in a 34" screen and have the whole think viewable on a 23" screen.

It works good for the most part, but the mouse pointer is off. More details below.

Here is how I go about it:

1. get the size of the wrapper:

rect = document.getElementById('stage_wrapper').getBoundingClientRect();

2. set the size of the iframe (This is the rrweb player iframe)

$("#stage_wrapper iframe").attr('width',rect.width).attr('height',rect.height);

3. Then I loop over the live view event positions sent via socketio running them through 2 functions to get the new coordinates. I found these functions on a stack overflow post.

function getNewX(xValue, oldWidth, newWidth){
  return xValue * newWidth / oldWidth;
}

function getNewY(yValue, oldHeight, newHeight){
  return yValue * newHeight / oldHeight;
}

for(var i = 0; i < positions.length; i++) {
    event.data.positions[i].x = getNewX(positions[i].x,e.rect.width, rect.width);
    event.data.positions[i].y = getNewY(positions[i].y,e.rect.height, rect.height);
}

This kind of works. The closer I am to the center of the screen on the recording screen the closer the mouse is to the proper point on the live view screen. The farther away I get from the center of the screen the less accurate the point is correct.

I did find that If I - 75 from the x coordinate like this,

event.data.positions[i].x = getNewX(positions[i].x-75,e.rect.width, rect.width);

the results are pretty close to accurate towards the center but get less accurate as I move closer to the edge just like before.

It is good enough for a demo but not so much long term.

I feel like I am so close to getting this to work but cannot seem to put a finger on the issue.

Do you have any advice, or functions or what I can possibly read about to get closer to my goal?

Thank You,

Randy

[Yuyz0112]

@randy-johnson In rrweb-player, I use CSS transform scale to do resize: https://github.com/rrweb-io/rrweb-player/blob/master/src/Player.html#L66

Does it fit your need?

[randy-johnson]

Can you elaborate a bit?

I am still a little lost.

Thank You.

[eoghanmurray]

I think the idea would be along the lines of the following?

<div class="replayer-wrapper" style="transform:scale(0.4);">

Where the 0.4 might be calculated based on knowledge of the browser viewport dimensions vs. size of the recording viewport.

I've also got a solution based on a wrapping <svg> and <foreignObject> which makes the replaying full sized and responsive, i.e. if you change the browser viewport dimensions the playback dimensions also scale accordingly so as to always fit on screen.

[randy-johnson]

Wow, that was a lot easier than what I was trying to do. Thank You.

[js199069]

as we face this problem we find new way to handle it for responsive

          let rr_player = Array.from(document.getElementsByClassName('rr-player') as HTMLCollectionOf<HTMLElement>)
          let player__frame = Array.from(document.getElementsByClassName('rr-player__frame') as HTMLCollectionOf<HTMLElement>)
          player__frame[0].style.width = "100%"
          rr_player[0].style.width = "100%"

      this is for react
      if you want to use it in pure java script  you can use this:
     ` document.getElementsByClassName('rr-player').style.width = "100%"`
      as we set  .style.width = "100%"  we can handle width change with  bootstrap col-