Skip to content

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

Closed

Description

@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?

Activity

  1. jmdobry commented on Dec 21, 2016

    @jmdobry
    Member

    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.

  2. rajiff commented on Dec 21, 2016

    @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

  3. jmdobry commented on Dec 22, 2016

    @jmdobry
    Member

    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.

  4. rajiff commented on Dec 23, 2016

    @rajiff

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

  5. jmdobry commented on Aug 21, 2017

    @jmdobry
    Member

    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.

  6. added a commit that references this issue on Nov 3, 2022
  7. added a commit that references this issue on Nov 16, 2022
  8. added a commit that references this issue on Nov 16, 2022
  9. added a commit that references this issue on Nov 18, 2022
  10. added a commit that references this issue on Nov 18, 2022
  11. added a commit that references this issue on Nov 22, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    🚨This issue needs some love.triage meI really want to be triaged.

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions