Issue with iframes appearing black even when in same domain v1.70 Chrome and FF

[mgw-sbex]

Our code is working but when we include an iframe from our own domain in the div, it renders as black. There is no CORS message or other error in the console. The snapshot is initiated from a user gesture (button click)

Expected Behavior

See the video player within the iframe with a single frame showing.

Current Behavior

We see any icons or other items overlayed on top of the iframe, but the iframe content is black.

Possible Solution

There is a getUserMedia approach used by other libraries, but we cannot specify the moment to capture from a button. This is because there is a dialogue allowing the capture, for each use of the function.

I think an approach that is based on screensharing and capturing the stream from that and exporting an image frame from the stream might work.

This appears to be a long standing issue going back 10 years with all previous libs such as html2image and others. Most of the posts claim it is a security issue, but we are not seeing a CORS or other console error.

Backend solutions that accept a URL and take a snapshot do not work because our user is watching a specific live video stream at a specific moment and wants to capture that. Also It is within a div, and we don't want the entire page.

It seems stupid that native apps are allowed to do this (for Mac there is Quicktime screen recording, Builtin Shift CMD 4 hotkey for a snapshot of an arbitrary screen region... but not allowed within the browser, even after an explicit user gesture.

The other option would be that the browser exports a virtual screen buffer of the viewport and allow us to copy from that into an image string blob. Everything that is appearing on screen should appear exactly the same in the virtual screen buffer.

Steps To Reproduce

Here is our code:
saveAs(blob, fileName) {
var elem = window.document.createElement('a');
elem.href = blob
elem.download = fileName;
elem.style = 'display:none;';
(document.body || document.documentElement).appendChild(elem);
if (typeof elem.click === 'function') {
elem.click();
} else {
elem.target = '_blank';
elem.dispatchEvent(new MouseEvent('click', {
view: window,
bubbles: true,
cancelable: true
}
));
}
URL.revokeObjectURL(elem.href);
elem.remove();
}

async getPng(elem){
let blob = await htmlToImage.toPng(elem);
return(blob);
}

capture(id) {
let elem = document.getElementById(id);
if (typeof(elem) === undefined) {
console.log('capture: elem undefined' + id)
return;
}
if (elem != null) {
this.getPng(elem)
.then((response) => this.saveAs(response, 'instantreplay.png'));
}
};

Our app is running from https://app.totalvu.tv/.... and the iframe is also HTTPS:// app.totalvu.tv/....

Code is above and works except for recording black instead of the image.

1. ...
2. ...
3. ...

Error Message & Stack Trace

No error messages. The code runs to completion. ```txt ```

Additional Context

Your Environment

Mac OS Catalina with Chrome or FF (latest)
React JS SPA.

• html-to-image: [e.g. 0.1.0] v 1.7.0
• OS: [e.g. macOS Sierra 10.12.3] MacIS 10.15.7
• Browser: [e.g. chrome 78.0.3904.108] Chrome Version 92.0.4515.131 (Official Build) (x86_64)
  image-string.zip
  The image is attached. You can see an icon on top of the iframe in the upper right.

[biiibooo]

👋 @mgw-sbex

Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you include steps to reproduce it.
To help make it easier for us to investigate your issue, please follow the contributing guidelines.

We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

[biiibooo]

Hiya!
This issue has gone quiet. Spooky quiet. 👻
We get a lot of issues, so we currently close issues after 60 days of inactivity. It’s been at least 20 days since the last update here. If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not-stale" to keep this issue open! As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request.

Thanks for being a part of the Antv community! 💪💯

[biiibooo]

Hey again!
It’s been 60 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it. Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to comment on this issue or create a new one if you need anything else. As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request.
Thanks again for being part of the Antv community! 💪💯

[biiibooo]

This thread has been automatically locked because it has not had recent activity. Please open a new issue for related bugs and link to relevant comments in this thread.