Discussions

I am trying to configure the avatar streaming API in real time using nodejs as the back interface, the same after many trial and error now it reflects avatar not allowed

const axios = require('axios');
const { apiavatar } = require('../config/server');
require('dotenv').config();

const statusElement = []

let sessionInfo = null;
let peerConnection = null;

function updateStatus(statusElement, message) {
statusElement.innerHTML += message + '
';
statusElement.scrollTop = statusElement.scrollHeight;
}

updateStatus(statusElement, 'Please click the new button to create the stream first.');

function onMessage(event) {
const message = event.data;
console.log('Received message:', message);
}

// Create a new WebRTC session when clicking the "New" button
async function createNewSession() {
updateStatus(statusElement, 'Creating new session... please wait');

const avatar = avatarName.value;
const voice = voiceID.value;

// call the new interface to get the server's offer SDP and ICE server to create a new RTCPeerConnection
sessionInfo = await newSession('high', avatar, voice);
const { sdp: serverSdp, ice_servers2: iceServers } = sessionInfo;

// Create a new RTCPeerConnection
peerConnection = new RTCPeerConnection({ iceServers: iceServers });

// When ICE candidate is available, send to the server
peerConnection.onicecandidate = ({ candidate }) => {
  console.log('Received ICE candidate:', candidate);
  if (candidate) {
    handleICE(sessionInfo.session_id, candidate.toJSON());
  }
};

// When ICE connection state changes, display the new state
peerConnection.oniceconnectionstatechange = (event) => {
  updateStatus(
    statusElement,
    `ICE connection state changed to: ${peerConnection.iceConnectionState}`,
  );
};

// When audio and video streams are received, display them in the video element
peerConnection.ontrack = (event) => {
  console.log('Received the track');
  if (event.track.kind === 'audio' || event.track.kind === 'video') {
    mediaElement.srcObject = event.streams[0];
  }
};

// When receiving a message, display it in the status element
peerConnection.ondatachannel = (event) => {
  const dataChannel = event.channel;
  dataChannel.onmessage = onMessage;
};

// Set server's SDP as remote description
const remoteDescription = new RTCSessionDescription(serverSdp);
await peerConnection.setRemoteDescription(remoteDescription);

updateStatus(statusElement, 'Session creation completed');
updateStatus(statusElement, 'Now.You can click the start button to start the stream');

}

// Start session and display audio and video when clicking the "Start" button
async function startAndDisplaySession() {
if (!sessionInfo) {
updateStatus(statusElement, 'Please create a connection first');
return;
}

updateStatus(statusElement, 'Starting session... please wait');

// Create and set local SDP description
const localDescription = await peerConnection.createAnswer();
await peerConnection.setLocalDescription(localDescription);

// Start session
await startSession(sessionInfo.session_id, localDescription);
updateStatus(statusElement, 'Session started successfully');

}

module.exports = async (req, res) => {
// try {
// Configurar la solicitud para iniciar una nueva transmisión
const newStreamOptions = {
method: 'POST',
url: ${apiavatar}/v1/streaming.new,
headers: {
accept: 'application/json',
'x-api-key': process.env.apikey
},
data: {
quality: process.env.quality,
avatar_name: process.env.avatar_Name,
voice: {
voice_id:process.env.avatar_Voice,
},
}
};
// Enviar la solicitud para iniciar una nueva transmisión
const responseNew = await axios(newStreamOptions);

    // Extraer session_id y sdp de la respuesta de la nueva transmisión
    const dataStream = responseNew.data.data;
    const session_id = dataStream.session_id;
    const sdp = {
        type: dataStream.sdp.type,
        sdp: dataStream.sdp.sdp
    };
    


    const response = await fetch(`${apiavatar}/v1/streaming.start`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'X-Api-Key': process.env.apikey,
        },
        body: JSON.stringify({ session_id, sdp }),
      }); 
       if (response.status === 500) {
        console.error('Server error');
        updateStatus(
          statusElement,
          'Server Error. Please ask the staff if the service has been turned on',
        );
        throw new Error('Server error');
    } else {
        const data = await response.json();
        res.status(200).send(data);
      }
    }

If I load the scripts directly for its operation it gives me an error with the front implementation that I am using nextjs