WebRTC: DOMException: Failed to execute ‘setRemoteDescription’ on ‘RTCPeerConnection’: Failed to set remote answer sdp:

RMAG news

How to deal with this error or for me the connection goes well between the two

Here is my code creation offer and set

1- async startStream() {

try {

// Obtenir les autorisations pour utiliser la caméra et le microphone
const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });

// Assurez-vous que cette ligne est présente si nécessaire
this.currentStream = stream;

// Afficher le lien et activer la conférence
this.isVisibleLink = true;
this.isConferenceActive = true;
this.isLinkSendActive = false;

// Créer une connexion Peer
const peerConnection = new RTCPeerConnection({ iceServers: [{ urls: ‘stun:stun.l.google.com:19302’ }] });

// Ajouter les pistes de flux multimédia à la connexion Peer
stream.getTracks().forEach(track => peerConnection.addTrack(track, stream));

const offerOptions = {
offerToReceiveAudio: 1,
offerToReceiveVideo: 1
};

// Créer une offre SDP
const offer = await peerConnection.createOffer(offerOptions);

// Définir l’offre locale comme la description de session de la connexion Peer
await peerConnection.setLocalDescription(offer);

// Stocker l’offre SDP dans votre modèle de données si nécessaire
this.meetingData.typeOffer = “offer”;

this.meetingData.sdpOffer = peerConnection.localDescription.sdp;
this.userBeginOffer = peerConnection.localDescription.sdp;

// Créer une réunion ou effectuer d’autres actions nécessaires
await this.createMeeting();

axios.post(‘/uvl/broadcast/sdp-offer’, {
sdpOffer:peerConnection.localDescription.sdp,
streamId: this.streamLink,
});

const dataChannelOptions = {ordered: true};

peerConnection.createDataChannel(‘sendDataChannel …. ‘, dataChannelOptions);

peerConnection.ondatachannel = (event) => {
const dataChannel = event.channel;

dataChannel.onopen = () => {
console.log(‘———– open data————-‘);
};

dataChannel.onmessage = (event) => {
const message = event.data;
console.log(‘———– open message ————-‘);
};

dataChannel.onclose = () => {
console.log(‘———– close message ————-‘ );
};
};
// Gérer les événements de la connexion Peer
peerConnection.onicecandidate = event => {
if (event.candidate) {
console.log(event.candidate);
}
};

// Retourner la connexion Peer si nécessaire
return peerConnection;
} catch (error) {
console.error(“Erreur lors de la création de la connexion Peer:”, error);
}
},

2 – Code create answer and reponse offer

async createViewerPeer(sdpOffer) {

const cleanedSDP = sdpOffer + ‘n’
.split(‘n’) // Diviser la chaîne en lignes
.map(l => l.trim()) // Supprimer les espaces vides autour de chaque ligne
.join(‘rn’);

const configuration = { iceServers: [{ urls: ‘stun:stun.l.google.com:19302’ }] };

const peerConnection = new RTCPeerConnection(configuration);

const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });

stream.getTracks().forEach(track => peerConnection.addTrack(track, stream));

this.currentStream = stream;

// Add Transceivers for receiving video and audio
peerConnection.addTransceiver(‘video’, { direction: ‘recvonly’ });
peerConnection.addTransceiver(‘audio’, { direction: ‘recvonly’ });

peerConnection.onicecandidate = event => {

if (event.candidate) {
console.log(‘——– candidate vents sends——-‘);
console.log(event.candidate);

}

};

peerConnection.ontrack = event => {
// Afficher la vidéo du participant
if (event.track.kind === ‘video’) {
// Créer un élément vidéo et y attacher la piste
const participantVideo = document.createElement(‘video’);
participantVideo.autoplay = true;
participantVideo.srcObject = new MediaStream([event.track]);
// Ajouter l’élément vidéo à l’élément parent du ref partnerVideo
this.$refs.partnervideo.appendChild(participantVideo);
this.$refs.partnervideo.srcObject = stream;

}
};

// Set the remote description (SDP offer)
await peerConnection.setRemoteDescription({ type: ‘offer’, sdp: cleanedSDP });

// Create SDP answer
const sessionDescription = await peerConnection.createAnswer();

console.log(‘——– answser valeur——————‘);
console.log(sessionDescription);
if (!sessionDescription.sdp) {
console.error(“Error: Answer does not contain SDP.”);
return;
}

peerConnection.onnegotiationneeded = async () => {
try {
console.log(‘——– Negotiation needed ——–‘);
// const sessionDescription = await peerConnection.createAnswer();
// await peerConnection.setLocalDescription(sessionDescription);
// await this.sendSDPAnswer(sessionDescription.sdp);
} catch (error) {
console.error(‘Error creating answer:’, error);
}
};

const answerSDP = sessionDescription.sdp;

await this.sendSDPAnswer(answerSDP);

await peerConnection.setLocalDescription(sessionDescription);

// Cleanup the peer connection when done
peerConnection.oniceconnectionstatechange = () => {
if (peerConnection.iceConnectionState === ‘disconnected’) {
this.cleanupPeer(peerConnection);
}
};
},

3 – Retrieving the answer value to bind the connection

async handleParticipantResponse(sdpAnswer) {

const cleanedSDP = sdpAnswer + ‘n’
.split(‘n’) // Diviser la chaîne en lignes
.map(l => l.trim()) // Supprimer les espaces vides autour de chaque ligne
.join(‘rn’);

// Création de la connexion Peer
//const peerConnection = this.existingPeerConnection;

const configuration = { iceServers: [{ urls: ‘stun:stun.l.google.com:19302’ }] };

const peerConnection = new RTCPeerConnection(configuration);

await peerConnection.setRemoteDescription({ type: ‘answer’, sdp: cleanedSDP });

console.log(‘———— remote valeurs anwser————‘);

// Création de la réponse SDP
const sessionDescription = await peerConnection.createAnswer();

console.log(‘———– create anwser——————-‘);
console.log(sessionDescription);

// Traitement de la réponse SDP
await peerConnection.setLocalDescription({ type: ‘answer’, sdp: cleanedSDP });

peerConnection.onconnectionstatechange = () => {
if (peerConnection.connectionState === ‘connected’) {
console.log(‘———— connection est etablie—————‘);
// La connexion est établie, vous pouvez maintenant appeler setRemoteDescription()
peerConnection.setRemoteDescription({ type: ‘answer’, sdp: cleanedSDP });
}
};

//await peerConnection.setLocalDescription(sessionDescription);

// Envoi de la réponse SDP au participant
axios.post(‘/uvl/broadcast/sdp-answer’, {
answer: sessionDescription.sdp,
streamId: this.streamLink
});

peerConnection.onnegotiationneeded = async () => {
try {
console.log(‘———- conection etablie entre 2 ———–‘);

} catch (error) {
console.error(‘Error creating answer:’, error);
}
};

// Gestion des candidats ICE
peerConnection.onicecandidate = event => {
// Envoyer le candidat ICE au participant
console.log(‘———- send channel users——–‘);
if (event.candidate) {
console.log(event.candidate);
}
};

peerConnection.ontrack = event => {
// Gérer l’événement ontrack pour afficher le flux vidéo du participant
};

// Gestion de l’événement ontrack pour afficher le flux vidéo du participant

},

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *