Why does element capture double the devicePixelRatio?

[eyaler]

1. Goto https://element-capture-demo.glitch.me/
2. Open devtools and type devicePixelRatio to observe the value is e.g. 1
3. Capture and restrict to Element
4. Type devicePixelRatio again and observe it has doubled, e.g. 2

The changing of devicePixelRatio is messing up my canvases...

I am not sure if this is an element-capture issue or a general screen capture issue, and I did not find answers in the specs.

Is this intended behavior? If so why? and how could I deal with it? I also tried to play with resizeMode and logicalSurface properties to prevent this, but they had no effect.

[eladalon1983]

Thanks for reporting this!

Note - I don't think this is a spec issue, but rather an implementation issue. I'll take up filing the Chromium bug for you, after I have run some internal queries first.

I'll close this issue (since it's not a spec issue), but if you don't hear back from me in 1 week, please feel free to ping.

[eyaler]

thanks @eladalon1983! followup questions: if you disable the css outline for e.g. greenDiv, you can check that video.videoWidth is exactly greenDiv.clientWidth * devicePixelRatio, where devicePixelRatio is the modified value (2) in the example above. This is seems very strange to me. why would i want to scale up the captured element? i would like my capture stream to have the element dimensions (and change with it). So I tried to solve this be setting the capture stream width to the target clientWidth, and use a ResizeObserver to update the stream width when the target width changes. However, I found out that be setting a fixed stream width I can affect the behavior of the original element, which goes against the spec, moreover it seems I can effect the behavior of an element in another tab! namely, when you call requestFullScreen on the original element captured in the same tab, or on document.body of a different captured tab, it will be down-sampled to the defined stream width?! I will try to prepare a demo for you, lmk if you want to get on a call

[eyaler]

to recreate the original size effect issue:

1. goto https://wool-leeward-copper.glitch.me/
2. capture a different tab
3. you will be switched to that tab
4. open devtools and type: document.body.requestFullscreen()
5. observe page is downsampled to 100px width. this is because i set {video: {width: 100}} in the demo

so if i am not going crazy, this issue is preventing me from dynamically setting the stream width as mentioned above, with the goal of solving the double resolution issue...