Live transcription using Websockets for react native

[heady kiln]

I am trying to get voice to text live transcription done via websockets(using socket.io). I'm use the below code to connect to deepgram's server.

const headers = {
      Authorization: `Token API_KEY`,
};
ws = io("wss://api.deepgram.com", { 
  extraHeaders: headers, transports:['websocket'], path: '/v1/listen', addTrailingSlash: false
});
ws.on('connect', () => {
   console.log("Connection open");
 })
ws.on('message', data => {
  console.log("Data", data);
})
ws.on('connect_error', (err) => {
 console.log("ERROR", err);
 console.log(err.description);
 console.log(err.type);
 console.log(err.message);
});

Error - [Error: timeout]

Request Id - e11577b9-5e78-4780-98b0-de9066d2ba74

[neon sapphire]

Hi @heady kiln. 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 knowledge sources provided, I can see that there are a few issues with your approach to connecting to Deepgram's live transcription service using WebSockets in React Native. Let me provide some guidance:

1. Deepgram API Connection:
   Deepgram's live transcription API uses WebSockets, but it doesn't use Socket.io. Instead, you should use a standard WebSocket connection.

2. Connection URL:
   The URL you're using is incorrect. According to the Deepgram API Reference (https://developers.deepgram.com/reference/listen-live), the correct WebSocket URL for live transcription is:

wss://api.deepgram.com/v1/listen

3. Authentication:
   The API key should be passed as a WebSocket subprotocol, not as a header.

Here's a corrected version of your code that should work with React Native:

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

const API_KEY = 'YOUR_API_KEY';
const deepgram = createClient(API_KEY);

const live = deepgram.listen.live({
  language: 'en-US',
  model: 'nova-2',
  smart_format: true
});

live.addListener('open', () => {
  console.log('Connection opened.');
  
  // Start sending audio data here
  // live.send(audioData);
});

live.addListener('transcriptReceived', (transcription) => {
  console.log('Transcript:', transcription);
});

live.addListener('error', (error) => {
  console.error('Error:', error);
});

live.addListener('close', () => {
  console.log('Connection closed.');
});

This code uses the Deepgram JavaScript SDK, which handles the WebSocket connection and authentication for you. It's a more reliable way to connect to Deepgram's services in a JavaScript environment like React Native.

Remember to replace 'YOUR_API_KEY' with your actual Deepgram API key.

For sending audio data, you'll need to capture audio from the device's microphone and send it to Deepgram. The exact method for this depends on what React Native audio capture library you're using.

If you continue to have issues, make sure your API key is correct and that you have the necessary permissions enabled for your Deepgram project.

For more detailed information on using the Deepgram SDK for live streaming, you can refer to the Deepgram Node SDK Streaming Transcription documentation (https://developers.deepgram.com/docs/node-sdk-streaming-transcription).

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

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

[heady kiln]

1. Deeogram Connection - I cannot use standard websocket because there isn't any mechanism to pass headers. So, i won't be able to pass the api key.
2. I am using the same connection url
3. Deepgram's sdk doesn't support react native, so I cannot use it

Whatever you suggested won't work because of the above reasons

@neon sapphire

[neon sapphire]

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

Sorry @heady kiln, 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?

[heady kiln]

ok sure

[heady kiln]

any update?