I want to make a twilio call to my phone number and transcribe it using Deepgram, then want to display the transcription on the browser.

The call part is successfully done.

Now, I want to send data to the client and display it on the browser. But I am not able to do it. The console.log('Transcription to send ----- ', dataToSend) in the sendToClient function is printing the data, but not able to send to the client.

I am using Web Socket to achieve this.

Any help would be really appriciated.

This is the code in the app.js file

const { TranscriptionService } = require('./services/transcription-service');

app.post('/make-call', async (req, res) => {
  try {
    const { toNumber } = req.body;
    const accountSid = process.env.TWILIO_ACCOUNT_SID;
    const authToken = process.env.TWILIO_AUTH_TOKEN;
    
    const client = require('twilio')(accountSid, authToken);
    await client.calls.create({
      url: `https://${process.env.SERVER}/incoming`,
      to: toNumber,
      from: process.env.FROM_NUMBER
    })
    .then(call => {
      res.json({ success: true, message: `Call initiated to ${toNumber}`, data: { callSid: call.sid } });
    });
  }
  catch (error) {
    console.log(error.message)
    res.json({ success: false, message: `${error.message}` });
  }
});

app.post('/incoming', (req, res) => {
  try {
    const response = new VoiceResponse();
    const connect = response.connect();
    connect.stream({ url: `wss://${process.env.SERVER}/connection` });
  
    res.type('text/xml');
    res.end(response.toString());
  } catch (err) {
    console.log(err);
  }
});

const clients = new Map(); // Store connected clients by their ids

app.ws('/connection', (ws, req) => {
  try {
    ws.on('error', (error) => {
      console.error('WebSocket Error:', error); // Log the entire error object
    });
    // Filled in from start message
    let streamSid;
    let callSid;
    
    // Unique ID for the connection (e.g., based on remote address or timestamp)
    const clientId = Date.now().toString();
    clients.set(clientId, ws);

    const transcriptionService = new TranscriptionService();
  
    let marks = [];
    let interactionCount = 0;
  
    // Incoming from MediaStream
    ws.on('message', function message(data) {
      const msg = JSON.parse(data);
      console.log(msg.payload)
      if (msg.event === 'start') {
        streamSid = msg.start.streamSid;
        callSid = msg.start.callSid;
      }
      else if (msg.event === 'media') {
        transcriptionService.send(msg?.media?.payload);
      }
      else if (msg.event === 'mark') {
        marks = marks.filter(m => m !== msg.mark.name);
      }
      else if (msg.event === 'stop') {
        console.log(`Twilio -> Media stream ${streamSid} ended.`.underline.red);
      }
      
    });
  
    transcriptionService.on('transcription', async (text) => {
      if (!text) { return; }
      sendToClient(text) // Send Data to the client
    });

    async function sendToClient(dataToSend) {
      const client = clients.get(clientId);
      if (client && client.readyState === WebSocket.OPEN) {
        console.log('Transcription to send ----- ', dataToSend)
        await client.send(JSON.stringify({
          streamSid,
          event: 'clear',
          transcription: dataToSend,
        }));
      }
    }

  } catch (err) {
    console.log(err);
  }
});

This is the code block from the TranscriptionService file

this.dgConnection = deepgram.listen.live({
  encoding: 'mulaw',
  sample_rate: '8000',
  model: 'nova-2',
  punctuate: true,
  interim_results: true,
  utterance_end_ms: 1000,
});

this.finalResult = '';

this.dgConnection.on(LiveTranscriptionEvents.Open, () => {
  this.dgConnection.on(LiveTranscriptionEvents.Transcript, (transcriptionEvent) => {
    
    if (transcriptionEvent.is_final === true && text.trim().length > 0) {
      this.finalResult += ` ${text}`;
      if (transcriptionEvent.speech_final === true) {
        this.emit('transcription', this.finalResult);
        this.finalResult = '';
      }
    }
  });
});