Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
ndbac opened this issue Aug 8, 2024 · 4 comments
Open

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

ndbac opened this issue Aug 8, 2024 · 4 comments
Labels
bug Something isn't working react-native

Comments

@ndbac
Copy link

ndbac commented Aug 8, 2024

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
Copy link
Contributor

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 lukeocodes added bug Something isn't working react-native labels Sep 2, 2024
@ckhicks
Copy link

ckhicks commented Sep 4, 2024

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
Copy link

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
Copy link
Contributor

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working react-native
Projects
None yet
Development

No branches or pull requests

4 participants