Flussonic Media Server documentation

WebRTC Playback

WebRTC Anchor Anchor x2

WebRTC is P2P protocol of communication between two clients, however it specifies only the data transfer by the already established connection. I.e. to communicate with each other by WebRTC, two browsers need to be connected some way, for example by opening the same website in the Internet, that will get them in touch. Connection can also be established by means of a mediator, so called signalling server.

So there are two clients and a signaling server, that connects these clients, in WebRTC. The process of establishing P2P connection between the two clients is the exchange of media streams textual descriptions in SDP format. The signaling server (the mediator) makes it possible to transfer SDP from one client to the other.

Standard scheme of P2P communication by WebRTC means that there should be two sessions arranged: audio-video stream from A client to B client, and vice versa – from B to A.

Flussonic can be the signaling server and the client at the same time, both getting and sending the video stream. Therefore here we may talk of video publishing on Flussonic by WebRTC and of video play by WebRTC.

Playing video from Flussonic by WebRTC Anchor Anchor x2

To initiate the WebRTC connection with Flussonic one should open WebSocket connection with Flussonic by the following address: ws://192.168.2.3:8080/STREAMNAME/webrtc, where 192.168.2.3:8080 is an example of your Flussonic’s address and port. Ws and wss protocols are supported.

The result of SDP exchange by means of the signaling server should be a local PeerConnection object with LocalDescription and RemoteDescription given properties, that contains the local and the remote SDP description accordingly.

So one should create PeerConnection and set onicecandidate handler. After WebSocket connection is established, the server will send SDP offer to the WebSocket, and this offer needs to be processed on the client (it should be set as RemoteDescription for the previously created PeerConnection), and the SDP answer should be sent. Also it is necessary to specify the generated answer as LocalDescription for PeerConnection object.

function openWebSocketConnection(options) {
  var url =
    options.protocol + "://" +
    options.server + ":" +
    options.port + "/" +
    options.stream + "/webrtc";

  websocket = new WebSocket(url);
  websocket.onopen = initPeerConnection;
  websocket.onmessage = onWebSocketMessage;
}

function initPeerConnection() {
  peerConnection = new window.RTCPeerConnection(null);
  peerConnection.stream_id = "remote1";
  peerConnection.onicecandidate = gotIceCandidate;
  peerConnection.ontrack = gotRemoteTrack;
}

function sendWebSocketMessage(data) {
  websocket.send(JSON.stringify(data));
}

function onWebSocketMessage(event) {
  var message = JSON.parse(event.data);

  switch (message.type) {
    case "offer":
      var description = new window.RTCSessionDescription(message);
      peerConnection.setRemoteDescription(description)
        .then(function() {
          return peerConnection.createAnswer();
        })
        .then(function (answer) {
          return peerConnection.setLocalDescription(answer);
        })
        .then(function () {
          sendWebSocketMessage(peerConnection.localDescription);
        });
    break;
    case "candidate":
      var candidate = new window.RTCIceCandidate(message.candidate);
      peerConnection.addIceCandidate(candidate);
    break;
  }
}

In onicecandidate handler of PeerConnection object it is required to implement IceCandidate message sending to the open Web Socket. After that Flussonic returns via the WebSocket the message, that contains IceCandidate SDP, which we use to set the direct connection via PeerConnection object. At this stage we can be sure, that both sides know each other’s SDP and the direct connection can be initiated.

function gotIceCandidate(event){
  var candidate = event.candidate;
  if (candidate) {
    sendWebSocketMessage({
      type: 'candidate',
      stream_id : "local1",
      label: candidate.sdpMLineIndex,
      id: candidate.sdpMid,
      candidate: candidate
    });
  }
}

To get video from the server one needs to describe ontrack handler of PeerConnection object. It is necessary to create Video Media Element in advance using Video tag and set srcObject property in ontrack handler.

function gotRemoteTrack(event){
  if (event.track.kind === "video") {
    video.srcObject = event.streams[0];
  }
}

After the direct P2P connection is established, the server will start sending video, and this video can be seen in HTML5 Video tag.

The complete code of the example can be found here.