How to connect to Deepgram to transcribe live Audio to text .

[GantaVenkataKousik]

This is the code that I have used which I've followed from the official Documentation ( Javascript ).
which I want to integrate in my Vue project

Code :

<template>
  <div class="main-comp">
    <h1>Live Transcription</h1>
    <p>{{ transcription }}</p>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { createClient, LiveTranscriptionEvents } from "@deepgram/sdk";
import fetch from "cross-fetch";

const url = "http://stream.live.vc.bbcmedia.co.uk/bbc_world_service";
const transcription = ref('');

const live = async () => {

  const deepgram = createClient(process.env.apiKey);
  const connection = deepgram.listen.live({
    model: "base",
    language: "en-US",
    smart_format: true,
  });

  connection.on(LiveTranscriptionEvents.Open, () => {
    connection.on(LiveTranscriptionEvents.Close, () => {
      console.log("Connection closed.");
    });

    connection.on(LiveTranscriptionEvents.Transcript, (data) => {
      transcription.value = data.channel.alternatives[0].transcript;
      console.log(data.channel.alternatives[0].transcript);
    });

    connection.on(LiveTranscriptionEvents.Metadata, (data) => {
      console.log(data);
    });

    connection.on(LiveTranscriptionEvents.Error, (err) => {
      console.error(err);
    });

    fetch(url)
      .then((response) => response.body)
      .then((reader) => {
        const readerStream = reader.getReader();
        function read() {
          readerStream.read().then(({ done, value }) => {
            if (done) {
              console.log('Stream finished.');
              return;
            }
            connection.send(value);
            read(); 
          });
        }
        read();
      });
  });
};

onMounted(() => {
  live();
});
</script>

<style scoped>
.main-comp {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

h1 {
  font-size: 2em;
  margin-bottom: 20px;
}

p {
  font-size: 1.5em;
  color: #333;
}
</style>

Why on running this was giving me some text automatically instead of what I'm speaking ?

Please someone suggest me what changes I need to do
or the correct code to do so!

[team-deepgram]

Thanks for asking your question about Deepgram! If you didn't already include it in your post, please be sure to add as much detail as possible so we can assist you efficiently, such as:

• The request_id if you have a question about your requests or transcription responses.
• The features you used or the full api.deepgram.com URL you sent your request to, including parameters.
• Any code snippets you can share.

[jkroll-deepgram]

Hi @GantaVenkataKousik, this code sample transcribes from BBC radio. See the line:

const url = "http://stream.live.vc.bbcmedia.co.uk/bbc_world_service";

You'll want to remove that reference, and instead send audio data from another source, such as the local microphone.

[GantaVenkataKousik]

Sure @jkroll-deepgram , how can I send live audio for transcription can you please explain with code snippet .

[GantaVenkataKousik]

<template>
  <div class="main-comp">
    <h1>Live Transcription</h1>
    <p>{{ transcription }}</p>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { createClient, LiveTranscriptionEvents } from "@deepgram/sdk";

const apiKey = 'YOUR_DEEPGRAM_API_KEY'; 
const transcription = ref('');

const deepgram = createClient(`${apiKey}`);

const live = async () => {
  const stream = await navigator.mediaDevices.getUserMedia({ audio: true });

  if (!stream) {
    console.error('No audio stream available.');
    return;
  }

  const dgConnection = deepgram.transcription.live({
    model: "nova",
  });

  dgConnection.on(LiveTranscriptionEvents.Open, () => {
    console.log("Connection opened.");
    const audioContext = new AudioContext();
    const microphone = audioContext.createMediaStreamSource(stream);
    const processor = audioContext.createScriptProcessor(1024, 1, 1);

    microphone.connect(processor);
    processor.connect(audioContext.destination);

    processor.onaudioprocess = (event) => {
      const audioData = event.inputBuffer.getChannelData(0);
      dgConnection.send(audioData);
    };

    dgConnection.on(LiveTranscriptionEvents.Transcript, (data) => {
      if (data.channel.alternatives[0].transcript) {
        transcription.value = data.channel.alternatives[0].transcript;
        console.log(data.channel.alternatives[0].transcript);
      }
    });
  });

  dgConnection.on(LiveTranscriptionEvents.Error, (error) => {
    console.error("Error during transcription:", error);
  });

  dgConnection.on(LiveTranscriptionEvents.Close, () => {
    console.log("Connection closed.");
  });
};

onMounted(() => {
  live();
});
</script>

<style scoped>
.main-comp {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

h1 {
  font-size: 2em;
  margin-bottom: 20px;
}

p {
  font-size: 1.5em;
  color: #333;
}
</style>

This was resulting in this old version error .

can you please share me the updated code that was the latest version of SDK !!

[GantaVenkataKousik]

Can someone please help me updated code that was the latest version of SDK !!

Getting the above older version error for this code .

<template>
  <div class="main-comp">
    <h1>Live Transcription</h1>
    <p>{{ transcription }}</p>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { createClient, LiveTranscriptionEvents } from "@deepgram/sdk";

const apiKey = 'YOUR_DEEPGRAM_API_KEY'; 
const transcription = ref('');

const deepgram = createClient(`${apiKey}`);

const live = async () => {
  const stream = await navigator.mediaDevices.getUserMedia({ audio: true });

  if (!stream) {
    console.error('No audio stream available.');
    return;
  }

  const dgConnection = deepgram.transcription.live({
    model: "nova",
  });

  dgConnection.on(LiveTranscriptionEvents.Open, () => {
    console.log("Connection opened.");
    const audioContext = new AudioContext();
    const microphone = audioContext.createMediaStreamSource(stream);
    const processor = audioContext.createScriptProcessor(1024, 1, 1);

    microphone.connect(processor);
    processor.connect(audioContext.destination);

    processor.onaudioprocess = (event) => {
      const audioData = event.inputBuffer.getChannelData(0);
      dgConnection.send(audioData);
    };

    dgConnection.on(LiveTranscriptionEvents.Transcript, (data) => {
      if (data.channel.alternatives[0].transcript) {
        transcription.value = data.channel.alternatives[0].transcript;
        console.log(data.channel.alternatives[0].transcript);
      }
    });
  });

  dgConnection.on(LiveTranscriptionEvents.Error, (error) => {
    console.error("Error during transcription:", error);
  });

  dgConnection.on(LiveTranscriptionEvents.Close, () => {
    console.log("Connection closed.");
  });
};

onMounted(() => {
  live();
});
</script>

<style scoped>
.main-comp {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

h1 {
  font-size: 2em;
  margin-bottom: 20px;
}

p {
  font-size: 1.5em;
  color: #333;
}
</style>

[jkroll-deepgram]

Hi @GantaVenkataKousik, here is a code sample using the JavaScript SDK and a local microphone: https://github.com/deepgram-devs/js-live-example

In particular, check out this section that interacts with the microphone.

[GantaVenkataKousik]

Getting this error @jkroll-deepgram on running the code template , The API key is set correctly .

[naomi-lgbt]

What does your current code look like?