3 votes

Impossible d'afficher le flux distant

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 ?

1voto

Muaz Khan Points 1744

Valeur de consigne true pour les deux OfferToReceiveAudio y OfferToReceiveVideo :

var mediaConstraints = {
    'mandatory': {
        'OfferToReceiveAudio': true,
        'OfferToReceiveVideo': true
    }
};

Ceux-ci devraient être false uniquement pour données uniquement séances.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X