deepgram-js-sdk
deepgram-js-sdk copied to clipboard
TypeError: Invalid base URL wss://api.deepgram.com
I am integrating Deepgram JS SDK in React Native. Following this documentation (https://developers.deepgram.com/docs/node-sdk-streaming-transcription)
I initialised the SDK doing this: import { createClient } from "@Deepgram/sdk";
const deepgram = createClient("DEEPGRAM_API_KEY");
But on this line: const live = deepgram.listen.live({ model: "nova-2" });
I am getting this error: TypeError: Invalid base URL wss://api.deepgram.com
I am working in ReactNative 0.72. Can anyone guide me, what is the issue and what I am doing wrong.
import {useCallback, useEffect, useMemo, useRef, useState} from 'react';
import {
checkMultiple,
PERMISSIONS,
request,
RESULTS,
} from 'react-native-permissions';
import usePlatform from '../usePlatform';
import LiveAudioStream from 'react-native-live-audio-stream';
import {Buffer} from 'buffer';
import {LiveTranscriptionEvents, createClient} from '@deepgram/sdk';
const audioOptions = {
sampleRate: 32000,
channels: 1,
bitsPerSample: 16,
audioSource: 6,
bufferSize: 4096,
wavFile: '',
};
const useDeepgram = () => {
const API_KEY = '...';
const [isRecording, setIsRecording] = useState(false);
const {isIOS} = usePlatform();
const client = useMemo(() => createClient(API_KEY), []);
const keepAlive = useRef<NodeJS.Timeout>();
const setupDeepgram = useCallback(() => {
const deepgram = client.listen.live({
// TODO: to use language as input
language: 'en-US',
detect_language: true,
interim_results: true,
punctuate: true,
model: 'nova-2-general',
smart_format: true,
});
if (keepAlive.current) clearInterval(keepAlive.current);
keepAlive.current = setInterval(() => {
console.log('deepgram: keepalive');
deepgram.keepAlive();
}, 10 * 1000);
deepgram.addListener(LiveTranscriptionEvents.Open, async () => {
console.log('deepgram: connected');
deepgram.addListener(LiveTranscriptionEvents.Transcript, data => {
console.log('deepgram: packet received');
console.log('deepgram: transcript received', data);
});
deepgram.addListener(LiveTranscriptionEvents.Close, async () => {
console.log('deepgram: disconnected');
clearInterval(keepAlive.current);
deepgram.requestClose();
});
deepgram.addListener(LiveTranscriptionEvents.Error, async error => {
console.log('deepgram: error received', error);
});
deepgram.addListener(LiveTranscriptionEvents.SpeechStarted, async () => {
console.log('deepgram: speech started');
});
deepgram.addListener(LiveTranscriptionEvents.Unhandled, async () => {
console.log('deepgram: unhandled');
});
deepgram.addListener(LiveTranscriptionEvents.Metadata, data => {
console.log('deepgram: packet received');
console.log('deepgram: metadata received', data);
});
});
return deepgram;
}, [client]);
const deepgram = useMemo(setupDeepgram, [setupDeepgram]);
useEffect(() => {
return () => {
deepgram.requestClose();
deepgram.removeAllListeners();
};
}, [deepgram]);
useEffect(() => {
async function requestPermission() {
if (isIOS) {
const status = await checkMultiple([PERMISSIONS.IOS.MICROPHONE]);
if (status['ios.permission.MICROPHONE'] !== RESULTS.GRANTED) {
await request(PERMISSIONS.IOS.MICROPHONE);
}
} else {
const status = await checkMultiple([PERMISSIONS.ANDROID.RECORD_AUDIO]);
if (status['android.permission.RECORD_AUDIO'] !== RESULTS.GRANTED) {
await request(PERMISSIONS.ANDROID.RECORD_AUDIO);
}
}
}
requestPermission();
}, [isIOS]);
const onStart = useCallback(() => {
deepgram.on(LiveTranscriptionEvents.Open, async () => {
deepgram.on(LiveTranscriptionEvents.Transcript, data => {
console.log('🚀 ~ deepgram.on ~ data:', data);
});
setIsRecording(true);
LiveAudioStream.init(audioOptions);
LiveAudioStream.on('data', data => {
const chunk = Buffer.from(data, 'base64');
deepgram.send(chunk);
});
LiveAudioStream.start();
});
}, [deepgram]);
const onStop = useCallback(() => {
LiveAudioStream.stop();
setIsRecording(false);
}, []);
return {onStart, onStop, isRecording};
};
export default useDeepgram;
I've seen this posted by others using React Native. I am not a native app engineer so I have no way to reproduce this. It is likely something to do with our namespaced options is not working in React Native. I'd need someone from the community to help me reproduce and/or fix
Adding another voice here that is hitting this exact issue. I'm using a stack almost identical to @ndbac - nothing fancy on the tooling side.
The error comes from iOS returning nil when trying to create the WS URL: https://developer.apple.com/documentation/foundation/nsurlcomponents/1416476-initwithurl
I'm planning to ditch the JS SDK and build the WS manually at this point. Hopefully some of this info will help Deepgram find and implement a fix.
Same issue here as @ndbac mentioned. Seem that not able to implement DeepGram with reactnative. Hope that Deepgram can release the fix version soon. @lukeocodes
As mentioned we don't support React Native on this SDK yet. It is open source, so we welcome the community to dig into this
Is this fixed yet?
I've not looked at this a ton recently but I did when we started leveraging deepgram. I've a fork at https://github.com/techgaun/deepgram-js-sdk/tree/react-native-build (which does branch off older version) but that does work for react-native and we've been using the fork in production for past several months. Just add the following line in your dependencies under package.json. I'll try finding some time to update for the more recent versions of the SDK
"@deepgram/sdk": "git+https://github.com/techgaun/deepgram-js-sdk.git#05861bc"
Thank you, @techgaun . I am getting a different error now, using your fork. "TypeError: undefined is not an object (evaluating 'process.versions.node')"
@VaishnavGarodia what version of react-native are you using? Are you using expo? Also, what's the nodejs version you have? I am surprised coz I'm looking at node doc for process.versions.node and it seems to be there since version v0.2.0. But probably a way could be just to drop the process.versions.node also as it only seems to be used to construct an user-agent for non-browser clients.
- React: 18.3.1
- React Native: 0.76.6
- Node Js: v22.11.0
- I was using expo before but then I did expo eject on my project. Do you think this is what is causing the issue?
On Thu, Feb 13, 2025 at 3:31 PM Samar Dhwoj Acharya < @.***> wrote:
@VaishnavGarodia https://github.com/VaishnavGarodia what version of react-native are you using? Are you using expo? Also, what's the nodejs version you have? I am surprised coz I'm looking at node doc for process.versions.node https://nodejs.org/api/process.html#processversions and it seems to be there since version v0.2.0.
— Reply to this email directly, view it on GitHub https://github.com/deepgram/deepgram-js-sdk/issues/326#issuecomment-2657923421, or unsubscribe https://github.com/notifications/unsubscribe-auth/AQI2Z5STLIWNP6UHZEIEVV32PUTO3AVCNFSM6AAAAABMFRCJ5GVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDMNJXHEZDGNBSGE . You are receiving this because you were mentioned.Message ID: @.***> [image: techgaun]techgaun left a comment (deepgram/deepgram-js-sdk#326) https://github.com/deepgram/deepgram-js-sdk/issues/326#issuecomment-2657923421
@VaishnavGarodia https://github.com/VaishnavGarodia what version of react-native are you using? Are you using expo? Also, what's the nodejs version you have? I am surprised coz I'm looking at node doc for process.versions.node https://nodejs.org/api/process.html#processversions and it seems to be there since version v0.2.0.
— Reply to this email directly, view it on GitHub https://github.com/deepgram/deepgram-js-sdk/issues/326#issuecomment-2657923421, or unsubscribe https://github.com/notifications/unsubscribe-auth/AQI2Z5STLIWNP6UHZEIEVV32PUTO3AVCNFSM6AAAAABMFRCJ5GVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDMNJXHEZDGNBSGE . You are receiving this because you were mentioned.Message ID: @.***>
@VaishnavGarodia well that should not be it but anyway I made some changes and have new commit hash.
"@deepgram/sdk": "git+https://github.com/techgaun/deepgram-js-sdk.git#0f99094
try the above and see if that works. I am also working on updating my fork with the upstream
@techgaun I tried your fork. It works perfectly