Websocket not connecting for my application.

[pastel vale]

When i try to connect web socket for my application , it throw error like this
script.js:16 WebSocket connection to 'wss://sts.sandbox.deepgram.com/agent?access_token=863a57cecb34541e16621bf18efb2651771771be' failed:
script.js:36 WebSocket error: Event {isTrusted: true, type: 'error', target: WebSocket, currentTarget: WebSocket, eventPhase: 2, …}

Whats the issue. Is there any specific format to put API here? Need assist?

[silver reef]

Hey there! This channel allows you to ask Kapa.ai for assistance. But it looks like you haven't connected your Discord profile to your Deepgram account yet. You can do so at https://community.deepgram.com - by doing so, you'll be able to ask questions in #1115960287183511643 if you need human assistance!

[timid perch]

Hi @pastel vale. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

Based on the information provided in the knowledge sources, it appears you're experiencing an issue connecting to Deepgram's WebSocket API. Let's address this step by step:

1. API Endpoint: The URL you're using (wss://sts.sandbox.deepgram.com/agent) is not the standard Deepgram WebSocket URL. The correct WebSocket URL for Deepgram's live transcription API is wss://api.deepgram.com/v1/listen Deepgram API Specifics (https://developers.deepgram.com/docs/lower-level-websockets#deepgram-api-specifics).

2. Authentication: It seems you're passing the API key directly in the URL as an access_token parameter. This is not the correct method for Deepgram authentication. Instead, you should use an Authorization header with your API key WebSocket Connections (https://developers.deepgram.com/docs/troubleshooting-websocket-data-and-net-errors-when-live-streaming-audio#websocket-connections).

Here's an example of how you should set up your WebSocket connection in JavaScript:

const apiKey = "YOUR_DEEPGRAM_API_KEY";
const ws = new WebSocket("wss://api.deepgram.com/v1/listen", {
    headers: {
      Authorization: `Token ${apiKey}`,
    },
});

3. Error Handling: Make sure you have proper error handling in place. The Deepgram API provides custom HTTP headers for debugging information Debugging Websocket Errors (https://developers.deepgram.com/docs/troubleshooting-websocket-data-and-net-errors-when-live-streaming-audio#debugging-websocket-errors).

4. API Key Format: Ensure your API key is correct and doesn't contain any dashes Sudden Deepgram Failure (https://github.com/orgs/deepgram/discussions/645).

5. Network Issues: If you're still having problems, it could be related to network connectivity. Try using ping and traceroute to check your connection to the Deepgram domain/IP Troubleshooting (https://developers.deepgram.com/docs/lower-level-websockets#troubleshooting).

If you continue to experience issues after making these changes, I recommend using Deepgram's streaming test suite (https://github.com/deepgram/streaming-test-suite) to ensure you can stream basic audio to Deepgram before building your custom integration How can I troubleshoot my WebSocket errors? (https://deepgram.gitbook.io/help-center/support/how-can-i-troubleshoot-my-websocket-errors).

If the problem persists, please provide more details about your implementation, including any relevant code snippets and the full error message you're receiving.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@pastel vale Kapa.ai is still learning and improving, please let me know how I did by reacting below.

[pastel vale]

so we need add token authorization for connecting web socket right?

@timid perch

[timid perch]

Let me check the knowledge base for you again. One moment! :books:

Sorry @pastel vale, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist:

Perhaps try again in 15mins?

[pastel vale]

how to set this angular?

@timid perch

[timid perch]

Let me check the knowledge base for you again. One moment! :books:

Sorry @pastel vale, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist:

Perhaps try again in 15mins?

[pastel vale]

How to set api in Angular @timid perch

[timid perch]

Let me check the knowledge base for you again. One moment! :books:

---

To set up the Deepgram API in an Angular application, you'll need to follow these steps:

1. Install the Deepgram SDK:
   First, install the Deepgram JavaScript SDK using npm:

npm install @deepgram/sdk

2. Import and initialize the Deepgram client:
   In your Angular component or service, import and initialize the Deepgram client:

import { createClient } from '@deepgram/sdk';

// Initialize the client with your API key
const deepgram = createClient('YOUR_DEEPGRAM_API_KEY');

3. Create a WebSocket connection:
   To use the live transcription feature, you'll need to create a WebSocket connection:

const connection = deepgram.listen.live({
  model: 'nova',
  punctuate: true,
  // Add other options as needed
});

4. Handle WebSocket events:
   Set up event listeners for the WebSocket connection:

connection.on('open', () => {
  console.log('WebSocket connection established');
});

connection.on('transcriptReceived', (data) => {
  console.log('Transcript:', data);
});

connection.on('error', (error) => {
  console.error('Error:', error);
});

connection.on('close', () => {
  console.log('WebSocket connection closed');
});

5. Send audio data:
   When you have audio data to send (e.g., from a microphone), you can send it to Deepgram:

// Assuming you have audio data in a Uint8Array format
connection.send(audioData);

Remember to handle the WebSocket connection lifecycle appropriately in your Angular component or service. You may want to create and close the connection based on the component's lifecycle hooks (e.g., ngOnInit and ngOnDestroy).

For more detailed information on using the Deepgram SDK in a web environment, you can refer to the Deepgram JavaScript SDK documentation (https://developers.deepgram.com/docs/node-sdk-streaming-transcription).

Note that while this example uses TypeScript (which is common in Angular projects), the Deepgram SDK usage is essentially the same as in JavaScript. Make sure to adapt this code to fit your specific Angular application structure and needs.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@pastel vale Kapa.ai is still learning and improving, please let me know how I did by reacting below.

[pastel vale]

this.connection = new WebSocket('wss://api.deepgram.com/v1/listen?access_token=863a57cecb34541e16621bf18efb2651771771be');

is this correct integration for angular?

@timid perch

[timid perch]

Let me check the knowledge base for you again. One moment! :books:

[silver reef]

Hey there, it looks like you've been talking with Kapa for a bit. If you need additional help, you should consider moving to #1115960287183511643 where our team can answer your query.

[timid perch]

Sorry @pastel vale, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist:

Perhaps try again in 15mins?

[pastel vale]

this.connection = new WebSocket('wss://api.deepgram.com/v1/listen?access_token=863a57cecb34541e16621bf18efb2651771771be');

is this correct integration for angular? @timid perch

this.connection = new WebSocket('wss://api.deepgram.com/v1/listen?access_token=863a57cecb34541e16621bf18efb2651771771be');

is this correct integration for angular? @timid perch

[timid perch]

Let me check the knowledge base for you again. One moment! :books:

---

The integration you've shown is not the correct way to connect to Deepgram's WebSocket API in Angular. There are a couple of issues with this approach:

1. Authentication: You're passing the API key directly in the URL as an access_token parameter. This is not the recommended or secure method for Deepgram authentication.

2. WebSocket initialization: While you're using the correct WebSocket URL, the authentication and setup process can be improved.

Instead, here's the correct way to integrate Deepgram's WebSocket in Angular:

const API_KEY = 'YOUR_DEEPGRAM_API_KEY';

this.connection = new WebSocket('wss://api.deepgram.com/v1/listen', {
  headers: {
    'Authorization': 'Token ' + API_KEY
  }
});

This approach follows the recommended practice as shown in the WebSocket Connections (https://github.com/orgs/deepgram/discussions/707) documentation. It uses the correct WebSocket URL and passes the API key in the headers, which is more secure.

Additionally, you might want to consider using the Deepgram SDK for a more robust integration. Here's how you could do that in Angular:

import { Deepgram } from '@deepgram/sdk';

// In your component or service
const deepgram = new Deepgram(API_KEY);

const dgSocket = deepgram.transcription.live({
  punctuate: true,
  // Add other options as needed
});

dgSocket.addListener('open', () => console.log('Connection opened.'));

dgSocket.addListener('close', () => console.log('Connection closed.'));

dgSocket.addListener('transcriptReceived', (message) => {
  console.log(message);
  // Handle the transcription result
});

This approach, based on the Deepgram documentation for real-time transcription (https://developers.deepgram.com/docs/transcribe-meetings-in-realtime#sending-data-to-the-deepgram-api), provides a more feature-rich and easier-to-use interface for interacting with Deepgram's API.

Remember to handle errors, manage the WebSocket lifecycle properly, and ensure you're not exposing your API key in client-side code. It's generally better to handle API keys on the server-side for security reasons.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: