Nowtilus IOS Demo App Documentation

This document guides in using the Nowtilus IOS Demo App.

Home Screen

In the home screen, the SSAI URL should be provided in the allocated text box. If it is a live stream, switch on the live button and click on the play button to load the media. If it is a VOD, switch off the live button and click on the play button to load the media. Once you click on the play button, screen 2 will appear where we can see the video player and ad information.

Home Screen

Player Screen

This screen contains four different views as shown in the image.

1. The first view on the top contains the ad tracking information like tracking urls.

2. The second view in the middle of the screen contains the AV Player and its player controls.

3. The third view contains the functionalities like Ad Ends in, Click Ad and Skip Ad. In this, Ad Ends in text view shows the ad remaining time in seconds. As the ad progresses, the time reduces and the timer will get to 0 when the ad ends. Click Ad is a button which when clicked will redirect the user to safari browser and it opens the Ad Click Through url of that ad. Skip Ad button helps to skip the ads in VOD streams. This button will be enabled after 5 seconds from the ad start. Currently this functionality is disabled for live streams.

4. The fourth view contains the current playing ad information like Ad Event, Ad Number, Ad Title and Ad ID.

Player Screen

List of Ad Events:

adCueTimelineAdded

adCueTimelineStart

adImpression

adStarted

adFirstQuartile

adMidpoint

adThirdQuartile

adComplete

adCueTimelineEnd

Stream URL Types

Live:

This app can handle multiple live URLs like - Resolver, View, Master.m3u8 and Audio only. Based on the input URL given, the app will internally classify the URL and fetch the data accordingly.

Sample Live Stream URLs:

Resolver: https://live.serverside.ai/resolver/hls/view/7a188add-300e-47cc-934f-aa2f0e2beb6a?api-key=e62ae75a-60d5-45b7-a171-27c9c6d29a9d

View: https://live.serverside.ai/hls/view/7a188add-300e-47cc-934f-aa2f0e2beb6a?api-key=e62ae75a-60d5-45b7-a171-27c9c6d29a9d

Master.m3u8: http://audio.enfqb0aqbtg3cwet.germanywestcentral.azurecontainer.io:3001/hls/master.m3u8

VOD:

A curl request to the VOD URL will be made and response of this request will be passed to the MediaMelon SDK for Ad detection.

Sample VOD Stream URL: https://live.serverside.ai/vod-proxy/hls/view/c1c73566-a98d-42a5-b2ad-c1c3b2d42f88?api-key=bbfd3d9c-9726-454f-b71b-d34fcafa6205&ssai-markers=0%2C2%2C30%3B120%2C2%2C30&ssai-content=https%3A%2F%2Fssaimediaservices-euwe.streaming.media.azure.net/62ec1234-fcf0-47d5-a4d4-ae463827dcfc/Cosmo_Laundromat.ism/manifest(format=m3u8-aapl-v3)

UI Elements

This section helps in understanding how the screen layouts are arranged for modifications.

Home Screen

View Controller file of this screen is called as ViewController. The layout of the screen looks like below:

Home Screen Story Board Layout

In addition to the above layout, in the ViewController file, labels for Title, Version, URL Title and Live Text are added. The positioning and the fit of all these elements are handled in the viewDidLoad function of the ViewController file. OnClick action for the play button is also handled in this file. In this onClick action, stream url and isLive variables will be assigned with the values taken from the user.

Player Screen

View Controller file of this screen is called as SecondViewController. The layout of the screen looks like below:

Player Screen Story Board Layout

Inside the main view of this screen, total 4 individual views are added as shown in the above image. Positions and arrangements of all these views and elements are handled in a function called arrangeTheScreenViews inside the SecondViewController file.

Ad Events Info

Ad events info is being assigned to the UI inside the notifyMMSSAIAdEvents function of this file.

// Updating UI in the player screen for ad events
DispatchQueue.main.async {
    self.textView.text = "Ad Event : \(eventName)"
    self.textViewAdID.text = "Ad Id : \(AVPlayerIntegrationWrapper.getAdId(adInfo: adInfo))"
    self.textViewAdTitle.text = "Ad Title : \(AVPlayerIntegrationWrapper.getAdTitle(adInfo: adInfo))"
    self.textViewAdNum.text = "Ad Number : \(AVPlayerIntegrationWrapper.getAdIndex(adInfo: adInfo)) / \(AVPlayerIntegrationWrapper.getAdTotalAdsInPod(adInfo: adInfo))"
                    
    var TrackurlTV = ""
    for url in trackingUrls
    {
    TrackurlTV += "-> "
    TrackurlTV += url.absoluteString
    TrackurlTV += "\n\n"
    }
    self.TrackurlTV.text = TrackurlTV
}
// Updating UI in the player screen for ad events

Handling Click Ad Button

In this, Ad Click Through url is fetched from the SSAIAdManger and the same will be opened in the safari browser. The player will be paused when user clicked on the button and the player will be resumed when user came back to the application from browser.

At the same time, when user clicked on the Ad, adClickTrackingUrls will be fired from the SSAIAdManger.

// Fetching the click through url from the ad data
if (adInfo.adClickEvents.count > 0) {
    for ele in adInfo.adClickEvents {
        if ele.type == ClickType(rawValue: "ClickThrough") {
        adClickThroughURL = ele.url
        adClickButton.isHidden = false
        }
    }   
}
// Fetching the click through url from the ad data

// Ad click button implementation
@IBAction func adClickAction(_ sender: Any) {
    player.pause()
    UIApplication.shared.open(adClickThroughURL!, options: [:], completionHandler: nil)
    AVPlayerIntegrationWrapper.shared.fireAdClickTrackingURLs()
}
// Ad click button implementation

Handling Skip Ad Button

The skip ad button will be enabled after 5 seconds of the Ad Start for VOD streams. This button is disabled for live streams as of now.

// Ad Skip Enabling after 5sec only for VOD
DispatchQueue.main.asyncAfter(deadline: .now() + 5) {
   if(!self.isLive){
     self.skipButton.isHidden = false
   }
}
// Ad Skip Enabling after 5sec only for VOD

// Ad click button implementation
@IBAction func adClickAction(_ sender: Any) {
     player.pause()
     UIApplication.shared.open(adClickThroughURL!, options: [:], completionHandler: nil)
     AVPlayerIntegrationWrapper.shared.fireAdClickTrackingURLs()
}
// Ad click button implementation

Handling Ad Remaining Time TextView

Ad remaining time is calculated as the difference between adEndTime and currentPlayerPosition. The function named notifyAdRemainingTime will be called 2 times in every second from the SSAIAdManger using delegates to update the ad remaining time.

// This callback updates the ad reamaining time continuously
func notifyAdRemainingTime(playerPos: Int64, adEndTime: Int64) {        
     self.adRemTimeTV.text = "AD Ends in: \((adEndTime - playerPos)/1000) sec"
}