add speech recorder + ws

src/background.ts

@@ -5,6 +5,29 @@ import { createProtocol } from "vue-cli-plugin-electron-builder/lib";
 import installExtension, { VUEJS_DEVTOOLS } from "electron-devtools-installer";
 const isDevelopment = process.env.NODE_ENV !== "production";
 import * as path from "path";
+import { SpeechRecorder } from "speech-recorder";
+import WebSocket from "ws";
+
+const ws = new WebSocket("ws://localhost:8080");
+ws.on("open", function open() {
+  ws.send("hello fro client");
+});
+ws.on("message", (message: any) => {
+  console.log("received message", message);
+});
+
+const recorder = new SpeechRecorder();
+
+recorder.start({
+  onAudio: (audio: object, speech: boolean) => {
+    if (speech) {
+      console.log(audio);
+      ws.send(audio);
+    }
+    console.log("recording");
+    // writeStream.write(audio);
+  }
+});
 
 // Keep a global reference of the window object, if you don't, the window will
 // be closed automatically when the JavaScript object is garbage collected.

src/components/microphone/index.vue

@@ -7,64 +7,7 @@
 <script>
  import { defineComponent } from 'vue';
  export default defineComponent({
-   name: 'Microphone',
-   async setup() {
-     const bufferLen = 4096;
-     const numChannels = 1;
-     window.AudioContext = window.AudioContext || window.webkitAudioContext;
-     const audioContext = new AudioContext();
-
-      let result;
-      let cWasm;
-      const getCwasm = async () => {
-        await import('../../../crate/pkg').then(async module => {
-            cWasm = module;
-        });
-      }
-     await getCwasm();
-
-     function handleStream(stream) {
-       const source = audioContext.createMediaStreamSource(stream);
-       const context = source.context;
-       // NOTE might come in handy for VAD
-       // const sampleRate = context.sampleRate;
-
-       const node = context.createScriptProcessor.call(
-         context,
-         bufferLen,
-         numChannels,
-         numChannels
-       );
-
-       node.onaudioprocess = async e => {
-         const inputBuff = new Float32Array(bufferLen);
-         // get data from audio event and copy into inputBuff
-         e.inputBuffer.copyFromChannel(inputBuff, 0);
-         const int16 = new Int16Array(inputBuff.buffer);
-         result = await cWasm.foo(int16);
-
-           // TODO add handle audio stream to main process?
-           // window.postMessage(
-           //   {
-           //     myTypeField: "handle-audio-stream",
-           //     audioData: int16,
-           //   },
-           //   "*"
-           // );
-       };
-       source.connect(node);
-       node.connect(context.destination);
-     }
-
-       navigator.mediaDevices
-         .getUserMedia({ audio: true })
-           .then(s => {
-             handleStream(s);
-           }).catch(error => {
-             throw error;
-
-           });
-   }
+     name: 'Microphone',
  })
 
 </script>

src/main.ts

@@ -1,4 +1,4 @@
-import { createApp, provide, inject } from "vue";
+import { createApp } from "vue";
 import App from "./App.vue";
 import router from "./router";
 import store from "./store";