javascript - 如何在VueJS 3项目中导入Deepgram nodeJS SDK

Question

我正在尝试安装Deepgram SDK Node.JS 并在我的 VueJS 3 应用程序中使用它。每次我尝试导入 SDK 时都会出现几个错误。

如何在我的 vue 项目中使用 Node SDK？

我的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

Answer 1

您不能以这种方式使用 Node SDK，但您可以通过创建浏览器 Websocket 在 Vue 前端中打开与 Deepgram 的连接:

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

不需要在 main.js 文件中添加 Deepgram

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

您的 API key 可让您直接连接到 DG，尽管将其包含在浏览器中并不安全并且会暴露您的 key 。

然后在socket.onopen()中你可以编写所有逻辑来监听流。我会使用这样的 HTML 音频播放器:

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

然后使用 MediaStreams API 获取浏览器麦克风，监听正在播放的音频，并将该数据发送到 Deepgram。

这篇博文包含 html 和 vanilla javascript，它们在 Vue.js 中的工作方式相同 https://developers.deepgram.com/blog/2021/11/live-transcription-mic-browser/ 。无需SDK。