WebChat - Direct Line Speech adapter error: WebSocket connection failed with 400

Question

I have a Bot service running on Azure. I'm trying to voice enable the bot, however I keep getting Websocket connection error.

I have the echo-bot running on the server side. I followed this tutorial and I added a Direct Line Speech channel to the bot with a cognitive speech service on Azure portal. As the client, I used the sample Direct Line Speech sample. Here is the full code:

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <script
      crossorigin="anonymous"
      src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
    <title>Speech Test</title>
          <style>
      html,
      body {
        height: 100%;
      }

      body {
        margin: 0;
      }

      #webchat {
        height: 100%;
        width: 100%;
      }
    </style>
  </head>
  <body >
    <div id="root"></div>
    <div id="webchat" role="main"></div>
    <script>
      (async function () {
        async function fetchCredentials(){
          const res = await fetch(
            "https://westeurope.api.cognitive.microsoft.com/sts/v1.0/issueToken",
            {
              method: "POST",
              headers: {
                "Ocp-Apim-Subscription-Key": `XXXXXXXXX`,
              },
            }
          );
          if (!res.ok) {
            throw new Error("Failed to fetch authorization token and region.");
          }
          return { authorizationToken: await res.text(), region: "westeurope" };
        };
        const adapters = await window.WebChat.createDirectLineSpeechAdapters({
          fetchCredentials
        });

        window.WebChat.renderWebChat(
          {
          ...adapters
          },
          document.getElementById("webchat")
        );
        document.querySelector("#webchat > *").focus();
      })().catch((err) => err);
    </script>
  </body>
</html>

What might be the reason for Websocket to fail? I appreciate any help.

Version

<meta name="botframework-directlinespeech:version" content="4.11.0">
<meta name="botframework-webchat:bundle:variant" content="full">
<meta name="botframework-webchat:bundle:version" content="4.11.0">
<meta name="botframework-webchat:core:version" content="4.11.0">
<meta name="botframework-webchat:ui:version" content="4.11.0">

Error

Firefox can’t establish a connection to the server at wss://westeurope.convai.speech.microsoft.com/api/v3?language=en-US&format=simple&Authorization=<XXXXXXXXXXXX>&X-ConnectionId=7047B4CE339E4DFDA5435664DEF8CE58

Are you able to connect to your bot using ordinary Direct Line rather than Direct Line Speech? And have you tried in any browsers other than Firefox? — Kyle Delaney, Feb 01 '21 at 19:54
Yes, I tried Direct Line and it works fine. Regarding the browsers, I tried running on Firefox, Chrome and Safari and it's the same error. — Pinar, Feb 02 '21 at 13:56
Have you tried running the bot locally and using a tunneling service like ngrok? — Kyle Delaney, Feb 02 '21 at 18:48

score 0 · Answer 1 · answered Feb 02 '21 at 00:38

could you please check if following troubleshooting guidance works? https://learn.microsoft.com/en-us/azure/cognitive-services/Speech-Service/troubleshooting#error-websocket-upgrade-failed-with-an-authentication-error-403

It says Error: HTTP 400 Bad Request is an error usually occurs when the request body contains invalid audio data. Only WAV format is supported. Also, check the request's headers to make sure you specify appropriate values for Content-Type and Content-Length.

WebChat - Direct Line Speech adapter error: WebSocket connection failed with 400

1 Answers1