Je travaille sur une application webRTC pour la diffusion de vidéos. L'application fonctionne ainsi. - Le client A crée un canal, voit son flux local s'afficher (contenu chargé depuis /room) et attend. - le client B charge la page, clique sur un canal pour le rejoindre.
- le client A envoie une offre SDP, B la reçoit, envoie des réponses, ajoute un flux distant et l'affiche.
Tout fonctionne bien sauf que le client B reçoit un élément vidéo noir, avec un objet MediaStream à l'intérieur. le journal semble correct... Je suis perdu, je vous invite à jeter un coup d'œil ! Je vais essayer de commenter aussi clairement que possible, mais n'hésitez pas à demander des explications si nécessaire.
Le script est le suivant :
var pc_config = {"iceServers": [{"url": "stun:stun.l.google.com:19302"}]};
var pC = null;
var localStream = null;
var emitter = false;
var mediaConstraints = {'mandatory': {
'OfferToReceiveAudio':false,
'OfferToReceiveVideo':false }};
var setLocal = function (sdp) {
pC.setLocalDescription(sdp);
console.log("Sending: SDP");
console.log(sdp);
socket.json.send(sdp);
};
function onRemoteStreamAdded(event) {
console.log("Added remote stream" + event);
video.src = window.URL.createObjectURL(event.stream);
video.play();
}
function createPeerConnection() {
console.log("Creating peer connection");
pc_config.iceServers.push({
"url": "turn:" + 'shirase.dev%40gmail.com' + "@" + 'numb.viagenie.ca',
"credential": 'drkllr'
});
try {
pC = new RTCPeerConnection(pc_config);
console.log("Created peer connection" + pc_config);
} catch (e) {
console.log("Failed to create Peer Connection, exception: " + e.message);
}
pC.addEventListener("addstream", onRemoteStreamAdded, false);//receiver
started = true;
pC.onicecandidate = function(evt) {
if (evt.candidate) {
console.log('Sending ICE candidate...');
console.log(evt.candidate);
socket.json.send({
type: "candidate",
sdpMLineIndex: evt.candidate.sdpMLineIndex,
sdpMid: evt.candidate.sdpMid,
candidate: evt.candidate.candidate
});
} else {
console.log("End of candidates.");
}
};
Les événements liés aux prises de courant sont les suivants :
var video = document.getElementById('video'),
started = false;
var channel = {
create: function(){
socket.emit('create');
return false;
},
join: function(channelId){
socket.emit('join', channelId);
return false;
}
};
socket.on('channel_created', function () {
$.get('/room', function(data) {
$('#content').html(data);
});
emitter = true;
});
//fired by socket server when a new user joins
socket.on('user_joined', function () {
console.log('received');
createPeerConnection();
pC.addStream(localStream);//emitter
console.log(pC);
started = true;
pC.createOffer(setLocal,null,mediaConstraints);
});
//peerconnection events from socket
socket.on('message', function (evt) {
if (evt.type === 'offer') {
console.log("Received offer...");
createPeerConnection();
console.log('Creating remote session description...' );
pC.setRemoteDescription(new RTCSessionDescription(evt));
console.log('Sending answer...');
pC.createAnswer(setLocal,null,mediaConstraints);
} else if (evt.type === 'answer' && emitter) {
console.log('Received answer...');
console.log('Setting remote session description...' + evt);
pC.setRemoteDescription(new RTCSessionDescription(evt));
} else if (evt.type === 'candidate' && started) {
console.log('Received ICE candidate...');
var candidate = new RTCIceCandidate({
sdpMLineIndex: evt.sdpMLineIndex,
sdpMid: evt.sdpMid,
candidate: evt.candidate
});
console.log(candidate);
pC.addIceCandidate(candidate);
} else if (evt.type === 'bye') {
console.log("Received bye");
stop();
}
});
Test : Démarrer le client A, puis B. Après l'impression de la console :
Sur A :
Creating peer connection
Created peer connection[object Object]
Sending: SDP
Sending ICE candidate...
**A few of those **
Received answer...
Setting remote session description...
Sur B :
Received offer...
Creating peer connection
Created peer connection[object Object]
Creating remote session description...
Sending answer...
Received ICE candidate...
**A few of those**
Added remote stream[object MediaStreamEvent]
Sending: SDP
Et apparaît l'élément vidéo noir...
Qu'en pensez-vous ?