microsoft / microsoft/BotFramework-WebChat

microphone `Speech recognition error` within iframe component

Open
#4,731 4 comments 0 reactions 1 assignee View on GitHub

Nobody has claimed this yet.

Bot Services bug customer-replied-to customer-reported
Dominant language
HTML
Stars
1.8k
Forks
1.6k
Avg merge
22h 58m
Merged PRs (30d)
2

Description

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:

 const webchatOptions = {
        ... // some parameters
        webSpeechPonyfillFactory: window.WebChat.createBrowserWebSpeechPonyfillFactory()
    };

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"
image
It only happens within the iframe component (not when the webchat is open in full screen).

More details:

  1. In the browser settings, the website had microphone permissions. Also tried to reset the permissions and the issue persisted.
  2. The error was reproduced in Chrome and Edge, but the microphone worked in Safari
  3. The error was reproduced in "https" url as well as local run ("localhost:...")
  4. the iframe has the attribute allow="microphone *" and I added a Permission-Policy header:
app.use((req, res, next) => {
    res.setHeader('Permissions-Policy',
        'microphone=*');
    next();
});
  1. The microphone button used to work before
Do you see any errors in console log?
SpeechRecognitionErrorEvent
Error: Speech recognition is not supported
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:
image
After the second click - the following error appears in the console and the webchat panel becomes white blank screen:
image
image

Do you have any screenshots or recordings to repro the issue?

No response

Adaptive Card JSON

No response

Additional context

No response

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.