Open Noam-Microsoft opened 1 year ago
@Noam-Microsoft - Thank you for notifying about this. I will attempt a repro and will keep you updated. In the meantime, are you able to include a minimum reproducible example of code that demonstrates the issue? This would be useful in case there is a difference in implementation that might be leading to the issue.
I am looking at this now.
I made an HTML page that use Web Speech API like the way Web Chat use. Surprisingly, it works in an IFRAME. However, I see Web Chat is failing when it is in the IFRAME under the same page. I didn't apply any sandbox attributes to both IFRAME. So, it's a good repro.
Going to investigate a bit more.
It seems when the IFRAME is pointing to a website outside of the origin of the hosting page, speech recognition will not be allowed.
Confirmed. This is not an issue on Web Chat.
The reason why Chrome/Edge says "not-allowed"
is because the IFRAME origin is not the same as the host origin. Thus, developer would need to explicitly specify <iframe allow="microphone">
to enable microphone access across origins.
If allow="microphone"
is not added, cross origin IFRAME will have microphone disabled and error out with "not-allowed"
.
I have a demo repository showing the problem is outside of Web Chat. You will need to clone or use GitHub Codespaces to try it out.
Edit: This issue occurs only within iframe component.
Is it an issue related to Adaptive Cards?
No
Is this an accessibility issue?
No
What version of Web Chat are you using?
Latest production
Which distribution are you using Web Chat from?
Bundle (webchat.js)
Which hosting environment does this issue primarily affect?
Web apps
Which browsers and platforms do the issue happened?
Browser: Edge (latest), Browser: Chrome (latest)
Which area does this issue affect?
Speech
What is the public URL for the website?
No response
Please describe the bug
I created a webchat panel with microphone button with:
The webchat is embedded in my web app within
<iframe>
component. The web app has microphone permissions but when I click the microphone button within the iframe I get Speech recognition error: "Error: Speech recognition is not supported" It only happens within the iframe component (not when the webchat is open in full screen).More details:
allow="microphone *"
and I added a Permission-Policy header:Do you see any errors in console log?
How to reproduce the issue?
click on the mic button within the iframe and look at the console. Also, after clicking the button twice the webchat panel freezes The web app is private so we can't supply URL.
What do you expect?
We expect that clicking the microphone button once will turn the microphone icon red and will type the speech in the webchat panel.
What actually happened?
After the first click on the mic button- nothing happens on the screen and the following error appears in the console: After the second click - the following error appears in the console and the webchat panel becomes white blank screen:
Do you have any screenshots or recordings to repro the issue?
No response
Adaptive Card JSON
No response
Additional context
No response