{"id":11097,"date":"2017-09-10T02:11:33","date_gmt":"2017-09-10T02:11:33","guid":{"rendered":"https:\/\/expressplay.local\/?page_id=11097"},"modified":"2021-07-09T08:45:16","modified_gmt":"2021-07-09T15:45:16","slug":"tutorial-ios-app-bb","status":"publish","type":"page","link":"https:\/\/www.expressplay.com\/ko\/developer\/tutorial-ios-app-bb\/","title":{"rendered":"Tutorial: iOS App (Using BB)"},"content":{"rendered":"<style type=\"text\/css\">\n<p>    hr, img {\n        margin: 20px auto;\n    }<\/p>\n<p>    code {\n        word-break: break-all;\n        white-space: pre-wrap;\n        font-size: 14px;\n        color: #555;\n        margin: 20px 0;\n    }\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 (Using BB Token)<\/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 BB Token, while utilizing the ExpressPlay SDK.<\/h4>\n<div class=\"box20 rounded top30\">\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\">\n      <img decoding=\"async\" src=\"\/wp-content\/uploads\/2017\/08\/developer-sdk-large.png\" alt=\"\"\/>\n<\/div>\n<\/div>\n<hr \/>\n<div class=\"mb-12 mt-12\">\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 target=\"_blank\" href=\"https:\/\/developer.apple.com\/xcode\/\" rel=\"noopener noreferrer nofollow\">here.<\/a><\/p>\n<hr \/>\n<div class=\"mb-12 mt-12\">\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\" target=\"_blank\" href=\"https:\/\/admin.expressplay.com\/sdk\/\" rel=\"noopener noreferrer nofollow\">ExpressPlay Admin Portal<\/a>.<\/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=\"mb-12 mt-12\">\n<p>STEP 3 &#8211; Reference the ExpressPlay SDK<\/p>\n<\/p><\/div>\n<p>Create a new project in Xcode.<\/p>\n<p>      <img decoding=\"async\" src=\"\/wp-content\/uploads\/2017\/08\/tutorial-ios-bb1.png\" alt=\"\" style=\"margin: 20px 0; border: 1px solid #e7e7e7;\" \/><\/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\" src=\"\/wp-content\/uploads\/2017\/08\/tutorial-ios-bb2.png\" alt=\"\" style=\"margin: 20px 0; border: 1px solid #e7e7e7;\" \/><\/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\" src=\"\/wp-content\/uploads\/2017\/08\/tutorial-ios-bb3.png\" alt=\"\" style=\"margin: 20px 0; border: 1px solid #e7e7e7;\" \/><\/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\" src=\"\/wp-content\/uploads\/2017\/08\/tutorial-ios-bb4.png\" alt=\"\" style=\"margin: 20px 0; border: 1px solid #e7e7e7;\" \/><\/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\" src=\"\/wp-content\/uploads\/2017\/08\/tutorial-ios-bb5.png\" alt=\"\" style=\"margin: 20px 0; border: 1px solid #e7e7e7;\" \/><\/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\" src=\"\/wp-content\/uploads\/2017\/08\/tutorial-ios-bb6.png\" alt=\"\" style=\"margin: 20px 0; border: 1px solid #e7e7e7;\" \/><\/p>\n<p>Now add two critical helper files: ExpressPlayIOS.h and ExpressPlayIOS.mm. These files can be found in the ExpressPlaySDK &gt; Example &gt; ExpressPlayExample directory. They contain several functions that perform basic Wasabi operations. One function is particularly important for the Broadband license : WSB_Runtime_ProcessServiceToken. This API takes one parameter &#8212; a string that contains a BB action token. It processes the token, opens the license store and stores the obtained license in the store.<\/p>\n<p>Copy both files into your project directory.<\/p>\n<p>      <img decoding=\"async\" src=\"\/wp-content\/uploads\/2017\/08\/tutorial-ios-bb7.png\" alt=\"\" style=\"margin: 20px 0; border: 1px solid #e7e7e7;\" \/><\/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\" src=\"\/wp-content\/uploads\/2017\/08\/tutorial-ios-bb8.png\" alt=\"\" style=\"margin: 20px 0; border: 1px solid #e7e7e7;\" \/><\/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\" src=\"\/wp-content\/uploads\/2017\/08\/tutorial-ios-bb9.png\" alt=\"\" style=\"margin: 20px 0; border: 1px solid #e7e7e7;\" \/><\/p>\n<p><span style=\"font-size:15px\">Both files should appear in the project navigator.<\/span><\/p>\n<p>      <img decoding=\"async\" src=\"\/wp-content\/uploads\/2017\/08\/tutorial-ios-bb10.png\" alt=\"\" style=\"margin: 20px 0; border: 1px solid #e7e7e7;\" \/><\/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\" src=\"\/wp-content\/uploads\/2017\/08\/tutorial-ios-bb11.png\" alt=\"\" style=\"margin: 20px 0; border: 1px solid #e7e7e7;\" \/><\/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=\"mb-12 mt-12\">\n<p>STEP 4 &#8211; Importing Dependencies and Initializing Variables<\/p>\n<\/p><\/div>\n<p>Four files must be imported to your project&#8217;s <i>ViewController.m<\/i> 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 <font face=\"\u201ccourier\u201d\">#import \u201cViewController.h\u201d<\/font> line. The new block includes <font face=\"\u201ccourier\u201d\">#import &#8220;ViewController.h\u201d<\/font> .<\/p>\n<div class=\"bg-grey-100 p-8 mb-12 mt-12\">\n          <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>\n        <\/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 <i>ViewController.m&#8217;s<\/i> <font face=\"\u201ccourier\u201d\">@interface ViewController<\/font> function.\n        <\/p>\n<div class=\"bg-grey-100 p-8 mb-12 mt-12\">\n          <code>{<br \/>\n    EXP_MoviePlayerController*          player;<br \/>\n    UIAlertView*                        alertView;<br \/>\n}<\/code>\n        <\/div>\n<hr \/>\n<div class=\"mb-12 mt-12\">\n<p>STEP 5 &#8211; Initialization<\/p>\n<\/p><\/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 second purpose of EXP_Initialize is to acquire a Broadband license and store it in the application license store. Upon successful personalization the BB license is obtained in WSB_Runtime_ProcessServiceToken by processing a BB action token. STEP 8 of this tutorial decsribes how to produce the action token.<\/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> <font face=\"\u201ccourier\u201d\">viewDidLoad<\/font> function beneath the line &#8220;<font face=\"\u201ccourier\u201d\">[super viewDidLoad];<\/font>&#8220;.<\/p>\n<div class=\"bg-grey-100 p-8 mb-12 mt-12\">\n        <code>     \/\/ initialize our variables<br \/>\n    alertView = nil;<br \/>\n    player    = nil;<\/p>\n<p>    \/\/ ensure that we're properly initialized and personalized<br \/>\n    WSB_Result initialization_status = EXP_Initialize(^(WSB_Result result) {<br \/>\n        if (alertView) {<br \/>\n            [alertView dismissWithClickedButtonIndex:-1 animated:YES];<br \/>\n            alertView = nil;<br \/>\n        }<br \/>\n        [self readyToPlay];<br \/>\n    });<br \/>\n    if (initialization_status == EXP_INIT_ASYNC){<br \/>\n        \/\/ show a message to indicate we are personalizing now (this will be dismissed from the callback)<br \/>\n        alertView = [[UIAlertView alloc] initWithTitle:@\"Personalizing\" message:@\"Please wait\" delegate:self cancelButtonTitle:nil otherButtonTitles: nil];<br \/>\n        [alertView show];<\/p>\n<p>        UIActivityIndicatorView *indicator = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleWhiteLarge];<br \/>\n        indicator.center = CGPointMake(alertView.bounds.size.width \/ 2, alertView.bounds.size.height - 50);<br \/>\n        [indicator startAnimating];<br \/>\n        [alertView addSubview:indicator];<\/p>\n<p>    }<br \/>\n    else {<br \/>\n        [self readyToPlay];<br \/>\n    }<\/code>\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=\"mb-12 mt-12\">\n<p>STEP 6 &#8211; Implementing the Media Player<\/p>\n<\/p><\/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 <font face=\"\u201ccourier\u201d\">readyToPlay<\/font>.<\/p>\n<div class=\"bg-grey-100 p-8 mb-12 mt-12\">\n        <code>- (void)readyToPlay<br \/>\n{<br \/>\n    \/\/ *********** IMPORTANT ************<br \/>\n    \/\/ THIS APP WILL NOT WORK WITHOUT:<br \/>\n    \/\/     1) A VALID CONTENT URL BELOW<br \/>\n    \/\/     2) A VALID ACTION TOKEN. THE TOKEN MUST BE SAVED AS \"action_token.xml\" AND DROPED<br \/>\n    \/\/        TO THE PROJECT \"Supporting Files\" DIRECTORY<br \/>\n    \/\/ SEE IOS APP TUTORIAL AT http:\/\/www.expressplay.com\/developer<\/p>\n<p>    NSString *CONTENT_URL = REPLACE_ME_WITH_A_VALID_URL;<br \/>\n    NSURL* url = [NSURL URLWithString:CONTENT_URL];<\/p>\n<p>    \/\/ create a player controller or reuse one if we already have one<br \/>\n    WSB_PlaylistProxy_MediaSourceParams source_params;<br \/>\n    memset(&source_params, 0, sizeof(source_params));<\/p>\n<p>    \/\/************ Multiple audio tracks setting ***********<br \/>\n    \/\/ If your content has multiple audio tracks (for example multiple languages) you may select one here:<br \/>\n    \/\/ source_params.language = \"es\";<\/p>\n<p>    \/\/ *********** 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<br \/>\n    player = [[EXP_MoviePlayerController alloc] initWithProtectedContentURL:url type:WSB_PPMST_DASH params:&source_params];<\/p>\n<p>    CGRect bounds = self.view.bounds;<br \/>\n    [player.view setFrame: bounds];<br \/>\n    player.controlStyle = MPMovieControlStyleFullscreen;<br \/>\n    [player setFullscreen:YES animated:YES];<br \/>\n    [self.view addSubview:player.view];<br \/>\n    [[NSNotificationCenter defaultCenter] addObserver:self<br \/>\n                                             selector:@selector(moviePlayerNotification:)<br \/>\n                                                 name:MPMoviePlayerPlaybackDidFinishNotification<br \/>\n                                               object:player];<\/p>\n<p>    \/\/ start playing<br \/>\n    [player play];<br \/>\n}<\/code>\n      <\/div>\n<p>The code block above calls the <font face=\"\u201ccourier\u201d\">EXP_MoviePlayerController<\/font> 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=\"mb-12 mt-12\">\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 mb-12 mt-12\">\n        <code>- (void)moviePlayerNotification:(NSNotification *)notification<br \/>\n{<br \/>\n  if (!player || [notification name] != MPMoviePlayerPlaybackDidFinishNotification) {<br \/>\n        return;<br \/>\n    }<\/p>\n<p>    \/\/ we get here if the 'Done' 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 \/>\n    player = nil;<\/p>\n<p>}<\/code>\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=\"mb-12 mt-12\">\n<p>STEP 8 &#8211; Inputing Playable Content<\/p>\n<\/p><\/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 mb-12 mt-12\">\n        <code>NSString *CONTENT_URL = REPLACE_ME_WITH_VALID_URL;<br \/>\n    NSURL* url = [NSURL URLWithString:CONTENT_URL];<br \/>\n<\/code>\n      <\/div>\n<p>As the above code block indicates the application will not function in this state. For a working application replace the constant <font face=\"courier\">REPLACE_ME_WITH_A_VALID_URL<\/font> with a Content URL. If you do not have packaged content to play, you can copy the following test Content URL into your code &#8211; <\/p>\n<div class=\"bg-grey-100 p-8 mb-12 mt-12\">\n<p>        <code>https:\/\/www.expressplay.com\/ep\/video\/HLSBBB\/master.m3u8<\/code>\n      <\/div>\n<p> This is a HLS URL, upon retrieval of a valid action token it is passed into the <font face=\"courier\"> EXP_MoviePlayerController<\/font> object and the media player streams the content.  The URL is encrypted with a key that is necessary to convert an action token, retrieved in the next step, into a license that protects the content. <\/p>\n<p>This URL will only work with the ExpressPlay Test SDK. If you are using the production SDK, then you need to create your own Content URL using your production authenticator key (see the <a href=\"\/developers\/tutorial-storefront-hookup\">Storefront Hookup tutorial<\/a>).<\/p>\n<p> Next, create an action token and copy it into the <b>Supporting Files<\/b> directory in Xcode. Upon playback the ExpressPlay SDK will recognize that the Content URL is content only and will search in the <b> Supporting Files<\/b> directory for a file called <i>action_token.xml<\/i>. Create a valid action token by clicking on the link <a href=\"http:\/\/testtokens.expressplay.com\/fluff\/api\/token\/test\/bb\/bigbuckbunnyhls\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">here<\/a>, and saving the generated file as <i>action_token.xml<\/i>. Then drop the file into the <b>Supporting Files<\/b> directory. <\/p>\n<p>      <img decoding=\"async\" src=\"\/wp-content\/uploads\/2017\/08\/tutorial-ios-bb12.png\" alt=\"\" style=\"margin: 20px 0; border: 1px solid #e7e7e7;\" \/><\/p>\n<hr \/>\n<div class=\"mb-12 mt-12\">\n<p>STEP 9 &#8211; Run Your Application<\/p>\n<\/p><\/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\" src=\"\/wp-content\/uploads\/2017\/08\/tutorial-ios14.png\" alt=\"\" style=\"margin: 20px 0; border: 1px solid #e7e7e7;\" \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>iOS App Tutorial (Using BB Token) 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 BB Token, while utilizing the ExpressPlay SDK. Requirements An iOS Device with [&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-11097","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.expressplay.com\/ko\/wp-json\/wp\/v2\/pages\/11097","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=11097"}],"version-history":[{"count":0,"href":"https:\/\/www.expressplay.com\/ko\/wp-json\/wp\/v2\/pages\/11097\/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=11097"}],"wp:term":[{"taxonomy":"tax_page_type","embeddable":true,"href":"https:\/\/www.expressplay.com\/ko\/wp-json\/wp\/v2\/tax_page_type?post=11097"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.expressplay.com\/ko\/wp-json\/wp\/v2\/coauthors?post=11097"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}