WebRTC flow of function calls for making calls [Android]

大城市里の小女人 提交于 2019-12-03 05:09:25

There is no timeline, it's asynchronous but i will try to explain but there is two main flow, the flow of offer and answer with SDP and the flow of icecandidate.

Flow 1 : SDP

Step 1 - Offer peer :

On the offer side, create a RTCPeerconnection (with stun, trun servers as parameters).

    var STUN = {
        url:'stun:stun.l.google.com:19302'
    };

    var TURN = {
        url: 'turn:homeo@turn.bistri.com:80',
        credential: 'homeo'
    };

    var iceServers = {
        iceServers: [STUN, TURN]
    };

    var peer = new RTCPeerConnection(iceServers);

Step 2 - Offer peer :

Call getUserMedia with your constraints. In the success callback, add the stream to the RTCPeerconnection using the addStream method. Then you can create the offer with calling createOffer on the Peerconnection Object.

    navigator.webkitGetUserMedia(
    {
      audio: false,
      video: {
        mandatory: {
          maxWidth: screen.width,
          maxHeight: screen.height,
          minFrameRate: 1,
          maxFrameRate: 25
        }
      }
    },
    gotStream, function(e){console.log("getUserMedia error: ", e);});

    function gotStream(stream){
      //If you want too see your own camera
      vid.src = webkitURL.createObjectURL(stream);

      peer.addStream(stream);

      peer.createOffer(onSdpSuccess, onSdpError);
    }

Step 3 - Offer peer :

In the callback method of the createOffer, set the parameter (the sdp offer) as the localDescription of the RTCPeerConnection (who will start gathering the ICE candidate). Then send the offer to the other peer using the signaling server. (I will not describe signaling server, it's just passing data to one from another).

    function onSdpSuccess(sdp) {
        console.log(sdp);
        peer.setLocalDescription(sdp);
        //I use socket.io for my signaling server
        socket.emit('offer',sdp);
    }

Step 5 - Answer peer :

The answer peer, each time it receives an offer, create a RTCPeerconnection with TURN, STUN server, then getUserMedia, then in the callback, add the stream to the RTCPeerConnection. With the SDP offer use setRemoteDescription with the sdpOffer. Then Trigger the createAnswer. In the success callback of the createAnswer, use setLocalDescription with the parameter and then send the answer sdp to the offer peer using signaling server.

    //Receive by a socket.io socket
    //The callbacks are useless unless for tracking
    socket.on('offer', function (sdp) {
        peer.setRemoteDescription(new RTCSessionDescription(sdp), onSdpSuccess, onSdpError);

        peer.createAnswer(function (sdp) {
            peer.setLocalDescription(sdp);
            socket.emit('answer',sdp);
        }, onSdpError);

    }); 

Step 7 : Offer peer

Receive the sdp answer, setRemoteDescription on the RTCPeerConnection.

    socket.on('answer', function (sdp) {
      peer.setRemoteDescription(new RTCSessionDescription(sdp), function(){console.log("Remote Description Success")}, function(){console.log("Remote Description Error")});
    }); 

Flow 2 : ICECandidate

Both side :

Each time the RTCPeerConnection fire onicecandidate, send the candidate to the other peer through signalingserver. When a icecandidate is received, coming from signaling server, just add it to the RTCPeerConnection using the addIceCandidate(New RTCIceCandidate(obj))

    peer.onicecandidate = function (event) {
      console.log("New Candidate");
      console.log(event.candidate);

      socket.emit('candidate',event.candidate);
    };

    socket.on('candidate', function (candidate) {
      console.log("New Remote Candidate");
      console.log(candidate);

      peer.addIceCandidate(new RTCIceCandidate({
          sdpMLineIndex: candidate.sdpMLineIndex,
          candidate: candidate.candidate
      }));
    }); 

Finally :

If two flow above works well use the onaddstream event on each RTCPeerConnection. When ICE Candidates will pair each other and find the best way for peer-to-peer, they will add the stream negociated with the SDP and that is going through the peer to peer connection. So in this event, you juste need to add your stream then to a video tag for example and it's good.

    peer.onaddstream = function (event) {
      vid.src = webkitURL.createObjectURL(event.stream);
      console.log("New Stream");
      console.log(event.stream);
    };

I will edit tommorow with some code i think to help understand what i'm saying. If have question go for it.

Here is my signaling server :

var app = require('express')();
var server = require('http').Server(app);
var io = require('socket.io')(server);

server.listen(3000);

app.get('/', function (req, res) {
  res.send('The cake is a lie');
});

io.on('connection', function (socket) {

  console.log('NEW CONNECTION');

  socket.on('offer', function (data) {
    console.log(data);
    socket.broadcast.emit("offer",data);
  });

  socket.on('answer', function (data) {
    console.log(data);
    socket.broadcast.emit("answer",data);
  });

  socket.on('candidate', function (data) {
    console.log(data);
    socket.broadcast.emit("candidate",data);
  });

});

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!