Chooser JavaScript Client


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.


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=""></script>


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:
  • 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: '',
      mode: 'popup'

Example 2: Initialize the Chooser to open in an iframe

var chooser = mediacore.chooser.init({
      url: '',
      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.


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=""></script>
<script type="text/javascript">
// <![CDATA[

   // Chooser initialization
   var chooser = mediacore.chooser.init({
         url: '',
         mode: 'popup'

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

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

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

// ]]>

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 = '';

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

Expected LTI query parameters


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



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+.