{"id":11095,"date":"2017-09-10T02:10:23","date_gmt":"2017-09-10T02:10:23","guid":{"rendered":"https:\/\/expressplay.local\/?page_id=11095"},"modified":"2021-10-19T06:44:29","modified_gmt":"2021-10-19T13:44:29","slug":"tutorial-ios-app","status":"publish","type":"page","link":"https:\/\/www.expressplay.com\/ko\/developer\/tutorial-ios-app\/","title":{"rendered":"Tutorial: iOS App"},"content":{"rendered":"<style type=\"text\/css\">\n<p>    hr, img {<br \/>\n        margin: 20px auto;<br \/>\n    }<\/p>\n<p>    code {<br \/>\n        word-break: break-all;<br \/>\n        white-space: pre-wrap;<br \/>\n        font-size: 14px;<br \/>\n        color: #555;<br \/>\n        margin: 20px 0;<br \/>\n    }<br \/>\n<\/style>\n<div class=\"flex flex-wrap -mx-6\">\n<div class=\"w-full lg:w-7\/12 px-6\">\n<h2>iOS App Tutorial<\/h2>\n<h4 style=\"font-size: 18px; font-weight: 400;\">This tutorial guides you through the process of downloading the tools required to create a functional barebones iOS ExpressPlay enabled media application. At the end of this tutorial you will know how to stream content with a MS3 Token, while utilizing the ExpressPlay SDK.<\/h4>\n<div class=\"bg-grey-100 p-8 mt-12 mb-12\">\n<h4 style=\"margin-bottom: 10px; font-weight: 400; font-size: 20px;\">Requirements<\/h4>\n<ul class=\"tutorial_container\">\n<li>An iOS Device with the current version of iOS<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<div class=\"w-full lg:w-5\/12 px-6\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2017\/08\/developer-sdk-large.png\" alt=\"\" \/><\/div>\n<\/div>\n<hr \/>\n<div class=\"tutorial_step clearfix\">\n<p>STEP 1 &#8211; Start your project and install the ExpressPlay SDK<\/p>\n<\/div>\n<p><span style=\"font-size: 15px;\">Download the latest Xcode release. You can find the latest copy of Xcode <\/span><a href=\"https:\/\/developer.apple.com\/xcode\/\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">here.<\/a><\/p>\n<hr \/>\n<div class=\"tutorial_step clearfix\">\n<p>STEP 2 &#8211; Download the latest ExpressPlay SDK<\/p>\n<\/div>\n<p><span style=\"font-size: 15px;\">The latest version of the ExpressPlay SDK can be download from the <a class=\"underline\" href=\"https:\/\/admin.expressplay.com\/sdk\/\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">ExpressPlay Admin Portal<\/a>.<\/span><\/p>\n<p><span style=\"font-size: 15px;\"> Please take care to remember where you save the file on your computer, as you will need it in the next step.<\/span><\/p>\n<hr \/>\n<div class=\"tutorial_step clearfix\">\n<p>STEP 3 &#8211; Reference the ExpressPlay SDK<\/p>\n<\/div>\n<p>Create a new project in Xcode.<\/p>\n<p><img decoding=\"async\" style=\"margin: 20px 0; border: 1px solid #e7e7e7;\" src=\"\/wp-content\/uploads\/2017\/08\/tutorial-ios1.png\" alt=\"\" \/><\/p>\n<p><span style=\"font-size: 15px;\">Select iOS and an application template. Please note that the Single View template is used throughout this tutorial, though multi-view applications are fully supported by ExpressPlay.<\/span><\/p>\n<p><img decoding=\"async\" style=\"margin: 20px 0; border: 1px solid #e7e7e7;\" src=\"\/wp-content\/uploads\/2017\/08\/tutorial-ios2.png\" alt=\"\" \/><\/p>\n<p><span style=\"font-size: 15px;\">Name your project, please avoid the use of spaces in the name as it will complicate things later.<\/span><\/p>\n<p><img decoding=\"async\" style=\"margin: 20px 0; border: 1px solid #e7e7e7;\" src=\"\/wp-content\/uploads\/2017\/08\/tutorial-ios3.png\" alt=\"\" \/><\/p>\n<p>When you finish the project wizard your application will be open for development. Begin setting up the ExpressPlay SDK in Xcode by referencing the necessary frameworks and helper files.<\/p>\n<p>First, find the location of your ExpressPlay SDK and navigate to <strong>ExpressPlaySDK &gt; Library &gt; Release<\/strong>.<\/p>\n<p>Please note, there are two versions of the necessary framework &#8211; a debugging version that runs ExpressPlay on Xcode simulators and a release version that is to be used for physical iOS devices. Pick the appropriate <em>ExpressPlay.framework<\/em>, then drag the<em>ExpressPlay.framework<\/em> file into the Frameworks section of the Project Navigator.<\/p>\n<p><img decoding=\"async\" style=\"margin: 20px 0; border: 1px solid #e7e7e7;\" src=\"\/wp-content\/uploads\/2017\/08\/tutorial-ios4.png\" alt=\"\" \/><\/p>\n<p><span style=\"font-size: 15px;\">Click on your project in the upper left hand corner to display the Project Manager and select <\/span><strong>Build Phases<\/strong><span style=\"font-size: 15px;\"> from the top center navigation buttons. Then find the section called <\/span><strong>Link Binary with Libraries<\/strong><span style=\"font-size: 15px;\"> and expand it by clicking on the side arrow.<\/span><\/p>\n<p><img decoding=\"async\" style=\"margin: 20px 0; border: 1px solid #e7e7e7;\" src=\"\/wp-content\/uploads\/2017\/08\/tutorial-ios5.png\" alt=\"\" \/><\/p>\n<p><span style=\"font-size: 15px;\">Add the necessary libraries by clicking on the plus sign. A pop up should appear that shows all the native Xcode libraries. Add the libraries called <\/span><em>MediaPlayer.framework<\/em><span style=\"font-size: 15px;\"> and <\/span><em>libz.dylib<\/em><span style=\"font-size: 15px;\">. The frameworks will appear under <\/span><strong>Link Binary with Libraries<\/strong><span style=\"font-size: 15px;\">. The<\/span><em>ExpressPlay.framework<\/em><span style=\"font-size: 15px;\"> should already appear in the list of referenced libraries, but if it does not add it as well.<\/span><\/p>\n<p><img decoding=\"async\" style=\"margin: 20px 0; border: 1px solid #e7e7e7;\" src=\"\/wp-content\/uploads\/2017\/08\/tutorial-ios6.png\" alt=\"\" \/><\/p>\n<p><span style=\"font-size: 15px;\">Then add both files to your project. To do this, open Xcode and select File on the top left. Then click <\/span><strong>Add Files to [Project]<\/strong><span style=\"font-size: 15px;\">.<\/span><\/p>\n<p><img decoding=\"async\" style=\"margin: 20px 0; border: 1px solid #e7e7e7;\" src=\"\/wp-content\/uploads\/2017\/08\/tutorial-ios7.png\" alt=\"\" \/><\/p>\n<p><span style=\"font-size: 15px;\">Select both <\/span><em>ExpressPlayIOS.h<\/em><span style=\"font-size: 15px;\"> and <\/span><em>ExpressPlayIOS.mm<\/em><span style=\"font-size: 15px;\"> from the directory in the pop up window.<\/span><\/p>\n<p><img decoding=\"async\" style=\"margin: 20px 0; border: 1px solid #e7e7e7;\" src=\"\/wp-content\/uploads\/2017\/08\/tutorial-ios8.png\" alt=\"\" \/><\/p>\n<p><span style=\"font-size: 15px;\">Both files should appear in the project navigator.<\/span><\/p>\n<p><img decoding=\"async\" style=\"margin: 20px 0; border: 1px solid #e7e7e7;\" src=\"\/wp-content\/uploads\/2017\/08\/tutorial-ios9.png\" alt=\"\" \/><\/p>\n<p><span style=\"font-size: 15px;\">Finally, go back to <\/span><strong>Build Phases<\/strong><span style=\"font-size: 15px;\"> and expand the <\/span><strong>Compile Sources<\/strong><span style=\"font-size: 15px;\"> section.<\/span><\/p>\n<p><img decoding=\"async\" style=\"margin: 20px 0; border: 1px solid #e7e7e7;\" src=\"\/wp-content\/uploads\/2017\/08\/tutorial-ios10.png\" alt=\"\" \/><\/p>\n<p>The <em>ExpressPlay.mm<\/em> file should appear in the list of compiled sources. If it does not appear in the list, you must add it. Click on the plus sign and add the <em>ExpressPlayiOS.mm<\/em> file. It should appear under <strong>Compile Sources<\/strong>.<\/p>\n<p>With the SDK, Media Player, and helper files fully integrated, you are now ready to start coding.<\/p>\n<hr \/>\n<div class=\"tutorial_step clearfix\">\n<p>STEP 4 &#8211; Importing Dependencies and Initializing Variables<\/p>\n<\/div>\n<p>Four files must be imported to your project&#8217;s <em>ViewController.m<\/em> file to use ExpressPlay functions and the ExpressPlayIOS wrapper functions.<\/p>\n<p>Copy and paste the block below in place of your application&#8217;s #import \u201cViewController.h\u201d line. The new block includes #import &#8220;ViewController.h\u201d .<\/p>\n<div class=\"bg-grey-100 p-8 mt-12 mb-12\"><code>#import &lt;MediaPlayer\/MediaPlayer.h&gt;<br \/>\n#import &lt;ExpressPlay\/ExpressPlay.h&gt;<br \/>\n#import \"ViewController.h\"<br \/>\n#import \"ExpressPlayIOS.h\"<\/code><\/div>\n<p>There are two variables that must be declared in the beginning of this application. The first is the ExpressPlay movie player which is explained in detail later, and the second is the AlertView which locks the screen during initialization. To declare these variables, copy and paste the code block below into your application&#8217;s <em>ViewController.m&#8217;s<\/em> @interface ViewController function<\/p>\n<div class=\"bg-grey-100 p-8 mt-12 mb-12\"><code>{<br \/>\nEXP_MoviePlayerController*          player;<br \/>\nUIAlertView*                        alertView;<br \/>\n}<\/code><\/div>\n<hr \/>\n<div class=\"tutorial_step clearfix\">\n<p>STEP 5 &#8211; Initialization<\/p>\n<\/div>\n<p>The first thing your application must do is initialize the ExpressPlay engine, which registers your application as a unique application. The action is accomplished by the EXP_Initialize function of <i>ExpressPlayIOS.mm<\/i>. Initialization connects and authenticates the client application with the ExpressPlay service giving it a unique ID within the system. This is crucial to enabling many of the features within ExpressPlay.<\/p>\n<p>The code block below invokes the initialization functions. Copy the code block into your application\u2019s <i>ViewController.m&#8217;s<\/i> <span style=\"font-family: \u201ccourier\u201d;\">viewDidLoad<\/span> function beneath the line &#8220;<span style=\"font-family: \u201ccourier\u201d;\">[super viewDidLoad];<\/span>&#8220;.<\/p>\n<div class=\"bg-grey-100 p-8 mt-12 mb-12\"><code><code>     \/\/ initialize our variables<br \/>\nalertView = nil;<br \/>\nplayer    = nil;<\/code><\/code>\/\/ ensure that we&#8217;re properly initialized and personalized<br \/>\nWSB_Result initialization_status = EXP_Initialize(^(WSB_Result result) {<br \/>\nif (alertView) {<br \/>\n[alertView dismissWithClickedButtonIndex:-1 animated:YES];<br \/>\nalertView = nil;<br \/>\n}<br \/>\n[self readyToPlay];<br \/>\n});<br \/>\nif (initialization_status == EXP_INIT_ASYNC){<br \/>\n\/\/ show a message to indicate we are personalizing now (this will be dismissed from the callback)<br \/>\nalertView = [[UIAlertView alloc] initWithTitle:@&#8221;Personalizing&#8221; message:@&#8221;Please wait&#8221; delegate:self cancelButtonTitle:nil otherButtonTitles: nil];<br \/>\n[alertView show];<\/p>\n<p><code><code><\/code><\/code>UIActivityIndicatorView *indicator = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleWhiteLarge];<br \/>\nindicator.center = CGPointMake(alertView.bounds.size.width \/ 2, alertView.bounds.size.height &#8211; 50);<br \/>\n[indicator startAnimating];<br \/>\n[alertView addSubview:indicator];<\/p>\n<p><code><code><\/code><\/code>}<br \/>\nelse {<br \/>\n[self readyToPlay];<br \/>\n}<\/p>\n<\/div>\n<p><span style=\"font-size: 15px;\">This block locks the screen during the initialization process and ensures initialization only takes place once per device.<\/span><\/p>\n<hr \/>\n<div class=\"tutorial_step clearfix\">\n<p>STEP 6 &#8211; Implementing the Media Player<\/p>\n<\/div>\n<p>Copy and paste the code from the code block below into your <i>ViewController.m<\/i> file to create a new function. This new function hosts the application&#8217;s media player. For this tutorial we name the function <span style=\"font-family: \u201ccourier\u201d;\">readyToPlay<\/span>.<\/p>\n<div class=\"bg-grey-100 p-8 mt-12 mb-12\"><code><code>- (void)readyToPlay<br \/>\n{<br \/>\n\/\/ *********** IMPORTANT ************<br \/>\n\/\/ THIS APP WILL NOT WORK WITHOUT:<br \/>\n\/\/     A VALID MS3 URL BELOW<br \/>\n\/\/ SEE IOS APP TUTORIAL AT http:\/\/www.expressplay.com\/developer<\/code><\/code>NSString *CONTENT_URL = REPLACE_ME_WITH_A_VALID_URL;<br \/>\nNSURL* url = [NSURL URLWithString:CONTENT_URL];<\/p>\n<p><code><code><\/code><\/code>\/\/ create a player controller or reuse one if we already have one<\/p>\n<p><code><code><\/code><\/code>\/\/ *********** IMPORTANT ************<br \/>\n\/\/ MAKE SURE the type is set to WSB_PPMST_HLS if the content is HLS or WSB_PPMST_DASH if the content is DASH<\/p>\n<p><code><code><\/code><\/code>player = [[EXP_MoviePlayerController alloc] initWithProtectedContentURL: url type: WSB_PPMST_HLS];<br \/>\nCGRect bounds = self.view.bounds;<br \/>\n[player.view setFrame: bounds];<br \/>\nplayer.controlStyle = MPMovieControlStyleFullscreen;<br \/>\n[player setFullscreen:YES animated:YES];<br \/>\n[self.view addSubview:player.view];<br \/>\n[[NSNotificationCenter defaultCenter] addObserver:self<br \/>\nselector:@selector(moviePlayerNotification:)<br \/>\nname:MPMoviePlayerPlaybackDidFinishNotification<br \/>\nobject:player];<\/p>\n<p><code><code><\/code><\/code>\/\/ start playing<br \/>\n[player play];<br \/>\n}<\/p>\n<\/div>\n<p>The code block above calls the <span style=\"font-family: \u201ccourier\u201d;\">EXP_MoviePlayerController<\/span> function found in the <i>ExpressPlayIOS.mm<\/i> file. This function acts as a wrapper that integrates ExpressPlay with the native media player provided by Apple.<\/p>\n<hr \/>\n<div class=\"tutorial_step clearfix\">\n<p>STEP 7 &#8211; Halting the Media Player<\/p>\n<\/div>\n<p><span style=\"font-size: 15px;\">As a result of wrapping the native Apple Media Player, the user is presented with a Done button during playback. Currently the application has no way to handle the eventuality of that button being pressed. To add this function, a notifications handling function must be created. The code block below contains that function and can be copied and pasted into your application&#8217;s <\/span><em>ViewController.m<\/em><span style=\"font-size: 15px;\"> file.<\/span><\/p>\n<div class=\"bg-grey-100 p-8 mt-12 mb-12\"><code><code>- (void)moviePlayerNotification:(NSNotification *)notification<br \/>\n{<br \/>\nif (!player || [notification name] != MPMoviePlayerPlaybackDidFinishNotification) {<br \/>\nreturn;<br \/>\n}<\/code><\/code>\/\/ we get here if the &#8216;Done&#8217; button has been pressed, or the video has ended<br \/>\n[player stop];<br \/>\n[player.view removeFromSuperview];<br \/>\n[[NSNotificationCenter defaultCenter] removeObserver:self];<br \/>\nplayer = nil;<\/p>\n<p><code><code><\/code><\/code>}<\/p>\n<\/div>\n<p><span style=\"font-size: 15px;\">When the player runs, it is now possible to exit the media player by clicking the Done button in the upper left corner.<\/span><\/p>\n<hr \/>\n<div class=\"tutorial_step clearfix\">\n<p>STEP 8 &#8211; Inputing Playable Content<\/p>\n<\/div>\n<p><span style=\"font-size: 15px;\">Next, insert a valid MS3 token URL into the content string, reproduced below, found in the <\/span><em>ViewController.m<\/em><span style=\"font-size: 15px;\"> file.<\/span><\/p>\n<div class=\"bg-grey-100 p-8 mt-12 mb-12\"><code>NSString *CONTENT_URL = REPLACE_ME_WITH_VALID_URL;<br \/>\nNSURL* url = [NSURL URLWithString:CONTENT_URL];<br \/>\n<\/code><\/div>\n<p>As the above code block indicates the application will not function in this state. For a working application replace the constant <span style=\"font-family: courier;\">REPLACE_ME_WITH_A_VALID_URL<\/span> with a MS3 Token URL. The MS3 Token URL is a compound-content URL that contains both the Content URL and a XML token in the same string.<\/p>\n<p>If you do not have packaged content to play, you can retrieve a MS3 compound-content test token URL <a href=\"http:\/\/testtokens.expressplay.com\/fluff\/api\/token\/test\/ms3\/bigbuckbunnyhls\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">here.<\/a> This url will only work with the ExpressPlay Test SDK. If you are using the production SDK, then you need to create your own MS3 token URL using your production authenticator key (see the <a href=\"\/developers\/tutorial-storefront-hookup\">Storefront Hookup tutorial<\/a>).<\/p>\n<hr \/>\n<div class=\"tutorial_step clearfix\">\n<p>STEP 9 &#8211; Run Your Application<\/p>\n<\/div>\n<p><span style=\"font-size: 15px;\">Your project is now ready to run. The video should play on your iOS device.<\/span><\/p>\n<p><img decoding=\"async\" style=\"margin: 20px 0; border: 1px solid #e7e7e7;\" src=\"\/wp-content\/uploads\/2017\/08\/tutorial-ios14.png\" alt=\"\" \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>iOS App Tutorial This tutorial guides you through the process of downloading the tools required to create a functional barebones iOS ExpressPlay enabled media application. At the end of this tutorial you will know how to stream content with a MS3 Token, while utilizing the ExpressPlay SDK. Requirements An iOS Device with the current version [&hellip;]<\/p>\n","protected":false},"author":124,"featured_media":0,"parent":10924,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-expressplay-developer.php","meta":{"_acf_changed":false,"footnotes":""},"tax_page_type":[512],"coauthors":[621],"class_list":["post-11095","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.expressplay.com\/ko\/wp-json\/wp\/v2\/pages\/11095","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.expressplay.com\/ko\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.expressplay.com\/ko\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.expressplay.com\/ko\/wp-json\/wp\/v2\/users\/124"}],"replies":[{"embeddable":true,"href":"https:\/\/www.expressplay.com\/ko\/wp-json\/wp\/v2\/comments?post=11095"}],"version-history":[{"count":0,"href":"https:\/\/www.expressplay.com\/ko\/wp-json\/wp\/v2\/pages\/11095\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/www.expressplay.com\/ko\/wp-json\/wp\/v2\/pages\/10924"}],"wp:attachment":[{"href":"https:\/\/www.expressplay.com\/ko\/wp-json\/wp\/v2\/media?parent=11095"}],"wp:term":[{"taxonomy":"tax_page_type","embeddable":true,"href":"https:\/\/www.expressplay.com\/ko\/wp-json\/wp\/v2\/tax_page_type?post=11095"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.expressplay.com\/ko\/wp-json\/wp\/v2\/coauthors?post=11095"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}