deepgram-js-sdk icon indicating copy to clipboard operation
deepgram-js-sdk copied to clipboard

TypeError: Invalid base URL wss://api.deepgram.com

Open ndbac opened this issue 1 year ago • 11 comments

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;

ndbac avatar Aug 08 '24 02:08 ndbac

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

lukeocodes avatar Aug 29 '24 13:08 lukeocodes

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.

ckhicks avatar Sep 04 '24 14:09 ckhicks

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

nguyen2v avatar Sep 12 '24 16:09 nguyen2v

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

lukeocodes avatar Oct 09 '24 12:10 lukeocodes

Is this fixed yet?

VaishnavGarodia avatar Feb 05 '25 08:02 VaishnavGarodia

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"

techgaun avatar Feb 13 '25 20:02 techgaun

Thank you, @techgaun . I am getting a different error now, using your fork. "TypeError: undefined is not an object (evaluating 'process.versions.node')"

VaishnavGarodia avatar Feb 13 '25 23:02 VaishnavGarodia

@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.

techgaun avatar Feb 13 '25 23:02 techgaun

  • 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 avatar Feb 13 '25 23:02 VaishnavGarodia

@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 avatar Feb 14 '25 22:02 techgaun

@techgaun I tried your fork. It works perfectly

ndbac avatar Jun 17 '25 11:06 ndbac