VAPI•6mo ago

Live stream call audio in browser

@Vapi Support Bot @Vapi how to use call listenUrl in browser (react app) to listen to the live stream?

VapiAPP•7/2/25, 12:32 AM

Hi udAIan,

To listen to a live call stream in a React app using the listenUrllistenUrl, you can create a WebSocket connection to receive and play the audio data. Here's a basic outline of how you can achieve this:

Establish WebSocket Connection:

   const ws = new WebSocket(listenUrl);
   
   ws.onopen = () => console.log("WebSocket connection established");
   ws.onerror = (error) => console.error("WebSocket error:", error);

   const ws = new WebSocket(listenUrl);
   
   ws.onopen = () => console.log("WebSocket connection established");
   ws.onerror = (error) => console.error("WebSocket error:", error);

Set Up Audio Context:

   const audioContext = new (window.AudioContext || window.webkitAudioContext)();
   const audioQueue = [];
   
   ws.onmessage = (event) => {
     if (typeof event.data === 'object') {
       event.data.arrayBuffer().then((buffer) => {
         audioQueue.push(buffer);
       });
     }
   };

   const audioContext = new (window.AudioContext || window.webkitAudioContext)();
   const audioQueue = [];
   
   ws.onmessage = (event) => {
     if (typeof event.data === 'object') {
       event.data.arrayBuffer().then((buffer) => {
         audioQueue.push(buffer);
       });
     }
   };

Decode and Play Audio:

   const playAudio = () => {
     if (audioQueue.length > 0) {
       const buffer = audioQueue.shift();
       
       audioContext.decodeAudioData(buffer, (decodedData) => {
         const source = audioContext.createBufferSource();
         source.buffer = decodedData;
         source.connect(audioContext.destination);
         source.start(0);
       });
     }
     requestAnimationFrame(playAudio);
   };
   
   audioContext.onstatechange = () => {
     if (audioContext.state === 'running') {
       playAudio();
     }
   };

   const playAudio = () => {
     if (audioQueue.length > 0) {
       const buffer = audioQueue.shift();
       
       audioContext.decodeAudioData(buffer, (decodedData) => {
         const source = audioContext.createBufferSource();
         source.buffer = decodedData;
         source.connect(audioContext.destination);
         source.start(0);
       });
     }
     requestAnimationFrame(playAudio);
   };
   
   audioContext.onstatechange = () => {
     if (audioContext.state === 'running') {
       playAudio();
     }
   };

This implementation ensures that the audio stream is continuously decoded and played as more data is received. Make sure to handle WebSocket connections properly, including closing the connection when the component unmounts to avoid memory leaks. You may also want to check browser compatibility for the Web Audio API.

For more details, you can refer to this Call Control and Listen Feature documentation.

Live stream call audio in browser

Similar Threads

Similar Threads

Similar Threads