v0 Code to stream audio from Client to Server written
This commit is contained in:
Paoda
parent
ed506d631a
commit
9f6adb3a29
|
|
@ -59,3 +59,5 @@ typings/
|
||||||
|
|
||||||
# next.js build output
|
# next.js build output
|
||||||
.next
|
.next
|
||||||
|
|
||||||
|
dist/main.js
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -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");
|
||||||
|
|
@ -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")
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue