Chooser JavaScript Client

Note

Warning: This feature is under active development and the current API is not stable.

The MediaCore Chooser is the fastest way to integrate MediaCore into your web app. It’s a lightweight JavaScript client library that allows you to embed media from your MediaCore site into your web app, or to upload media from your web app into your MediaCore site.

Setup

The first step to add the MediaCore Chooser to your web app is to insert the following HTML code/JavaScript snippet into the <head> section of your web page.

<script type="text/javascript" src="https://your.mediacoresite.tv/api/chooser.js"></script>

Note

By default the Chooser will accept requests from any domain name. You can restrict which domain names the Chooser will launch from through the settings interface of your MediaCore site’s admin area.

Initialize the Chooser

Next, initialize the MediaCore Chooser by calling the following JavaScript function:

var chooser = mediacore.chooser.init(params);

You can configure the Chooser with the params object passed to init(). See the following list of accepted parameters:

  • url – The fully qualified URL to your MediaCore site’s chooser, example: https://demo.mediacore.tv/chooser
  • mode – Must be set to either popup (default) or iframe. popup opens the Chooser in a new browser window. iframe places the Chooser in an iframe as the last child of the current document’s body element.
  • iframeTarget (optional) – If the mode parameter is set to iframe, then this adds the Chooser iframe as the last child of the specified element

Example 1: Initialize the Chooser to open in a new window

var chooser = mediacore.chooser.init({
      url: 'https://demo.mediacore.tv/chooser',
      mode: 'popup'
   });

Example 2: Initialize the Chooser to open in an iframe

var chooser = mediacore.chooser.init({
      url: 'https://demo.mediacore.tv/chooser',
      mode: 'iframe',
      iframeTarget: document.getElementById('my-iframe-wrapper-element')
   });

Third, attach the following event listeners where you will add any custom logic for handling the Chooser’s “add media” action and any errors that may result.

chooser.on('media', function(media) {
      /**
       * This function will be passed a media object that contains
       * the following properties:
       *
       *    id          - the unique id
       *    title       - the title
       *    description - the description
       *    embed_url   - the fully qualified embed URL
       *    public_url  - the fully qualified public URL
       *    thumb_url   - the fully qualified thumbnail URL
       */
   });

chooser.on('error', function(error) {
      // handle the error here
   });

Finally, open the Chooser by calling the following function.

chooser.open()

Note

The open() function triggers a Chooser pop-up window and should be called as the result of a user-triggered event handler such as a tap or click event. The call to open() would typically be placed inside a button’s onClick event handler.

Sample code

<script type="text/javascript" src="https://your.mediacoresite.tv/api/chooser.js"></script>
<script type="text/javascript">
// <![CDATA[

   // Chooser initialization
   var chooser = mediacore.chooser.init({
         url: 'https://your.mediacoresite.tv/chooser',
         mode: 'popup'
      });

   // Chooser event listeners
   chooser.on('media', function(media) {
         alert('The media title is: ' + media.title);
      });

   chooser.on('error', function(e) {
         alert(e.name + ": " + e.message);
      });

   // Custom button event listener
   var myButton = document.getElementById('my-button-input-element');
   myButton.addEventListener('click', function(event) {
      chooser.open();
   });

// ]]>
</script>

Support for Learning Tools Interoperability (LTI)

The Chooser has support for LTI tool consumers, typically called from within a Learning Management System (LMS). In order to integrate your LTI consumer web app with the MediaCore Chooser, you’ll need to generate a signed url with the required LTI Basic Launch parameters (and one custom one). See the list below for the required LTI Basic Launch parameters

Example 3: Initialize the Chooser to open in a new window using LTI

var url = 'http://your.mediacore.tv/chooser?oauth_version=1.0&oauth_nonce=1244834250435893000&oauth_timestamp=1244834250&oauth_consumer_key=b289378-f88d-2929-lmsng.school.edu%2Fmoodle&context_id=8&context_label=Biology&context_title=Molecular+Evolution&ext_lms=moodle-2&lis_person_name_family=Loblaw&lis_person_name_full=Bob+Loblaw&lis_person_name_given=Bob&lis_person_contact_email_primary=bob%40loblaw.com&lti_message_type=basic-lti-launch-request&lti_version=LTI-1p0&roles=Instructor%2Curn%3Alti%3Asysrole%3Aims%2Flis%2FAdministrator&tool_consumer_info_product_family_code=moodle&tool_consumer_info_version=2012120303.1&user_id=2&oauth_signature_method=HMAC-SHA1&oauth_signature=Xddn2A%2BjzwjgBIVYkvigaKxCdcc%3D';

var chooser = mediacore.chooser.init({
      url: url,
      mode: 'popup'
   });

Expected LTI query parameters

Note

See this page for a detailed explanation of each parameter. See this page for a description of the oauth_ parameters.

context_id
context_label
context_title
ext_lms
lis_person_contact_email_primary
lis_person_name_family
lis_person_name_full
lis_person_name_given
lti_message_type
lti_version
oauth_consumer_key
oauth_nonce
oauth_signature
oauth_signature_method
oauth_timestamp
oauth_version
roles
tool_consumer_info_product_family_code
tool_consumer_info_version
user_id

Note

In LTI integrations, every query parameter passed to the tool provider must be signed.

Supported browsers

All modern web browsers are supported including Internet Explorer 8+.