Botframework-webchat: Debug site shows microphone, site deployed to Azure does not

[rvallireply]

Version

Cdn latest (4.7.1)

Describe the bug

Launching a Virtual Assistant template webchat in debug from Visual Studio shows the cognitive speech services microphone and works.

Deploying the page to Azure and opening it does not show the microphone and in console we have a warning:

webchat.js:2 web-speech-cognitive-services: This browser does not support WebRTC and it will not work with Cognitive Services Speech Services.

Steps to reproduce

launch page with webchat and cognitive speech services enabled from Visual Studio debug (chrome) and check speech works

deploy the page to Azure and check it doesn't work

Expected behavior

Cognitive speech recognition should be enabled work either in development and production.

Additional context

Same browser (Chrome) in both cases.
I compared the page source code from both environments and they are identical, only the Azure deployed one gives the warning and cognitive speech is not enabled.

[anusharavindrar]

@rvallireply looks like the issue is similar to this one already reported. Can you attach the documentation/tutorial(detailed steps) you are following? Also, what OS and which version of the Chrome are you currently using?

[rvallireply]

@anusharavindrar my current OS is Windows10, and Chrome is Version 79.0.3945.130 (Official Build) (64-bit).

Here I paste the page code to test (to use with the default.htm of the Virtual Assistant template):

    <script>
        async function InitializeWebChat() {
            const res = await fetch('https://webchat.botframework.com/api/tokens', {
                method: 'GET',
                headers: {
                    Authorization: 'BotConnector xxxxxxxxxxxxxxxxxxxxxxxx'
                }
            });

            const token = await res.json();
            var dl = window.WebChat.createDirectLine({ secret: token });

            const styleSet = window.WebChat.createStyleSet({
                bubbleBackground: 'rgba(0, 255, 0, .2)',
                bubbleFromUserBackground: 'rgba(0, 255, 255, .4)',
                rootHeight: '85%',
                rootWidth: '40%'
            });

            styleSet.textContent = {
                ...styleSet.textContent,
                fontFamily: "'Tahoma', 'Arial', sans-serif",
                fontWeight: '400' //'bold'
            };

            const subscriptionKey = '2xxxxxxxxxxxxxx6'; 

            const webSpeechPonyfillFactory = await window.WebChat.createCognitiveServicesSpeechServicesPonyfillFactory({
                region: 'northeurope', //await fetchSpeechServicesRegion(),
                subscriptionKey: subscriptionKey
            });



            window.WebChat.renderWebChat({
                directLine: dl,
                webSpeechPonyfillFactory, //passing this to enable speech services
                locale: 'it-IT',
                language: 'it-IT',
                styleSet // Passing 'styleSet' when rendering Web Chat
            }, document.getElementById('webchat'));

            document.querySelector('#webchat > * input[type=text]').focus();

            var welcome = function () {
                var imgwelcome = document.createElement('img');
                imgwelcome.setAttribute('src', 'data:image/png;base64,iVBOR *an image here* ');
                imgwelcome.setAttribute('style', 'display: block;margin-left: auto;margin-right: auto;width: 50%;');
                document.querySelector("#webchat ul").appendChild(imgwelcome);

            };
            if (
                document.readyState === "complete" ||
                (document.readyState !== "loading" && !document.documentElement.doScroll)
            ) {
                welcome();
            } else {
                document.addEventListener("DOMContentLoaded", welcome);
            }



            var userId = '??????'; 
            var userName = '??????' 

            var activity = {
                from: {
                    id: userId,
                    name: userName
                },
                name: 'startConversation',
                type: 'event',
                value: '',
                channelData: {
                    "personId": userId,
                    "environment": window.location.host
                }
            };

            dl.postActivity(activity).subscribe(function (id) {
            });

        }

        InitializeWebChat();

    </script>

[compulim]

Most browsers disabled microphone support on insecure HTTP site.

Please browse your website with HTTPS.

[corinagum]

This note is unrelated to speech:
@rvallireply, you can remove language: 'it-IT' from your renderWebChat function. language was a documentation mistake that has now been modified in our docs. locale is the correct prop. Sorry for the confusion!!

[rvallireply]

Please browse your website with HTTPS.

Thanks @compulim ! That was it.
Closing the issue.