Speech functionality not working in IFrame

Question

I have a bot client and in which I have enabled speech functionality. Everything works fine when I open the bot client in new window. Recently we have added this bot client site url in a page as IFrame. In this all the functionalities are working fine except speech functionality. When we are clicking on microphone icon nothing is happening.

Have tried in multiple browsers and devices, same issue in all the devices. Windows - Chrome, IE IPad, IPhone

Is it the expected behavior? or Do i need to update anything?

Please let me know if you want me to share any code.

Code.

 speechOptions = {
        speechRecognizer: new CognitiveServices.SpeechRecognizer({
            subscriptionKey:
                'xxx'
        }),
        speechSynthesizer: new CognitiveServices.SpeechSynthesizer({
            gender: CognitiveServices.SynthesisGender.Female,
            subscriptionKey: 'xxx'
            voiceName: 'Microsoft Server Speech Text to Speech Voice (en-US, ZiraRUS)'
        })
    };
    BotChat.App({
        botConnection: botConnection,
        user: { id: model.userId, Username: LoginUser,},
        bot: { id: model.botId, name: model.botName },
        resize: 'window',
        speechOptions: speechOptions,
        locale: 'en',
        sendTypingIndicator: true
    }, document.getElementById('BotChatElement'));

    botConnection
        .postActivity({
            from: user,
            name: 'requestWelcomeDialog',
            type: 'event',
            value: ''
        })
        .subscribe(function (id) {
            console.log('"trigger requestWelcomeDialog" sent');
        });

Answer 1

There's a few things you need to do in order to get speech working with WebChat.

1. Ensure that you are not using the version of WebChat with the embed code from the Azure Portal. You must use one of the WebChat bundles (use one of the es5 bundles if you want it to work in IE)

2. Speech Services are not supported on many version of major browsers. Ensure that you and your users are only using supported browsers or use Bing Speech

3. Chrome (and likely in the future, other browsers) blocks microphone access until certain interactions occur first on the page/iFrame. You should be able to get around this with <iframe allow="microphone *">