Created
December 6, 2019 17:20
-
-
Save savelee/a3a3f46f393e0e9ce0aa4318bde50b08 to your computer and use it in GitHub Desktop.
A best practice for streaming audio from a browser microphone to Dialogflow or Google Cloud STT by using websockets.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <title>RecordRTC over Socket.io</title> | |
| <meta http-equiv="content-type" content="text/html; charset=utf-8" /> | |
| <script src="https://www.WebRTC-Experiment.com/RecordRTC.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io-stream/0.9.1/socket.io-stream.js"></script> | |
| </head> | |
| <body> | |
| <div> | |
| <button id="start-recording" disabled>Start Recording</button> | |
| <button id="stop-recording" disabled>Stop Recording</button> | |
| </div> | |
| <script type="text/javascript"> | |
| const socketio = io(); | |
| const socket = socketio.on('connect', function() { | |
| // reset the recorder | |
| startRecording.disabled = false; | |
| }); | |
| const startRecording = document.getElementById('start-recording'); | |
| const stopRecording = document.getElementById('stop-recording'); | |
| let recordAudio; | |
| // on start button handler | |
| startRecording.onclick = function() { | |
| // recording started | |
| startRecording.disabled = true; | |
| // make use of HTML 5/WebRTC, JavaScript getUserMedia() | |
| // to capture the browser microphone stream | |
| navigator.getUserMedia({ | |
| audio: true | |
| }, function(stream) { | |
| recordAudio = RecordRTC(stream, { | |
| type: 'audio', | |
| mimeType: 'audio/webm', | |
| sampleRate: 44100, // this sampleRate should be the same in your server code | |
| // MediaStreamRecorder, StereoAudioRecorder, WebAssemblyRecorder | |
| // CanvasRecorder, GifRecorder, WhammyRecorder | |
| recorderType: StereoAudioRecorder, | |
| // Dialogflow / STT requires mono audio | |
| numberOfAudioChannels: 1, | |
| // get intervals based blobs | |
| // value in milliseconds | |
| // as you might not want to make detect calls every seconds | |
| timeSlice: 5000, | |
| // as soon as the stream is available | |
| ondataavailable: function(blob) { | |
| // making use of socket.io-stream for bi-directional | |
| // streaming, create a stream | |
| var stream = ss.createStream(); | |
| // stream directly to server | |
| // it will be temp. stored locally | |
| ss(socket).emit('stream', stream, { | |
| name: '../_temp/stream.wav', | |
| size: blob.size | |
| }); | |
| // pipe the audio blob to the read stream | |
| ss.createBlobReadStream(blob).pipe(stream); | |
| } | |
| }); | |
| recordAudio.startRecording(); | |
| stopRecording.disabled = false; | |
| }, function(error) { | |
| console.error(JSON.stringify(error)); | |
| }); | |
| }; | |
| // on stop button handler | |
| stopRecording.onclick = function() { | |
| // recording stopped | |
| startRecording.disabled = false; | |
| stopRecording.disabled = true; | |
| // stop audio recorder | |
| recordAudio.stopRecording(function() { | |
| // after stopping the audio, get the audio data | |
| recordAudio.getDataURL(function(audioDataURL) { | |
| var files = { | |
| audio: { | |
| type: recordAudio.getBlob().type || 'audio/wav', | |
| dataURL: audioDataURL | |
| } | |
| }; | |
| // submit the audio file to the server | |
| socketio.emit('message', files); | |
| }); | |
| }); | |
| }; | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment