How to import Deepgram nodeJS SDK in VueJS 3 project-CodePudding

I'm trying to install Deepgram SDK for Node.JS and use it in my VueJS 3 application. Each time I try to import the SDK it gives me several errors.

how can I use Node SDK in my vue project?

my main.js

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import "./tailwind.css";
import AudioVisual from "vue-audio-visual";

const { Deepgram } = require("@deepgram/sdk");

createApp(App).use(router).use(AudioVisual).mount("#app");

 WAIT  Compiling...                                                                                          11:45:31 PM

Compiling...


 ERROR  Failed to compile with 5 errors                                                                      11:45:32 PM

 error  in ./node_modules/@deepgram/sdk/dist/httpRequest.js

Module not found: Error: Can't resolve 'fs' in 'F:\Projects\be-readable\node_modules\@deepgram\sdk\dist'

fy") }'
        - install 'https-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "https": false }
 @ ./node_modules/@deepgram/sdk/dist/projects.js 40:20-44
 @ ./node_modules/@deepgram/sdk/dist/index.js 6:17-38
 @ ./src/main.js 11:15-39

ERROR in ./node_modules/@deepgram/sdk/dist/transcription/liveTranscription.js 23:36-58
Module not found: Error: Can't resolve 'querystring' in 'F:\Projects\be-readable\node_modules\@deepgram\sdk\dist\transcription'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "querystring": require.resolve("querystring-es3") }'
        - install 'querystring-es3'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "querystring": false }
 @ ./node_modules/@deepgram/sdk/dist/transcription/index.js 40:26-56
 @ ./node_modules/@deepgram/sdk/dist/index.js 7:22-48
 @ ./src/main.js 11:15-39

ERROR in ./node_modules/@deepgram/sdk/dist/transcription/preRecordedTranscription.js 54:36-58
Module not found: Error: Can't resolve 'querystring' in 'F:\Projects\be-readable\node_modules\@deepgram\sdk\dist\transcription'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "querystring": require.resolve("querystring-es3") }'
        - install 'querystring-es3'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "querystring": false }
 @ ./node_modules/@deepgram/sdk/dist/transcription/index.js 41:33-70

webpack compiled with 6 errors

CodePudding user response：

The Deepgram Node SDK doesn't support browser-based use cases. It is strictly server-side as it requires Node specific methods like fs and querystring.

You can still use the Deepgram API with Vue though. You'll just need to hit the API directly. The API reference is a good resource to see what's possible as far as features and parameters to send. Also, this blog post has some sample code that will show you how to access the mic in your browser and send it to Deepgram.

CodePudding user response：

You can't use the node SDK in this way, but you can open a connection to Deepgram in your Vue frontend by creating a browser Websocket:

// open connection to Deepgram
   const socket = new WebSocket("wss://api.deepgram.com/v1/listen", [
      "token",
      "YOUR_API_KEY",
    ]);

There would be no need to require Deepgram in the main.js file where you have

const { Deepgram } = require("@deepgram/sdk");

Your API key lets you connect directly to DG, although including that in the browser is not secure and would expose your key.

Then inside socket.onopen() you can write all your logic to listen to the stream. I would use an HTML audio player like this:

<audio src="http://lyd.nrk.no/nrk_radio_alltid_nyheter_aac_h" controls></audio>

Then use the MediaStreams API to get the browser microphone, listen for the audio that is playing, and send that data to Deepgram.

This blog post has html and vanilla javascript that would work the same in Vue.js https://developers.deepgram.com/blog/2021/11/live-transcription-mic-browser/. No need for the SDK.