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

[ndbac]

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;

[lukeocodes]

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

[ckhicks]

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.

[nguyen2v]

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

[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