Skip to content

WebRTC Publishing

You can publish video via WebRTC from a webcam on your device to Flussonic, or create your own application that will send video and/or audio to Flussonic. Below you will find instructions on both.

The publication is carried out via the WHIP standard. For more details about WebRTC, WHIP and WHEP, see Using WebRTC protocol.

On this page:

Prerequisites

  • Configure HTTPS. Some browsers allow video and audio publishing through WebRTC by using secure connection only. The browser might 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).
  • Do not close UDP ports. Flussonic does not have a fixed port range for WebRTC, i.e. the ports allocated by the OS are used. When closing UDP ports, you can accidentally close the ones that are being used. Consider not using any other software on the Flussonic server to safely allow UDP listening on all ports.

WebRTC settings in Flussonic

On the Flussonic server, add a published stream to the configuration:

  1. Head to Media tab and add a stream clicking on Add stream button next to the Streams section.

  2. Then in the stream settings go to the Input tab and specify publish:// in the URL field. Make sure that Publication is enabled:

    Stream settings

  3. Optionally, you can configure publishing through WebRTC at options on the same Input tab. The following settings are available: output audio codec, maximum and minimum bitrate, and ABR parameters.

Now you can proceed with enabling publication from the webcam or running the code on the client side that publishes video to the created stream. Use the following URL for the published stream in your client application:

http://FLUSSONIC-IP:PORT/STREAM_NAME/whip

See Streaming API reference.

Publishing from your webcam

To enable publishing from the webcam to the created stream, click Publish From Webcam. Allow your browser to access your camera and microphone.

The webcam video preview window will be displayed under the button.

If necessary, you can protect the publication with a password, set the maximum allowed bitrate, and configure external authorization for the publication sessions.

Recommendations on developing the client application

Use the Flussonic WebRTC player library to write the code. It can be installed in one of the ways described below.

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

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";

See also the demo application, which code is also found on WebRTC Playback 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 the same as on WebRTC Playback page.

WebRTC publication options

Audio podcasts through 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.

Capturing screen

WebRTC player allows to publish captured screen that can be useful for demonstrations. To do this, use the shareScreen method:


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

To switch back to capturing video from camera, use this method once again. If you bind the shareScreen method to a button in your client app, the user will be able to switch to capturing a screen and back to capturing form a camera during publishing.

Using canvas for customization

You can use the canvas element to apply any custom filters or effects to the video published to Flussonic. The WebRTC Player itself creates the canvas element to pass the user's video through it, i.e. the publication to Flussonic goes from the canvas element. Use the canvasCallback(canvasElement) function in the Publisher's options to get the canvas element and apply your logics to it.

The example on WebRTC Playback page includes the use of canvas. If you try the example, you will see that "sepia" filter is applied to the published video and "It's publishing to Flussonic!" text appears over it.

Load balancing with WHIP publications

Since WHIP is based on HTTP POST requests, you can use our load balancer to distribute play requests between servers in a cluster. The balancer will redirect POST requests to servers in the cluster using the 307 HTTP redirect code.