Search code examples
botframeworkbotsweb-chat

How to Start a Bot with the Microphone On on Botframework V4 and Webchat


I'm building an bot that needs to start voice interactions with the user since from start.
In other words, the user is supposed to hear a welcome message and them be able to speak with the bot right away without having to click on the mic icon.
I'm using bot framework V4 and the latest version of the webchat.js
Code snippet used to start the bot as follows:

  (async function () {

        const searchParams = new URLSearchParams(window.location.search);

        //Speech Service Token Generation
        const subscriptionKey = 'XXXX';
        const region = 'brazilsouth';
        let webSpeechPonyfillFactory;

        //Speech Service Setting
        webSpeechPonyfillFactory = await window.WebChat.createCognitiveServicesSpeechServicesPonyfillFactory({
            credentials: {
                authorizationToken: speechAuthToken,
                region: region
            }
        });

        //Direct-Line BotToken Generation
        const res = await fetch('https://directline.botframework.com/v3/directline/tokens/generate', { method: 'POST', headers: { Authorization: 'Bearer ' + 'XXXXX' } });
        const { token } = await res.json();
        //***
        //Bot Service Setting
        window.WebChat.renderWebChat({
            directLine: window.WebChat.createDirectLine({ token }),
            store,
            userID: "User",
            styleOptions,
            locale: 'pt-BR',
            selectVoice: (voices, activity) =>
                activity.locale === 'pt-BR'
                    ? voices.find(({ name }) => /Daniel/iu.test(name))
                    : voices.find(({ name }) => /Daniel/iu.test(name)) ||
                    voices.find(({ name }) => /Daniel/iu.test(name)),
            webSpeechPonyfillFactory
        }, document.getElementById('botBody'));
        document.querySelector('#botBody > *').focus();

        var mainTag = chatbot.getElementsByClassName('main')[0];
        mainTag.style.borderTop = chatbot.dataset.cbBorder;
    })().catch(err => console.error(err));

How can I accomplish that? Thx


Solution

  • Unfortunately, at this time, this is not a supported feature of Web Chat. Technically, the browser blocks any speech being initiated without some sort of user gesture / voice input, first.

    Development is in progress to mitigate this issue in Web Chat (issue #2211), however there is no specific ETA. This update has currently been pushed out to the next release, R9, but there are indications it could be part of R10. In other words, consider deployment "subject to change".

    If this is important to you, consider adding your interest in the above link (and possibly in this issue, as well).

    Hope of help!