Google Cloud speech with React Native

Question

I am trying to use Google Cloud Speech API so I can pass audio file and receive the translated text but I am stuck to the integration. I already have api key and everything needed but can't find how to use it from react native. In the documentation there is only explanation for node.js (from javascript part). Also there are several libraries out dated or supporting only the one OS. Someone succeeded in that?

The node.js example from the documentation:

// Imports the Google Cloud client library
const Speech = require('@google-cloud/speech');

// Your Google Cloud Platform project ID
const projectId = 'YOUR_PROJECT_ID';

// Instantiates a client
const speechClient = Speech({
  projectId: projectId
});

// The name of the audio file to transcribe
const fileName = './resources/audio.raw';

// The audio file's encoding and sample rate
const options = {
  encoding: 'LINEAR16',
  sampleRate: 16000
};

// Detects speech in the audio file
speechClient.recognize(fileName, options)
  .then((results) => {
    const transcription = results[0];
    console.log(`Transcription: ${transcription}`);
  });

Manasseh

You simply have to develop your own implementation by making a native module for android and iOS . – Denisdenise

Answer 1

You could deploy the code using google app engine and make a post req from react-native. Also need to configure and use google cloud storage to store the audio file for conversion. Here is my server code.

const format = require('util').format;
const fs = require('fs');
const express = require('express');
const multer  = require('multer');
const requestHttp = require('request');
const {Storage} = require('@google-cloud/storage');

// Instantiate a storage client
const storage = new Storage();

// const upload = multer();
const app = express();

// Imports the Google Cloud client library
const speech = require('@google-cloud/speech');

// Creates a client
const client = new speech.SpeechClient();

/**
 * TODO(developer): Uncomment the following lines before running the sample.
 */
const encoding = 'LINEAR16';
const sampleRateHertz = 16000;
const languageCode = 'en-US';

  const upload = multer({
    storage: multer.memoryStorage(),
    limits: {
      fileSize: 5 * 1024 * 1024, // no larger than 5mb, you can change as needed.
    },
  });

  const bucket = storage.bucket(process.env.GCLOUD_STORAGE_BUCKET);


app.post('/upload', upload.single('file') , async (req, res) => {

    const file = await req.file
    if (!file) {
      const error = new Error('Please upload a file')
      error.httpStatusCode = 400
      return next(error)
    }

    // Create a new blob in the bucket and upload the file data.
    const blob = bucket.file(req.file.originalname);
    const blobStream = blob.createWriteStream({
      resumable: false,
    });

    blobStream.on('error', err => {
      next(err);
    });

    blobStream.on('finish', async () => {
        // The public URL can be used to directly access the file via HTTP.
        const publicUrl = await format(
          `https://storage.googleapis.com/${bucket.name}/${blob.name}`
        );
        const request = {
            config: {
              encoding: encoding,
              sampleRateHertz: sampleRateHertz,
              languageCode: languageCode,
            },
            audio: {
                uri: 'gs://YOUR-Bucket-Name/File-name.ext'
            } 
          };
        // Stream the audio to the Google Cloud Speech API
        const [response] = await client.recognize(request);
        const transcription = response.results
          .map(result => result.alternatives[0].transcript)
          .join('\n');
        console.log(`Transcription: `, transcription);
        res.status(200)
            .send({
            success: 'true',
            message: 'Text retrieved successfully',
            text: transcription
            })
            .end();

      });
      blobStream.end(req.file.buffer);
});


const PORT = process.env.PORT || 8080;
app.listen(PORT, () => {
  console.log(`App listening on port ${PORT}`);
  console.log('Press Ctrl+C to quit.');
});

Locomotor

Answer 2

deploy this server to Heroku then from your react native app send the post or get request to this server and get the result on your app. To send post or get request use Axios library https://github.com/axios/axios

Mellon