Not able to import in React.js | Not sure if browser support is available as no documentation about it

[gajendra93]

Hi

I am referring this sample to use the Speech APIs in my React.js application

below is what i am trying to do

import Speech from '@google-cloud/speech';
import record from 'node-record-lpcm16';

const speech = Speech();
		const options = {
		    config: {
		      	// Configure these settings based on the audio you're transcribing
		      	encoding: 'LINEAR16',
		      	sampleRate: 16000
		    }
		};

		// Create a recognize stream
		const recognizeStream = speech.createRecognizeStream(options)
		    .on('error', console.error)
		    .on('data', (data) => process.stdout.write(data.results));

	  	// Start recording and send the microphone input to the Speech API
	  	record.start({ sampleRate: 16000 }).pipe(recognizeStream);

But this fails to instantiate the Speech object

Am i missing something or there is something which is not documented for use in React.js/Angular.js?

[jmdobry]

Is your application something that runs in the browser or on the server (via Node.js)? The samples in this repository only run on the server.

[rajiff]

@jmdobry it Brunson browser compiled using web pack on server for bundling

Can you suggest any alternative for using on browser or how we can change it, we can try change and create a pull request

[jmdobry]

You can manually make an HTTP request to the Google Cloud Speech API from the browser. You'll need an API Key to authenticate. With Angular 1.x, it might be something like:

$http({
  method: 'POST',
  url: 'https://speech.googleapis.com/v1beta1/speech:syncrecognize',
  params: {
    key: 'YOUR_API_KEY'
  },
  data: {
    config: {
      encoding: 'LINEAR16', // customize for your audio
      sampleRate: 16000 // customize for your audio
    },
    audio: {
      content: 'as0af8s7d0fa9sd7f=' // base64-encoded string of the content of your audio file
      // or if your audio file is in Google Cloud Storage, "uri" instead:
      // uri: 'gs://your-bucket/your-audio-file'
    }
  }
}).then(...);

I don't have a bigger example to give you at the moment, but when I do I'll post back here.

[rajiff]

Nice, only worry is, this will expose API key over browser, need to check

[jmdobry]

That is the concern. We generally expect there to be a proxy between the browser and the Speech API, such as your own backend server.