v0 Code to stream audio from Client to Server written

2018-08-31 15:19:35 +01:00
parent ed506d631a
commit 9f6adb3a29
6 changed files with 3605 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -59,3 +59,5 @@ typings/

 # next.js build output
 .next
+
+dist/main.js
--- a/dist/index.html
+++ b/dist/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>Document</title>
+</head>
+<body>
+  
+  <script src="main.js"></script>
+</body>
+</html> 
--- a/package.json
+++ b/package.json
@@ -0,0 +1,20 @@
+{
+  "name": "websocket-client",
+  "version": "1.0.0",
+  "description": "",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "webpack",
+    "start": "webpack-dev-server --open"
+  },
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "webpack": "^4.17.1",
+    "webpack-cli": "^3.1.0",
+    "webpack-dev-server": "^3.1.7"
+  },
+  "dependencies": {
+    "socket.io-client": "^2.1.1"
+  }
+}
--- a/src/index.js
+++ b/src/index.js
@@ -0,0 +1,84 @@
+import io from 'socket.io-client';
+
+ /**
+  * The Class Responsible for Talking with Polyglot-Node
+  * @param {string} url - URL of NodeJS Server.
+  */
+class WebSocket {
+  constructor(url) {
+    this.io = io(url);
+
+    this.listen(() => {
+      this.grabAudio();
+    });
+  }
+
+  /**
+   * Create socket.io event listeners.
+   * @param {Function} cb  - Called once connected to server.
+   */
+  listen(cb) {
+    this.io.on('disconnect', (err) => {
+      console.error("Disconnected from Server.");
+    })
+
+   this.io.on('connect', (data) => {
+     this.io.emit("join", "Hi There NodeJS!");
+     console.log("Connected to NodeJS Server");
+     cb();
+   });
+  }
+  /**
+   * This Class Grabs the Audio from the User.
+   * Line 26 needs to be replaced with the global variable for localstream found in Rails TODO: Put line
+   * 
+   * DEPRECAION WARNING. This method makes vital use of createScriptProcessor which will be scrapped at some point
+   * in the future. TODO: Switch from createScriptProcessor to AudioWorklet (No documentation as of 2018-08-30)
+   * @deprecated
+   * @async
+   */
+  async grabAudio() {
+    this.io.emit('startRecognition', "en-US");
+
+    AudioContext = window.AudioContext || window.webkitAudioContext;
+    const ctx = new AudioContext();
+    const processor = ctx.createScriptProcessor(2048, 1, 1);
+    processor.connect(ctx.destination);
+    processor.onaudioprocess = e => this.handleBuffer(e);
+    
+    const stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: false });
+    ctx.createMediaStreamSource(stream).connect(processor);
+    ctx.resume();
+  }
+  
+  /**
+   * Takes the Float32Array  Array from the ScriptProcessor Event
+   * and converts it to Int16 for Google Speech to Text use.
+   * @param {AudioProcessingEvent} e Chunk of Audio w/ Audio F32Array
+   */
+  handleBuffer(e) {
+    let l = e.inputBuffer.getChannelData(0);
+    this.io.emit('binary', convertF32ToI16(l));
+
+    /**
+     * 32Khz to 16Khz Audio
+     * Converts Float32 Buffer to Int16Buffer
+     * @param {Float32Array} buffer - Float32 Buffer;
+     * @returns {ArrayBuffer}
+     */
+    function convertF32ToI16(buffer) {
+      let l = buffer.length;
+    
+      let buf = new Int16Array(l/3);
+    
+      while (l--) {
+        if (l % 3 == 0) {
+          buf[l / 3] = buffer[l] * 0xFFFF;
+        }
+      }
+      return buf.buffer;
+    }
+  }
+}
+
+const ws = new WebSocket("http://localhost:1337");
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -0,0 +1,15 @@
+const path = require("path");
+
+module.exports = {
+  mode: "development",
+  entry: "./src/index.js",
+  devtool: 'inline-source-map',
+  devServer: {
+    contentBase: "./dist",
+    port: 8080
+  },
+  output: {
+    filename: "main.js",
+    path: path.resolve(__dirname, "dist")
+  }
+}
--- a/yarn.lock
+++ b/yarn.lock