Flussonic Media Server Documentation

Contents

Using WebRTC for Video Publication to Flussonic Media Server

On this page:

About the WebRTC protocol

WebRTC is a P2P protocol of communication between two clients over an already established connection. For example, to communicate with each other by WebRTC, two browsers need to be connected by opening the same website in the Internet. Connection can also be established by means of a mediator, so called signaling server.

So there are two clients and a signaling server, that connects these clients. Before starting to transmit video data, the clients need to establish the connection. To do so, they exchange data of two types about the connection:

  • textual descriptions of media streams in the SDP format
  • ICE Candidates as part of an SDP

The signaling server (the mediator) makes it possible to transfer the data about the connection from one client to the other.

About publication via WebRTC to Flussonic

Flussonic Media Server uses WebRTC for publishing a media stream from a client device or app (the source) to Flussonic (the recipient). Then Flussonic becomes the source in order to play the stream on another client (the recipient). In both cases, Flussonic also acts as the signaling server to exchange the data about the connection.

Why do we use WebRTC to send media data between clients? Because with the WebRTC mechanism we can provide ultra-low latency.

Therefore, the exchange of video via Flussonic cannot be called peer-to-peer, rather, we call it video publication to Flussonic Media Server via WebRTC and video playback via WebRTC.

The diagram shows the process of initiating the connection between Flussonic and a client device, for publication:

WebRTC

The connection to Flussonic Media Server for a media stream publishing via WebRTC is established in the similar way as for video playback.

The principle here stays the same – parties should exchange SDPs via the mediator (signaling server - Flussonic), and then start the direct data transfer. In the case of video publishing, it's the client that initiates the process and sends an SDP offer.

Connection is established via WebSocket, and then video is transferred via RTP.

How to organize publication via WebRTC

Attention! Some browsers allow video and audio publishing via WebRTC by using secure connection only. The browser migth deny access to the camera and microphone from a page located not by HTTPS but by HTTP address. But this is allowed on local addresses (localhost, 127.0.0.1).

On the Flussonic server, add a published stream to the configuration, this is a stream with the source publish://.

stream published {
  url publish://;
}

You can add a stream through the UI: in the Input section, specify publish:// in the URL field, and make sure that accept is selected for Published input.

Flussonic stream mixing

Now the code must be run on the client side that publishes video to the created stream. To write the code use the Flussonic WebRTC player library.

Installing the library components via NPM and webpack

To import our library to your project with webpack, download the package:

npm install --save @flussonic/flussonic-webrtc-player

Then import components to your application:

import {
  PUBLISHER_EVENTS,
  PLAYER_EVENTS,
  Player,
  Publisher,
} from "@flussonic/flussonic-webrtc-player";

The description of the library classes can be found at npm.

See also the demo application, which code is also found further on this page.

Installing the library components without NPM and webpack

Add this line to the script section of your HTML page:

<script src="https://cdn.jsdelivr.net/npm/@flussonic/flussonic-webrtc-player/dist/index.min.js"></script>

The example of a webpage containing the player code is further on this page.

WebRTC publication options (Flussonic 20.10)

Audio podcasts via WebRTC

To publish only the audio track without video, in the options of the publisher instance use the following configuration in constraints:

import Publisher from '../publisher';
//...
publisher = new Publisher(
//...

    constraints: {
      video: false,
      audio: true,
    },
//...
);

If you omit the option video altogether, the result will be the same — only the audio track will be published to Flussonic.

To play such a stream, no additional configuring is needed.

Muting a publication

To mute a publication, use the mute method:

import Publisher from '../publisher';
//...
publisher = new Publisher(*your options*);
//...
publisher.mute();
//...

If you bind the mute method to a button in your client app, the user will be able to disable the sound in the output stream during its publishing. The demo application has an example of such a button.