How to Add a Logo Overlay in Live Broadcasts with WebRTCApp in Community Edition 2.8.2

[alanpereiracoelho]

Hello, Ant Media Server Community,

I hope everyone is doing well. I am working with the Ant Media Server Community Edition 2.8.2 (20240201_1151) and have encountered a challenge that I hope you can help me with.

My goal is to add an overlay, specifically a logo, to the bottom right corner of live broadcasts using WebRTCApp. I have explored the code and available documentation but have yet to successfully implement this feature.

Could you guide me on the best way to add a logo overlay in live broadcasts? Is there a specific configuration, plugin, or method in the source code that I should use to achieve this?

Any code examples, guidance, or resources you could share would be greatly appreciated. I am looking forward to integrating this functionality and enhancing the user experience in our live broadcasts.

Thank you in advance for any help or direction you can provide.

Best regards,

[USAMAWIZARD]

@alanpereiracoelho , There can be two solution for this each one has its own pros and cons.

1. Client Side Overlay.
   Overlay the log on the client player side using some basic CSS and images you can have a fake overlay on the video player.

Pros : Does not require Re-Encoding , Does not have any extra load on the server side.
Cons : Its basically a fake overlay , its not inside the video but its just a image on top of player that can be removed easily. If user download the video there will be no overlay on it as it was only on the player side.

2. Overlay on Server Side.
   this method will decode the video on server side add overlay on the video and re-encode the video.

pros : not possible to remove the overlay.
cons : requires a very powerful server as re-encoding requires very high resources.

Let me know in which solution you are interested in.

[klasadoroty]

Hello.
Maybe present both solutions.
There will be no questions in the future.
Both solutions are interesting.
Regards.

[alanpereiracoelho]

@USAMAWIZARD
Thank you for presenting the options. After considering both, the first option, involving the implementation of a client-side overlay using CSS and images, appears to be the most suitable for my needs at this time. This approach, not requiring re-encoding and not adding extra load to the server, aligns well with the limitations and requirements of my project. I understand that the overlay will not be present in downloaded videos, but this limitation is acceptable within the current context. If possible, I would appreciate more details or guidance on how to effectively implement this solution.

[USAMAWIZARD]

@alanpereiracoelho , There can be two solution for this each one has its own pros and cons.

1. Client Side Overlay.

Overlay the log on the client player side using some basic CSS and images you can have a fake overlay on the video player.

Pros : Does not require Re-Encoding , Does not have any extra load on the server side.
Cons : Its basically a fake overlay , its not inside the video but its just a image on top of player that can be removed easily. If user download the video there will be no overlay on it as it was only on the player side.

How to Use

We have a option to show the logo on the player you can un-comment this line

The file should be available in /usr/local/antmedia/APPNAME/play.html

search for this line

	<div id="video_info">
		Your live stream will play automatically as soon as it's available. <br />Get ready to be part of the action!
		<!--
		<div>
			<img id="logo" src="images/logo.png" />
		</div>
		-->
	</div>

remove the comments and added some css it will look something like this

        <div>
                Your live stream will play automatically as soon as it's availa>
                <div>
                         <img id="logo" src="images/logo.png" style="position: relative; z-index: 9999; " />
                </div>
        </div>

remove id="video_info"

By default the this dispay the overlay logo until the video start to play. remove the id="video_info" then it will be kept there even after the video has start to play.

add your image file in server directory /usr/local/antmedia/APPNAME/images

adjust the image height width and CSS accordingly.

2. Overlay on Server Side.

this method will decode the video on server side add overlay on the video and re-encode the video.

pros : not possible to remove the overlay.
cons : requires a very powerful server as re-encoding requires very high resources.

How to Use

for this you can use filler Plugin which is available here.

Movie Filter and Adding Logo:

You can use a movie filter to create a stream from an image. If you create a stream from a logo image and add it as an overlay to another stream, you will have an output stream with the logo.

Curl Command:

curl -i -X POST -H "Accept: Application/json" -H "Content-Type: application/json" "http://localhost:5080/WebRTCAppEE/rest/v2/filters/create" -d '{"filterId":"logodemo","inputStreams":["stream1"],"outputStreams":["test"],"videoFilter":"movie=/home/burak/antmedia.png[logo];[in0][logo]overlay[out0]","audioFilter":"[in0]acopy[out0]","videoEnabled":"true","audioEnabled":"true","type":"asynchronous"}'

Input Streams:
stream1
Output Streams:
test
Video Filter Text:

Video Filter Text:
movie=/home/burak/antmedia.png[logo];[in0][logo]overlay[out0]
Output:

[alanpereiracoelho]

1. Client-Side Overlay:

I implemented it as suggested, and the logo appeared correctly over the video at the start. However, as soon as the video starts, the logo disappears and is no longer overlaid. I removed the id="video_info" from the page /usr/local/antmedia/WebRTCAppEE/play.html, as indicated, but the problem persists after the video starts.

2. Server-Side Overlay:

When trying the server-side method, I encountered an error. It seems that the path /rest/v2/filters/create is not available within WebRTCAppEE. When accessing it, I receive a 404 error with the following message:

HTTP/1.1 404 Content-Type: text/html;charset=utf-8 Content-Language: en Content-Length: 802 Date: Thu, 08 Feb 2024 13:14:48 GMT
<!doctype html><title>HTTP Status 404 – Not Found</title> <style type="text/css">body {font-family:Tahoma,Arial,sans-serif;} h1, h2, h3, b {color:white;background-color:#525D76;} h1 {font-size:22px;} h2 {font-size:16px;} h3 {font-size:14px;} p {font-size:12px;} a {color:black;} .line {height:1px;background-color:#525D76;border:none;}</style>

HTTP Status 404 – Not Found

---

Type Status Report

Message The requested resource [/WebRTCAppEE/rest/v2/filters/create] is not available

Description The origin server did not find a current representation for the target resource or is not willing to disclose that one exists.

---

Apache Tomcat/10.1.16

Do you have any idea what might be causing these problems or suggestions on how I can solve them?

Thank you in advance for your help!

[klasadoroty]

"I implemented it as suggested, and the logo appeared correctly over the video at the start. However, as soon as the video starts, the logo disappears and is no longer overlaid. I removed the id="video_info" from the page /usr/local/antmedia/WebRTCAppEE/play.html, as indicated, but the problem persists after the video starts." - I confirm. Identically.

[USAMAWIZARD]

@klasadoroty @alanpereiracoelho I have updated my answer and modified some css it should work now ,

     <div>
            Your live stream will play automatically as soon as it's
            <div>
                     <img id="logo" src="images/logo.png" style="position: relative; z-index: 9999; " />
            </div>
    </div>

2. Server-Side Overlay:
   You will need to install a plugin first to make it work , please follow the documentation here.

[mekya]

Hi Guys,

Media Push Plugin is another way to add overlays for the published streams.

You can put the overlays on https://overlays.uno/home

I'm more than happy to make the demo for you if anyone is interested. You can DM on linkedin as well

Cheers
Oguz

[klasadoroty]

Hi,
cool thing. I use it sometimes.
Now that you know this... is it possible to insert a specific URL as an overlay? So that it displays the contents of this URL.

[mekya]

Hi @klasadoroty,

To insert as an overlay, there are two things.

• Fast Solution: Just prepare a player web page and put the overlay there as in https://overlays.uno/home. You can on/off, change it on the fly
• Permanent Solution: Prepare a player page to insert overlay anywhere programmatically. Prepare some JS functions to insert it and send the JS command to the MediaPush Plugin to manage them dynamically. MediaPush supports sending JS commands through REST methods.
  https://github.com/ant-media/Plugins/tree/master/MediaPushPlugin#run-javascript-in-the-url

Does it make sense? Let me know if we can help further.

Cheers
Oguz

[josetowers]

How to place a logo on the server side, I can't find relevant information