Open jespertheend opened 12 months ago
This is definitely broken. If I had to guess I'd suggest this is a CSP error - but it is hard to know when the console is disabled by the page.
Ideally this would be fixed by adding an MDN CSP exception to allow data URL to be captured from the canvas and assigned to the image: then this could work as a normal live example. Perhaps transfer to yari and cross link to other ones like https://github.com/mdn/yari/issues/7964 ?
The HTML, CSS, and JavaScript work as expected on Firefox 119 and Chromium 118 https://plnkr.co/edit/hjQMryVCkXMhpvFw?open=lib%2Fscript.js.
Here https://developer.mozilla.org/en-US/play we get
Blocked opening 'https://
.mdnplay.dev/runner.html' in a new window because the request was made in a sandboxed frame whose 'allow-popups' permission is not set.
When you look at the source of the request (view-source:https://live.mdnplay.dev/en-US/docs/Web/API/Media_Capture_and_Streams_API/Taking_still_photos/runner.html?id=demo
in Chrome) it seems like the html elements inside the <body>
are missing. Not sure why though.
Can someone move this to yari. Setting allow-popups
on the frame isn't something an author has control over.
@LeoMcA Note that this would be even better if we could pass the data URL for the copy of the canvas within the context of the MDN page - then we could have this running within the page rather than having the code to pop up. I'm pinging you because like the CSP issues, this is a case where an author probably needs a process for getting specific permissions in their example.
We discussed this internally and an option might be to use the EmbedLiveSampleUrl
macro instead of the EmbedLiveSample
macro.
@hamishwillee Does this make sense?
Does this make sense?
I don't know - what's EmbedLiveSampleUrl and why should that work when the current approach doesn't?
If it works that is a pragmatic solution, but not one I like. LIve examples that work in the page are much better than ones that take you out of context.
@caugner This got reported again in https://github.com/mdn/content/issues/31159, so I tried to use EmbedLiveSampleUrl
as suggested in https://github.com/mdn/yari/issues/9646#issuecomment-1803606827. However that macro does not seem to exist.
MDN URL
https://developer.mozilla.org/en-US/docs/Web/API/Media_Capture_and_Streams_API/Taking_still_photos
What specific section or headline is this issue about?
https://developer.mozilla.org/en-US/docs/Web/API/Media_Capture_and_Streams_API/Taking_still_photos#result
What information was incorrect, unhelpful, or incomplete?
The button in the example works, and opens a new page. But that page is completely blank.
What did you expect to see?
A running demo of the code.
Do you have any supporting links, references, or citations?
No response
Do you have anything more you want to share?
No response
MDN metadata
Page report details
* Folder: `en-us/web/api/media_capture_and_streams_api/taking_still_photos` * MDN URL: https://developer.mozilla.org/en-US/docs/Web/API/Media_Capture_and_Streams_API/Taking_still_photos * GitHub URL: https://github.com/mdn/content/blob/main/files/en-us/web/api/media_capture_and_streams_api/taking_still_photos/index.md * Last commit: https://github.com/mdn/content/commit/acfe8c9f1f4145f77653a2bc64a9744b001358dc * Document last modified: 2023-07-07T07:19:19.000Z