Ugacomp

Solved: Ant Media stream refusing to play after embedding

Where necessary, you may need to have access to a VPS server so you can follow how to implement the steps in this article.  You can get a cheaper VPS Server from Contabo with 4vCPU cores, 8GM RAM, and 32TB Bandwidth for less than $5.50 per month. Get this deal here now

Table of Contents

Cloud VPS S

$5.50 Monthly
  • 4 vCPU Cores | 8GB RAM

CLOUD VPS M

$15.50 Monthly
  • 6 vCPU Cores | 16GB RAM

CLOUD VPS L

$17.50 Monthly
  • 8 vCPU Cores | 24GB RAM

When Ant Media stream refuses to play after embedding the player on another website, there could be a couple of reasons causing this issue. And here are some suggested fixes we have for you:

Inspect your iframe code

You can check if the URL link defined in your iframe code is correct. The following is an example of an iframe code extracted from “some” Ant Media stream;

<iframe width="560" height="315" src="http://194.163.186.92:5080/LiveApp/play.html?name=test124" frameborder="0" allowfullscreen></iframe>

From the iframe code, there is a source attribute, src with the following URL link;

http://194.163.186.92:5080/LiveApp/play.html?name=test124

This link contains the following important parameters, and you shouldn’t take them lightly when embedding the Ant Media player on a website;

  • 194.163.186.92:5080: This is the IP address of your Ant Media server. Instead of the IP address, the domain name can also be used for this case. Make sure the code you have has the correct IP address or domain name.

  • /LiveApp: This represents the name of the Ant Media application in which the target stream is configured. Every streaming session in Ant Media is configured in an application. You should make sure you’re using the correct name of the application where your target stream is set up.

  • /play.html: This parameter is part of the endpoint URL necessary for Ant Media web-based player. Ant Media server automatically creates it to allow embedding and playing your streams on the website or in the browser

  • name: This parameter is used to specify the stream name or the identifier of the video stream that can be played in the embedded player. In this case, the value of the name parameter represents your stream id.

No SSL Installed

Another issue that could be preventing your embedded Ant Media stream from playing is the lack of SSL certificate on the server

This happens in such a way that if you embed Ant Media iframe player with no HTPPS configured and the site you’re embedding to has SSL certificate on its domain, the stream will fail.


As we’ve seen earlier, a typical Ant Media player iframe code looks like this;

<iframe width="560" height="315" src="http://194.163.186.92:5080/LiveApp/play.html?name=test124" frameborder="0" allowfullscreen></iframe>

So, one of the most important parts of the Ant Media iframe code is the source attribute, src which defines the URL of the stream. In this case, if Ant Media doesn’t have SSL installed, this URL will be prefixed with HTTP as seen below:

http://194.163.186.92:5080/LiveApp/play.html?name=test124

Assuming you want to embed this code to another website with HTTPS configured, the stream will not work and you will either see a black screen on your player or just an error message.

To fix this issue, we need to install SSL certificate on Ant Media server by following these steps:

Step 1: Add custom Domain

The first step in configuring SSL on Ant Media is to make sure you have a fully-qualified domain name. You can either add a subdomain like server.example.com or a full domain like example.com.

Your domain has to be attached to the IP address of your VPS server on which your Ant Media server is installed.

Assuming you have a domain name registered from another provider, and you would want to set it up for Ant Media, which is running on a VPS server from another provider, there are different ways to go about it. Here is how:

Set up the DNS records with your VPS provider

If your VPS provider offers DNS hosting and management services, all you need is to add your domain there and create A records if you’re using IPv4, or AAAA records if you’re using IPv6. And then, you will have to get nameservers provided by your VPS provider and configure them in your domain registrar’s custom DNS settings. Usually, most domain registrars can allow you to set up custom nameservers from other providers.

For example, if you bought a VPS server from Contabo, and it’s what you’re using for Ant Media, what you need is to add your Domain Name inside the Contabo VPS management console and create all necessary records. And then, Contabo will automatically provide you with its Nameservers you can use to add to your Domain Registrar DNS settings. Assuming you bought your domain name from Namecheap you will have to switch to custom nameservers instead of Namecheap nameservers. This step is similar regardless of which Domain Registrar you’re using.

In summary, just get the nameservers from your VPS provider and add them to where you bought domains.

Using Cloudflare for DNS

Alternatively, if your VPS provider doesn’t offer DNS hosting and management, then you can use third-party platforms like Cloudflare.

Speaking of DNS hosting, what is it anyway?

DNS hosting refers to a service that manages the domain name system (DNS) records for a particular domain name. This allows human-readable domain names (such as example.com) to be translated into IP addresses (such as 203.0.113.1) that computers use to connect to websites and other online services.

The DNS hosting service is critical especially if you’re to add a custom domain to your server, hosting your application.

In some instances, some VPS providers don’t offer DNS hosting on their platforms. And the best way to solve this issue is to use a platform like Cloudflare.

This means that if you have a domain name bought from a third-party Domain Registrar, you will have to add it to Cloudflare for DNS only management. DNS only in this context means that you’re not adding your Domain to Cloudflare to be proxied, but you’re doing it primarily to host and manage your DNS records.

Now, the process of adding a domain name to Cloudflare is simple. If you don’t know how to go about it, then you can read this guide here from Cloudflare itself.

If you know how to add the domain name to Cloudflare, then that’s great. Let’s move to an important step which is to create records and pair them with your VPS server IP address.

Once you’ve added your domain name to Cloudflare, we need to create records as part of the DNS hosting for this case. Let’s assume that your domain name from your domain registrar is example.com. And on the other hand, if your VPS server IP address is 178.09.23.78, then set up of your DNS hosting in Cloudflare will be as follows;

Record TypeNameContentTTLProxy Status
A@178.09.23.78AutoDNS Only
A*178.09.23.78AutoDNS Only
CNAMEwwwyourdomain.com.AutoDNS Only

To explain this table, the first two records are A records, which point your domain name and any subdomains to the IP address of your VPS server.
The third record is a CNAME record, which points the www subdomain to your main domain name.

In the Name column, @ represents your domain name without any subdomains, and * represents any subdomain that does not have a specific DNS record.

Add TXT Record to verify

Adding a TXT record is necessary if you’re using third-party DNS hosting services like Cloudflare. This record is needed to certify domain name ownership when generating the Let’s Encrypt SSL certificate for Ant Media server.

Let’s Encrypt will automatically generate ACME challenges for DNS verification. The ACME protocol is used by Let’s Encrypt to automate the process of issuing and renewing SSL/TLS certificates.

When you request a certificate from Let’s Encrypt, it will create a unique challenge that you need to complete to prove that you control the domain for which you are requesting the certificate. There are three types of challenges that Let’s Encrypt can use: HTTP-01, DNS-01, and TLS-ALPN-01.

The DNS-01 challenge involves adding a special DNS record to your domain’s DNS zone that contains a specific token. Let’s Encrypt will then check for the presence of this record to verify that you own the domain.

To use the DNS-01 challenge, you will need to create a TXT record in your domain’s DNS zone ( in this case, inside Cloudflare) with the challenge token provided by Let’s Encrypt. Once you’ve created the record, you can tell Let’s Encrypt to check for it by running a command like this:

sudo certbot certonly --manual --preferred-challenges=dns -d example.com

This command will prompt you to create the TXT record in your DNS zone and then wait for Let’s Encrypt to verify it. Once the verification is complete, Let’s Encrypt will issue your SSL/TLS certificate.

DNS Propagation

Once your domain name is added, the propagation process can take up to 48 hours. So, if your domain has not yet propagated, you won’t be able to generate an SSL certificate for Ant Media server as the process of doing it will keep failing.

RECOMMENDED READING: How to install Ant Media Server on VPS

Step 2: Configure Firewall

In our experience deploying Ant Media server instances for clients, we’ve noticed that the process of installing SSL certificates is likely to fail in some scenarios when certain Firewall ports recommended by Ant Media are not configured to accept traffic.

To set up a firewall for Ant Media, it will depend on the VPS platform you’re using. Some VPS providers offer managed Firewall-as-a-Service on their platforms. This means that you will have to go to your VPS console, create a Firewall service and then add the applicable rules. This is how you’re going to do it if you’re using platforms like AWS, Linode, DigitalOcean, Azure, GCP, and more.

On the other hand, if your VPS provider doesn’t offer firewall-as-a-Service on their platform, then you will need to install your own firewall on your VPS server. You’re likely to do this if you’re using VPS platforms like Contabo.

Let’s say you bought a VPS server from Contabo, you can check if ufw firewall is installed by default by running the following command:

sudo ufw status

If ufw firewall is not installed, then you can install it by running the following command on your SSL terminal:

sudo apt-get install ufw

Open SSH port

Before you even do anything else, you need to allow SSH connection through the firewall. If you don’t do this, you’re going to be locked out of your server forever and there is no way you can fix it. Whenever you have a firewall installed on your server, ports that are not configured to accept or send traffic are closed by default. This means that if your SSH port is not opened, you’re likely to lose access to your server.

You can configure SSH through the ufw firewall by running the following command;

sudo ufw allow ssh

Ant Media Default Ports

Ant media recommends that the following ports should be opened using the firewall:

  • 1935: This port is necessary for RTMP broadcasts. And we open it by running the following command:
sudo ufw allow 1935/tcp
  • 5080: Ant Media uses this port as its default HTTP port. And you can enable it by running the following command:
sudo ufw allow 5080/tcp
  • 5443: This is Ant Media’s default HTTPS port. You can open it by running the following command:
sudo ufw allow 5443/tcp
  • 5554 : This port is used for RTSP streams for Ant Media, and you can enable it by running the following command:
sudo ufw allow 5554/tcp
  • UDP:500065000: This range is necessary for webRTC & RTSP connections. And you can enable it by running the following command:
sudo ufw allow 5000:65000/udp
  • TCP:500065000: This range is necessary if you’re running your Ant Media in Cluster mode. And you can only open it for internal networks in a cluster. It should not be open to public

Add forwarding rules

Because Ant Media uses Ports: 5080 for HTTP and 5443 for HTTPS, we need to add port forwarding rules that redirect traffic supposed to go to the known default HTTP (80) & HTTPS (443) ports to Ant Media’s defined default ports. So, we can use the following commands to achieve this:

sudo iptables -t nat -A PREROUTING -p tcp --dport 80 -j REDIRECT --to-port 5080
sudo iptables -t nat -A PREROUTING -p tcp --dport 443 -j REDIRECT --to-port 5443

Saving ufw rules

Now that we’ve added all the firewall rules the server needs, we need to make sure that they’re persistent so that when the server reboots next time, these rules won’t be erased. We can achieve this by running the following command:

sudo ufw enable

Step 3: Install SSL certificate on Ant Media Server

You need to first go to the folder where Ant Media Server is installed. You can also run the following command to get there:

cd /usr/local/antmedia

Assuming there is a service like apache2 using TCP Port: 80 on your server, you need to stop it by running the following command:

sudo service apache2 stop

Now, you can enable the SSL certificate on Ant Media by running the following command:

sudo ./enable_ssl.sh -d example.com

Make sure you replace example.com with your own domain name you configured earlier.

You can then re-enable the apache2 service. This is in case you have it running on your server. Use the following command;

sudo service apache2 start

Finally, you have SSL configured on Ant Media server. You can now access your Ant Media web panel using an HTTPS URL that looks like this below. All you have to do is replace your domain.

https://example.com:5443

Extract the embed code again

After installing SSL, you have to go back to the stream you want to embed and re-extract the iframe code. This time, the defined URL for the source attribute in the code will be prefixed with HTTPS, indicating that SSL is configured. See the example code below;

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

You will notice that the URL assigned to src attribute has been prefixed with HTTPS instead of HTTP as it was before installing SSL

More Ant Media Server articles to explore

Hire us to handle what you want

Hire us through our Fiverr Profile and leave all the complicated & technical stuff to us. Here are some of the things we can do for you:

  • Website migration, troubleshooting, and maintenance.
  • Server & application deployment, scaling, troubleshooting, and maintenance
  • Deployment of Kubernetes, Docker, Cloudron, Ant Media, Apache, Nginx,  OpenVPN, cPanel, WHMCS, WordPress, and more
  • Everything you need on AWS, IBM Cloud, GCP, Azure, Oracle Cloud, Alibaba Cloud, Linode, Contabo, DigitalOcean, Ionos, Vultr, GoDaddy, HostGator, Namecheap, DreamHost, and more.
 

We will design, configure, deploy, or troubleshoot anything you want. Starting from $10, we will get your job done in the shortest time possible. Your payment is safe with Fiverr as we will only be paid once your project is completed.