CODEWITHSUNDEEP
socketswebrtc
Rohit
Rohit

Reputation: 370

Video steaming recived but not playing in WebRTC

I am trying to create a audio broadcasting app using WebRTC. To make it compatible with IE I am using Teamsys plugin from Attlasian.

In most of the demos available on internet I have seen two audio/video controls on a single page. But I am trying it with two page application. one for sender and another for reciever.

I am sending my stream description using XHR to a database where it is received by the another user and used as local description for the peer connection on receiver end. Here is the code :

Sender

function gotStream(stream) {
  console.log('Received local stream');
  // Call the polyfill wrapper to attach the media stream to this element.
  localstream = stream;     
 audio1 = attachMediaStream(audio1, stream);
 pc1.addStream(localstream);
 console.log('Adding Local Stream to peer connection');
 pc1.createOffer(gotDescription1, onCreateSessionDescriptionError);
}

 function gotDescription1(desc) {
   pc1.setLocalDescription(desc);
   console.log('Offer from pc1 \n' + desc);
   console.log('Offer from pc1 \n' + desc.sdp);
     $.ajax({
     type: "POST",
     url: '../../home/saveaddress',
     contentType: "application/json; charset=utf-8",
     data: JSON.stringify({ SDP: desc }),
     dataType: "json",
     success: function (result) {
        if (result) {
           console.log('SDP Saved');
        } 
    });
  }
function iceCallback2(event) {
    if (event.candidate) {
   pc1.addIceCandidate(event.candidate,
   onAddIceCandidateSuccess, onAddIceCandidateError);
   console.log('Remote ICE candidate: \n ' + event.candidate.candidate);
 }
}

At Receiver End

 var pcConstraints = {
        'optional': []
    };
    pc2 = new RTCPeerConnection(servers, pcConstraints);
    console.log('Created remote peer connection object pc2');
    pc2.onicecandidate = iceCallback1;
    pc2.onaddstream = gotRemoteStream;

$.ajax({
    type: "GET",
    url: '../../home/getsavedaddress',
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (result) {
        if (result) {
            gotDescription1(result);
        }
    },
    error: function () {

    }
});
    function gotDescription1(desc) {

    console.log('Offer from pc1 \n' + desc.sdp);
    console.log('Offer from pc1 \n' + pc2);

    pc2.setRemoteDescription(new RTCSessionDescription(desc));
    pc2.createAnswer(gotDescription2, onCreateSessionDescriptionError,
 sdpConstraints); 
 }

Using this I get the SDP from server , vedio tag has a source now. but video is not playing not showing anything.a an y clues.. also I am using asp.net for site , do I need to use node js in this project.

Thanks

Upvotes: 0

Views: 1494

Answers (1)

Maxime Marchand
Maxime Marchand

Reputation: 351

Your question is lacking information, but I will give my opinion on it.

Are you supporting Trickle ICE? It seems you may be sending the SDP too fast!

When you do a 

pc1.setLocalDescription(desc);

The ICE Candidates start being gathered based on the TURN and STUN server configured in your code here (servers parameter):

pc2 = new RTCPeerConnection(servers, pcConstraints);

That said, they are not yet included in your SDP. It can take a few milliseconds before the media ports are set in the localDescription Object. Your first error is that you are sending the "desc" Object from gotDescription1 instead of the post setLocalDescription SDP. That SDP doesn't have the proper media ports yet.

In your code, you are sending the SDP right away without waiting. My guess is that the SDP is not yet completed and you are not supporting Trickle. Because of that, even if signalling might look good, you will not see any media flowing.

Upvotes: 1

Related Questions