I am developing a Laravel application that includes a feature to display 360-degree virtual tours. These tours are loaded into iframes and can be hosted on an AWS S3 bucket or another storage solution. The tours are HTML and JavaScript-based projects that showcase interactive 360-degree views.
I want to add a functionality where users can click a “Comment” button outside the iframe, which opens a sidebar with the current iframe view at the top and an “Add Comment” box below. When the user saves a comment, I need to capture a screenshot of the current iframe view and save it along with the comment.
The problem: I am running into cross-origin restrictions that prevent me from capturing a screenshot of the iframe content.
What I’ve Tried:
- Using libraries like html2canvas to capture the screenshot, but it doesn’t work due to cross-origin policies.
- Investigating CORS settings, but I do not have control over the iframe content to modify headers.
- Considering server-side rendering with headless browsers, but I’m unsure how to integrate it with my current setup.
Questions:
- how can I capture screenshots of cross-origin iframes securely and legally.