Overlay Sports Scores

[itkujo]

I have been following for hours the documentation in github and on the knowledgebase here https://antmedia.io/docs/guides/recording-live-streams/media-push-plugin/ and cant figure out how to get my livescores from a web page. (https://app.overlays.uno/output/3jd8eNzBWOOuhCZuKvq0EG to appear on top of another stream using the Composite Layout function. I would love some help please.

I am using AMS enterprise on trial to get this to work. If we can get it to work we will be moving forward with purchasing our AMS copy. But it is important to get our overlays on top of the video without the need of any other software but AMS and its plugins.

Any and all help is appreciated. and if anyone needs more info from me please let me know.

[rahul78275]

Hello @itkujo

Thank you for reaching out with your query. There are two approaches you can use to achieve this:

1. Media Push Plugin

2. Data Channel (Note: Using this method will only overlay the score on the video; the score data will not be embedded in the video itself if you download the recording)

I haven't personally used the Media Push Plugin yet, but after reviewing the documentation, it appears straightforward. I can certainly give it a try and get back to you in a couple of days.

As for the Data Channel approach, updating the score is quite simple, and I have successfully implemented this method. To do so, you would send the score information as a JSON object over the Data Channel from the streamer's end. This will broadcast the score to all connected viewers.

On the viewer's side, you can capture and display this data in the video area. Implementing this will require some HTML and CSS for styling, but it's a lightweight solution and does not significantly impact CPU usage (unlike the Media Push Plugin, which may be more CPU-intensive).

Let me know if you need further clarification on any of the steps.

[klasadoroty]

Hi. Media Push - there is an explanation.
Show us 'Data Channel' - step by step. I think it will be interesting for everyone.

[rahul78275]

Hello @klasadoroty

For a quick understanding of overlay using Data Channel, I wrote a code snippet below to send marquee data from streamer to viewer end. For detailed explanation I can write a blog post later on with a demo script.

Implementation having two parts, first one is Streamer Area and the second is Viewer area.

Streamer End
Set marquee details on streamer Area.

Streamer Area's UI to set the marquee text

<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
	<div class="card-body border">
		<textarea rows="2" id="lsfwMarqueeText" class="form-control" Placeholder="Write content here."></textarea>
		<span id="lswErrMarqueeText" class="text-danger"></span>

		<div class="d-inline-flex mt-3">
			<div class="form-group">
				<input type="text" id="lsfwMarqueeColor" value="#fff" class="lsfw-color-field" />
				<label for="">Color</label>
			</div>

			<div class="form-group">
				<input type="text" id="lsfwMarqueeBackgroundColor" value="#e83b3b" class="lsfw-color-field" />
				<label for="">Background Color</label>
			</div>
		</div>
		
	</div>
</div>

<div class="form-group text-center mt-4">
    <button class="btn btn-primary" id="lsfwPublishOverlay">Publish Overlay</button>
    <div id="lswOverlayResponse" class="text-info"></div>
</div>

<script>

	var design;
	
// Default values
	if (design === "" || design === null || design === undefined) {
		design = {
			"streamid": '',
			"logo": 'path/to/default/logo.png',
			"display_logo": false,
			"logo_size": { "logoWidth": 100, "logoHeight": 75 },
			"logo_position": 'top_right',
			'marquee_text': '',
			"marquee_dir": 'left',
			"marquee_color": '#fff',
			"marquee_background": '#e83b3b'
		};
	}
        
// Trigger changeDesign function to get the preview before sending the marquee details on viewer end.
	var lsfwMarqueeText_textarea = document.getElementById("lsfwMarqueeText");
	lsfwMarqueeText_textarea.addEventListener("keyup", changeDesign, false);

// Once preview looks fine, send to all viewers
       var publish_overlay_btn = document.getElementById("lsfwPublishOverlay");
	publish_overlay_btn.addEventListener("click", lsfwPublishOverlay, false);
	
// This function creates a preview of overlay on streamer end
	function changeDesign() {
		jQuery("#lsfwPublishOverlay").text('Publish Overlay');
		jQuery("#lsfwPublishOverlay").attr('disabled', false);

		design.marquee_background = jQuery('#lsfwMarqueeBackgroundColor').val();
		design.marquee_color = jQuery('#lsfwMarqueeColor').val();
		design.marquee_text = jQuery('#lsfwMarqueeText').val();

		let tmp = document.createElement("DIV");
		tmp.innerHTML = design.marquee_text;
		design.marquee_text = tmp.textContent || tmp.innerText || "";

		jQuery('#lsfwMarqueeText').val(design.marquee_text);

// Validation
		if (design.marquee_text === "") {
			jQuery('#lsfwMarqueeText').css('border-color', '#dc3545');
			jQuery('#lsfwErrMarqueeText').text('Enter Marquee Text');
			jQuery('#marquee_overlay').hide();
		} else {
// Display preview at streamer end		
			jQuery('#lsfwErrMarqueeText').text('');
			jQuery('#lsfwMarqueeText').css('border-color', '#6c757d');
			jQuery('#marquee_overlay').html('<marquee dir="' + design.marquee_dir + '" class="p-3 font-weight-bold" style="color:' + design.marquee_color + '; background:' + design.marquee_background + ';">' + design.marquee_text + '</marquee>');
			jQuery('#marquee_overlay').show();
		}

	}
	

 // Broadcast the marquee data using Data Channel to all connected viewers. 
 // *Note : Make sure you have enabled the data channel from antmedia console area.
	function lsfwPublishOverlay() {
		if (!design) {
			alert('Prepare design to continue');
		}

		design.streamid = streamId; 

		try {
			var iceState = webRTCAdaptor.iceConnectionState(streamId);
			if (iceState != null && iceState != "failed" && iceState != "disconnected") {

               // Create a new event type "overlay" to recognize it consist marquee data.
				let msgObj = JSON.stringify({ eventType: 'overlay', design: design, username: username });
				webRTCAdaptor.sendData(streamId, msgObj);
			}
			else {
				jQuery("#lsfwPublishOverlay").text('Published');
				jQuery("#lsfwPublishOverlay").attr('disabled', true);

				return false;
			}


		} catch (exception) {
			console.error(exception);
			alert("Make sure you've enabled data channel on server web panel");
		}
	}

</script>

Viewer end

<div class="videoSection">
	<div class="">
		<div class="pos-relative">
			
			<span class="lsfw-badge lsfw-badge-info lsfw-mb-2" id="info_display" style="font-size:14px;"></span>
			<div id="players" class="pos-relative">
				<video id="localVideo" autoplay playsinline></video>

				<!-- Overlay -->
				<span id="logo_overlay" style="display:none;"></span>
				<span id="marquee_overlay" class="w-100" style="display:none;"></span>
			
			</div>
		</div>

		<span class="lsfw-badge lsfw-badge-danger mb-2" id="error_display" style="font-size:14px;display:none;"></span>
		<span class="" id="video_loader" style="font-size:14px;"><i class="fa fa-spinner fa-2x fa-white fa-spin"></i></span>
		
		<span class="badgeViewerCount">
			<span class="lsfw-badge lsfw-badge-danger" id="broadcastingInfo" style="font-size:14px">Live :</span>
			<span class="lsfw-badge lsfw-badge-dark" id="lsfwViewerCount" style="font-size:14px;">0</span>
		</span>
	</div>
</div>

<script>
webRTCAdaptor = new webRTCAdaptor({
	websocket_url : websocketURL,
	mediaConstraints : mediaConstraints,
	peerconnection_config : pc_config,
	sdp_constraints : sdpConstraints,
	remoteVideoId : "localVideo",
	dataChannelEnabled : true,
	reconnectIfRequiredFlag:false,
	isPlayMode:true,
	debug:true,
	callback : (info, obj) => {
		if (info == "initialized") {
			console.log("initialized");

      //Data channel receives the data and validates it consist overlay data.
		} else if (info == "data_received") {
			let data = obj.data;
			var notificationEvent;
			
			try {
				notificationEvent = JSON.parse(data);
				if(notificationEvent != null && typeof(notificationEvent) == "object") {
					if(notificationEvent.eventType === "overlay") {
						console.log("notificationEvent.design", notificationEvent.design);

                                                // Update overlay details
						changeDesign(notificationEvent.design);
					}
				}

			} catch (exception) {
				console.log("chat exception", exception);
			}

		} else if (info == "closed") {
			if (typeof obj != "undefined") {
				console.log("Connecton closed: " + JSON.stringify(obj));
			}
		}
}

// This function updates the DOM with latest data received from data channel
function changeDesign(design) {
	let logoOverlay = jQuery('#logo_overlay');
	let marqueeOverlay = jQuery('#marquee_overlay');

// Handle logo display
	if (design.display_logo) {
		logoOverlay.html(`<img src="${design.logo}" width="${design.logo_size.logoWidth}" height="${design.logo_size.logoHeight}">`).show();
	} else {
		logoOverlay.hide();
	}

// Handle marquee text
	if (design.marquee_text) {
		marqueeOverlay.html(`<marquee dir="${design.marquee_dir}" class="lsfw-p-3 font-weight-bold" style="color:${design.marquee_color}; background:${design.marquee_background};">${design.marquee_text}</marquee>`).show();
	} else {
		marqueeOverlay.hide();
	}
}
</script>