search

screen-share / element-capture

https://screen-share.github.io/element-capture/
19 stars 6 forks source link

Why does element capture double the devicePixelRatio? #44

Closed eyaler closed 2 weeks ago

eyaler commented 2 weeks ago
  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 commented 2 weeks ago

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 commented 2 weeks ago

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 commented 2 weeks ago

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...