Microsoft Bot Framework speech recognition webchat integration

Question

I have a problem with speech recognition integration into webchat. This is the code I use. It´s just the same code like here: https://github.com/microsoft/BotFramework-WebChat/blob/master/SPEECH.md#integrating-web-chat-into-your-page

But I always get the error: Uncaught SyntaxError: Unexpected identifier at line...

and line of error is: webSpeechPonyfillFactory: await createSpeechRecognitionOnlyPonyfillFactory({

Without speech recognition it´s all working. Do you have some idea?

const { createCognitiveServicesSpeechServicesPonyfillFactory, createDirectLine, renderWebChat } = window.WebChat;

const styleOptions = {
		botAvatarInitials: 'Bot',
		userAvatarInitials: 'You'
		};


         renderWebChat(
            {
               directLine: createDirectLine({
                  secret: 'FFFFFFFFFFFFFFFF'
               }),
			   
	     language: 'de-DE',
	     webSpeechPonyfillFactory: await createSpeechRecognitionOnlyPonyfillFactory({
	     region: 'westeurope',
	     subscriptionKey: 'FFFFFFFFFFFFFFFFFFFFFF'
	     }),
			   	      
	      styleOptions
  	     
            },
            document.getElementById('webchat')
	);
         
document.querySelector('#webchat > *').focus();

Stanley Gong Stanley Gong · Accepted Answer · 2020-01-20T02:43:11

Try this :

 <!DOCTYPE html>
  <html lang="en-US">
    <head>
      <title>Web Chat: Cognitive Services Speech Services using JavaScript</title>
      <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
      <style>
        html, body { height: 100% }
        body { margin: 0 }

        #webchat {
          height: 100%;
          width: 100%;
        }
      </style>
    </head>
    <body>
      <div id="webchat" role="main"></div>
      <script>
        (async function () {
            const styleOptions = {
                botAvatarInitials: 'Bot',
                userAvatarInitials: 'You'
                };

            window.WebChat.renderWebChat({
            directLine: createDirectLine({
                secret: 'FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF'
              }),
              language: 'de-DE',
              webSpeechPonyfillFactory: await createCognitiveServicesSpeechServicesPonyfillFactory({
                region: 'westeurope',
                subscriptionKey: 'FFFFFFFFFFFFFFFFFFFFFFFFFFFFFF'
              }),
              styleOptions
            }, document.getElementById('webchat'));
            document.querySelector('#webchat > *').focus();
        })().catch(err => console.error(err));
      </script>
    </body>  
  </html>

Microsoft Bot Framework speech recognition webchat integration

1 Answers