abdoul
Reputation: 1
WebRtc simple peer
Good morning I have a problem with simple peer Webrtc I have finished establishing the connection between the two and I want to display the screen of the participant in the meeting and I can't, it's been 2 days that I've been working on this side.. On the other hand the connection is well established between 2. so I want to display the participant's exchange at the initiator because it is a streaming
please can someone help me
1 - Code Initiat create offers
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' }] });
this.peerConnection = peerConnection;
// Ajouter les pistes de flux multimédia à la connexion Peer
stream.getTracks().forEach(track => peerConnection.addTrack(track, stream));
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);
}
};
const offerOptions = {
offerToReceiveAudio: 1,
offerToReceiveVideo: 1
};
// Créer une offre SDP
const offerCreate = await peerConnection.createOffer(offerOptions);
// Définir l'offre locale comme la description de session de la connexion Peer
await peerConnection.setLocalDescription(offerCreate);
// 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,
});
// Stocker la connexion
//this.peerConnections.push(peerConnection);
// 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 participant open offer and send answser
async createAnswerPeer(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('\r\n');
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();
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 peerConnection.setLocalDescription(sessionDescription);
await this.sendSDPAnswer(answerSDP);
// Cleanup the peer connection when done
peerConnection.oniceconnectionstatechange = () => {
if (peerConnection.iceConnectionState === 'disconnected') {
this.cleanupPeer(peerConnection);
}
};
},
3 - Initiator received answer Participant
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('\r\n');
const peerConnection = this.peerConnection;
const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
stream.getTracks().forEach(track => peerConnection.addTrack(track, stream));
if (peerConnection.signalingState === 'have-local-offer') {
console.log('------------ connection est etablie pour le send---------------');
await peerConnection.setRemoteDescription({ type: 'answer', sdp: cleanedSDP });
} else {
console.error('Cannot set remote description in state:');
}
peerConnection.onconnectionstatechange = () => {
if (peerConnection.connectionState === 'connected') {
console.log('------------ connection est etablie pour la connexetion---------------');
// La connexion est établie, vous pouvez maintenant appeler setRemoteDescription()
peerConnection.setRemoteDescription({ type: 'answer', sdp: sdpAnswer });
}
};
// Envoi de la réponse SDP au participant
peerConnection.onnegotiationneeded = async () => {
try {
console.log('---------- conection etablie entre 2 -----------');
} catch (error) {
console.error('Error creating answer:', error);
}
};
// Add Transceivers for receiving video and audio
peerConnection.addTransceiver('video', { direction: 'recvonly' });
peerConnection.addTransceiver('audio', { direction: 'recvonly' });
peerConnection.ontrack = event => {
console.log('---------- flux videos---------------');
if (event.track.kind === 'video') {
console.log('---------- videos flux-------------');
const participantVideo = document.createElement('video');
participantVideo.autoplay = true;
participantVideo.srcObject = new MediaStream([event.track]);
this.$refs.participantVideos.appendChild(participantVideo);
}
};
// 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);
}
};
this.peerConnections.push(peerConnection);
// Gestion de l'événement ontrack pour afficher le flux vidéo du participant
},
Upvotes: 0
Views: 100