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

Question

我正在尝试为 Node.JS 安装 Deepgram SDK 并在我的 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

Deepgram Node SDK 不支持 browser-based 用例。它是严格的 server-side，因为它需要节点特定的方法，如 fs 和 querystring。

尽管如此，您仍然可以将 Deepgram API 与 Vue 一起使用。您只需要直接点击 API。 API reference is a good resource to see what's possible as far as features and parameters to send. Also, this blog post 有一些示例代码，将向您展示如何在浏览器中访问麦克风并将其发送到 Deepgram。

Answer 2

您不能以这种方式使用节点 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 密钥可让您直接连接到 DG，尽管将其包含在浏览器中并不安全并且会暴露您的密钥。

然后在 socket.onopen() 中，您可以编写所有逻辑来收听流。我会像这样使用 HTML 音频播放器：

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

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

此博客 post 有 html 和原版 javascript，它们在 Vue.js https://developers.deepgram.com/blog/2021/11/live-transcription-mic-browser/ 中同样有效。无需SDK。

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

How to import Deepgram nodeJS SDK in VueJS 3 project

javascript

node.js

vue.js

sdk