Ant Media Server 101: How to Use Ant Media Server Web Panel

You’ve got Ant Media Server installed on your server or cluster, now its time to manage it using the web panel.

This blog post introduces the Ant Media Server Web Panel and provides a comprehensive walkthrough of its settings and menus, to give you with a clear understanding of their functionalities.

To login to the web panel, navigate to the following URL: http://YOUR_SERVER_URL_OR_IP:5080

Dashboard

After logging into the web panel, the first page that loads is the dashboard.

The dashboard provides system information that can be used to measure the health of your instance.  Such as System CPU Load, the Number of Active Live Streams, System Disk, System Memory, and JVM Heap Memory.

Seeing high memory or CPU usage is an indication of a problem that needs to be addressed. Its highly advisable to keep the system CPU below 75%, otherwise you’ll likely experience some issues, such as your instance crashing or live streams failing.

Applications

Ant Media Server comes with two default applications, LiveApp and WebRTCApp in the community edition and WebRTCAppEE in the enterprise edition. Both are open source.

The application holds the pages for publishing and playing live streams. Each application functions independently of each other and holds their own settings and configuration options.

All the installed applications are listed in the left hand menu under the “APPLICATIONS” section. Clicking on one of application names loads a page that contains three tabs; user management, live streams and application settings.

It’s also worth noting, that the name of the application does not hold any significance other than its identity. Each application is exactly the same, its simply the settings that can differentiate between them.

The two default applications that come loaded with Ant Media Server are exactly the same.

Live Streams

As you can see in the screenshot below, live streams are listed under the “Live Streams” tab.

Details for each live stream include the name, id of the stream, stream status (Offline/Broadcasting), the amount of viewers of the live stream by playback type (WebRTC, HLS, DASH) and the action button menu.

Action Menu

The action menu provides links for additional settings on the actual live stream.

From here you enable MP4 or WebM recording, copy the RTMP publish link for the stream and also the embed code.

RTMP Endpoints

Simulcasting or multicasting as its referred to is when you can forward your live stream to other RTMP endpoints such as YouTube, Facebook and Twitter.

There isn’t any limit to the amount of RTMP endpoints you can add and it enables you to reach a wider audience with your live streams.

You read more about simulcasting in our documentation.

Copy Publish URL

Quite self explainatory, the publish URL is the RTMP URL you need to publish to your live stream using RTMP protocol. The URL is prefixed with the live stream id, so in some encoders you might need to extract it to add it in a stream key field.

Here is an example:

rtmp://ant-media-server-url/[application]/[stream_id]

and here is a real example of a publish URL from a live stream under the LiveApp application. from my local installation of Ant Media Server.

rtmp://localhost/LiveApp/c5cLv2CUG9FJ1684419013643

Copy Embed Code

The embed code is simple an iFrame that loading the sample page play.html and pre-populating the query paramtres to match that of the live stream you have selected.

You can use the embed code to embed the player into your website or any other external application that can accept an iFrame.

Its another tool to enable you to reach a wider audience.

Here is an example embed code taken from my local installation:

<iframe width="560" height="315" src="https://localhost:5080/LiveApp/play.html?name=c5cLv2CUG9FJ1684419013643" frameborder="0" allowfullscreen></iframe>

As you can see, the play.html page accepts the parametre name which expects the stream id.

Enable WebM/MP4 Recording

Live streaming recording will only work if it has been enabled in the application settings under the “Stream Recording” section.

Furthermore, each format requires you to enable the appropriate codec in the settings.

WebM recording is only available if the V8 codec is selected and similarly, MP4 recording is only available if the H.264 codec is enabled.

The appropriate checkbox will appear when each encoder is selected.

More is detailed regarding the different supported codecs further down in this post.

VoD Assets

The VoD tab loads all stream recordings and uploaded VoD assets as seen in the following screenshot:

You can upload a video file using the Upload VoD button:

Application Settings

Under the Settings tab, the application settings screen loads and here it’s possible to configure stream behaviour.

Let’s go over the sections of the Settings tab.

WebRTC Codec Support

Ant Media Server can support H.264, H.265, and VP8. H.265 can be enabled via the properties file which is explained in this blog post. H.264 and VP8 could be managed from this section.

Please note, that when you enable both the H.264 and VP8, you need to add an adaptive streaming item, otherwise browsers will not able to play the stream. If you enable just one of them, you don’t need to enable adaptive bitrate streaming.

Adaptive Bitrate Streaming

Ant Media Server supports adaptive bitrate streaming. Please visit Ant Media Server’s wiki for more information.

HLS Streaming

Ant Media Server supports HLS. This section allows the customisation of the Segment List Size and Segment Duration.

Advanced Setting

Here you can enable advanced settings on your application such as Object Detection and automatically generate previews.

Please note that you need to add adaptive streaming if you want to use these features.

You can also customize the folder where VoD assets are saved by setting VoD Streaming Folder to the location of your choice.

Finally, you could specify a Webhook URL  so that events generated from your Ant Media Server instance are sent to an external process. Read this guide for more details about webhooks.

WebRTC Data Channel

The data channel enables the sending and receiving of data to create functionality such as a live chat.  In this section, you can enable or disable the data channel depending on your needs.

Furthermore, you can configure how messages are delivered to the players.

Stream Recording

As already detailed above when going through the actions menu on the live streasm, recording your live streams is not enabled by default.

If this is something you will need, then make sure to check the box against the type of video file you need.

Recording in MP4 and WebM is supported, however you need to enable H.264 to record in MP4 and enable VP8 to record in WebM format.

Stream Security

Anyone can publish and play live streams if they have get hold of the URL to the publish and play pages.

To make your live streams secure, security features such as One time tokens can be enabled.  You can create a one time token for publishing or playing live streams.

One time tokens are designed to be used only once. For instance, once the token has been used, it will no longer be valid.

However, the TOTP based tokens are designed to expire after a certain amount of time.

Generally, you’ll want to create your live streams before broadcasting. However, they may be instances where you’d like to accept incoming live streams that have not been defined.

This is where you’d want to enable the option to Accept undefined Streams.

What this means is that, when a live stream is published using an id thats not already defined under the application > live streams section, a live stream is automatically created.

More stream security can be enabled by using a JWT filter for the live stream. You can enable the use of JWT tokens for both playing of live streams and publishing of live streams.

It adds an extra layer of security to ensure that only those that you want to publish and play live streams on your instance are granted permissions.

REST API Security

If you intend to interact with the REST APIs on a different server than where the Ant Media Server instance is installed, you’ll want to add additional IP filters so that API requests are not blocked.

Whitelisting IP addresses can be done in the Enable IP Filter for RESTful API section and accept a comma separated list of IP addresses.

The default IP address is localhost (127.0.0.1) and is needed because the main management web panel built from AngularJS is granted access to the API with this setting.

If you remove the localhost IP address from the REST API filter, then the management web panel will not function.

Conclusion

In this blog post, we provided an overview of the Ant Media Server web panel and introduced some of the key features.

If you’re wondering how to Install Ant Media Server on a Maple-Hosting Dedicated Server, check this blog post.

To learn how to easily monitor Ant Media Server Instances in 3 Steps, take a look at this blog post.

Just drop a line to contact(at)antmedia.io if you have any questions we’ll be more than happy to help.