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:
- WebRTC stream settings in Flussonic including publishing from your webcam.
- Recommendations on developing the client application
- WebRTC publication options including audio podcasts through WebRTC and screen capture.
- Load balancing with WHIP publications
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:
- Head to Media tab and add a stream clicking on Add stream button next to the Streams section.
-
Then in the stream settings go to the Input tab and specify
publish://
in the URL field. Make sure that Publication is enabled: -
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
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.