search

mdn / yari

The platform code behind MDN Web Docs
Mozilla Public License 2.0
1.17k stars 500 forks source link

getUserMedia example not working #9646

Open jespertheend opened 12 months ago

jespertheend commented 12 months ago

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
hamishwillee commented 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 ?

guest271314 commented 12 months ago

The HTML, CSS, and JavaScript work as expected on Firefox 119 and Chromium 118 https://plnkr.co/edit/hjQMryVCkXMhpvFw?open=lib%2Fscript.js.

guest271314 commented 12 months ago

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.

jespertheend commented 12 months ago

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.

hamishwillee commented 12 months ago

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.

caugner commented 10 months ago

We discussed this internally and an option might be to use the EmbedLiveSampleUrl macro instead of the EmbedLiveSample macro.

@hamishwillee Does this make sense?

hamishwillee commented 10 months ago

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.

hamishwillee commented 8 months ago

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