Video Management within Eclipse CMS

Integrating the Video Platform Kaltura to a CMS Client - Part 2

       

The Integration

So, the main idea of the integration allows users to stay within their familiar workbench, the CMS itself, and treat videos like any other Sophora document, even though they are actually stored in the external Kaltura instance. It is not important for the user that an additional application manages the video data in the background.

The new procedure for the editorial journalist simply consists of the following steps. First, a new Sophora video document is created with the help of a wizard (see figure 1) as known from Eclipse by clicking File → New in the main menu. In this wizard, the user can select an existing video asset from the Kaltura server, which then will be linked with a new document within Sophora. As soon as the user clicks on one of the listed video entries, it will be displayed in the preview part together with corresponding meta-information (duration, format, Kaltura entry ID and the like).

Figure 1: Wizard to create new video documents.

After clicking the finish button, the new Sophora document automatically opens in the editor (see figure 2). Some fields are already filled with data obtained from the Kaltura server while others are empty and thus can be completed by the user. The connection between the Sophora document and the video asset is guaranteed by a unique identifier, the Kaltura entry ID. This ID is set automatically (and cannot be modified) in the Sophora document upon creation.

Figure 2: Video document opened for editing in document editor

Now the video is ready for further usage and can be included in other Sophora documents by drag and drop. An example can be seen in figure 3 where a Sophora video document is inserted in the text body of an article. The result is immediately visible within the preview on the right-hand side of the window.

Figure 3: Exemplary usage of a video document within an article. The result can be seen in the preview on the right-hand side.

If the desired video is not yet available on the Kaltura server, the user can initially up-load it from the local hard-drive. While uploading, a video will automatically be converted into previously configured profiles, so-called “flavors” (for instance standard, mobile or HD). In addition, a thumbnail image is generated from the video data. When creating a new Sophora document from an existing Kaltura source this thumbnail is copied from Kaltura to Sophora.

The exemplary video, shown in the subsequent figures, is taken from the “Big Buck Bunny“ movie of the Blender Foundation due to its free availability on the web.

The Implementation

When considering existing Kaltura plug-ins for systems such as Drupal, Joomla or Wordpress, you will recognize that the integration on the client side is based on the Adobe Flash widgets provided by Kaltura. Within a Java / RCP application, such as the Sophora DeskClient, it is recommendable to choose a different approach since the usage of Flash widgets is not user friendly. Hence, the choice falls on using the web-services of the Kaltura platform directly, which can be accessed by a Java client library.

The functionality to connect to a Kaltura server has been encapsulated in a distinct Eclipse plug-in that provides a wizard to create a new Sophora video document as well as an upload dialog for new videos. Both are integrated into the DeskClient via an extension point.

Document Creation Wizard

On the left-hand side of the wizard (see figure 1), a list of all videos is displayed that are available on the Kaltura server. For the illustration of this list, a JFace TableViewer, which retrieves the content to be shown directly from the Kaltura platform, is used. In order to fetch the available videos by calling the corresponding service, the KalturaMediaService in this case, a connection has to be established first. Therefore, the usual connection details including user name, password and service URL are required. This information has to be supplied in advance by the user within a Preferences page.

The actual connection to the Kaltura server is embodied by the KalturaConnection class, which encapsulates the KalturaClient object of the Java client library. Basically a KalturaClient object is then used to access the web-services of the video platform.

The method getAllVideos() of the KalturaConnection object has to be called to retrieve the available videos from the server. As shown in listing 1, the KalturaMediaService is used to return a list of entries that are of the type KalturaMediaType.Video. These entries are passed to the TableViewer and are finally displayed in the wizard's list.

Listing 1

 

private final KalturaClient client;

KalturaConnection(KalturaClient client) {
  this.client = client;
}

public List<KalturaMediaEntry> getAllVideos() throws KalturaException {
  try {
    /* get media service from KalturaClient */
    KalturaMediaService mediaService = client.getMediaService();
        
    /* create a filter and a pager to choose how many entries and which type to receive */
    KalturaMediaEntryFilter filter = new KalturaMediaEntryFilter();
    filter.mediaTypeEqual = KalturaMediaType.VIDEO;
    KalturaFilterPager pager = new KalturaFilterPager();
    pager.pageSize = MAX_PAGESIZE;

    /* execute list action of the mediaService object to get the list of entries */
    KalturaMediaListResponse listResponse = mediaService.list(filter, pager);
    mediaService.list(filter);
    return listResponse.objects;
  } catch (KalturaApiException e) {
    throw new KalturaException(e);
  }
}

 

Preview Video Player

">When you select an entry from the list of available videos within the wizard, the corresponding video immediately starts playing in the preview video player which is positioned to the right of the said list. The player is one of the Kaltura widgets (Kaltura Dynamic Player) that is integrated into the DeskClient. Since the player is a Flash widget the SWT browser component is applied here. The browser component receives a local HTML file to display, which utilizes the Flash player as an SWFObject.

The control of the player is done by JavaScript methods within the HTML that can then be called from Java methods of the DeskClient. The HTML file and the required JavaScript libraries are also contained in the DeskClient plug-in.

Listing 2 depicts the (shortened) content of the HTML file that the player embeds in the DIV element with the ID kdp3 by calling swfobject.embedSWF(). As seen in this code snippet, the Flash object is located on the Kaltura server and is accessed by a HTTP URL. This URL contains several parameters, such as wid and uiconf_idwhich control the player's configuration. 

For instance, you can change the player's appearance and offered controls with the parameter uiconf_id. The JavaScript function changeMedia() may be called to play the video with the matching Kaltura entry ID. Within this JavaScript function the sendNotification() method is used to send out a changeMedia event. Besides the type of the event, the ID of the video to be displayed is passed on.

Listing 2 - player_embed.html

 

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="swfobject.js"></script>
    <script type="text/javascript">
      function changeMedia(id) {
        $('#kdp3').get(0).sendNotification('changeMedia', {entryId:id});
      }
    </script>
    <script type="text/javascript">
      [...]             
  swfobject.embedSWF("http://medianac.nacamar.de/index.php/kwidget/wid/_123/uiconf_id/1234567", "kdp3", ...);
    </script>
  </head>
  <body>
    <div id="kdp3" />
  </body>
</html>

 

In order to finally integrate the player into the wizard the class PlayerWidget is employed (see listing 3). There, the SWT browser component is instantiated and the method setUrl() receives the HTML file from listing 2. To detect the path of the said HTML file, the Eclipse class FileLocator is used and the URL is prepended with the keyword platform: (platform: needs keyphrase – if the colon is extra, keyword stays) so that the workspace of the DeskClient is searched for this particular HTML file. To assure that the HTML file, as well as the required JavaScript libraries, which are embedded in the HTML code via script elements, are reliably detected by this mechanism, the plug-in must not be added to the product in form of an JAR archive. Instead it must be added as an unpacked folder.

By instantiating an object of class PlayerWidget, an empty video player is generated initially. This video player does not play any video until the method changeMedia() is called. This method forwards the request via the execute() method of the SWT Browser object to the same named JavaScript function and passes the Kaltura entry ID of the video to be played. The changeMedia() method of the PlayerWidget class is notified by each individual selection of an entry within the wizard's list of available videos and thereby triggers the playback of the according video.

In general, when integrating Flash objects into an Eclipse RCP application, you have to be aware that the SWT browser component invokes the system browser (which is the Internet Explorer in Windows). Thus, to display Flash content the according Flash plug-in for the system browser is required.

Listing 3 - PlayerWidget

/* Widget which displays a Flash based video player within a Browser component. */
public class PlayerWidget {
        
  private Browser browser;

  public PlayerWidget(Composite parent) {
    browser = new Browser(parent, SWT.NONE);
    String urlString = StringUtils.EMPTY;
    try {
      URL url = new URL("platform:/plugin/com.subshell.sophora.eclipse.kaltura/etc/player_embed.html");
      urlString = FileLocator.toFileURL(url).toURI().toString();
    } catch(IOException e) {
      // Exception Handling ...
}
    browser.setUrl(urlString);
  }
        
  /* Play media with passed id. An invalid ID will lead to a javascript error. */
  public void changeMedia(String entryId) {
    browser.execute("changeMedia('" + entryId  + "');");
  }
}

 

 

Upload Dialog

In addition to the wizard for creating new Sophora video documents, there is another dialog to upload video files to the Kaltura server. When you have opened this dialog, which is accessible in the same way as the New wizard in the main menu, you can provide a name and select a local file. After confirmation of the dialog (by clicking on Ok), a connection to the Kaltura platform is established in the background and the file is then transmitted. For this, the method addNewMediaEntry() of the KalturaConnection  class is invoked which accesses the KalturaBaseEntryService (compare to listing 4).

At first, the binary data of the new video is transferred and then an entry will be added to the Kaltura system later. With the help of the addFromUploadedFile() method, the new entry is connected with the previously saved video data. The upload of a new video file and the creation of a new entry might be a time consuming operation, depending upon the size of the video. Besides transmitting the binary data, the upload automatically triggers additional processes that convert the uploaded video into different formats. To avoid that the UI is blocked in the meantime, this operation is run in the background of the DeskClient. As soon as this background task is finished, the uploaded video will be available within the list of all videos of the New wizard.

Listing 4 - KalturaConnection (Continuation)

 

public void addNewMediaEntry(File videoFile, String entryName) throws KalturaException {
  try {
    /* get base entry service from KalturaClient */
    KalturaBaseEntryService baseEntryService = client.getBaseEntryService();
                        
    /* upload new file and get a token that identifies it */
    String token = baseEntryService.upload(videoFile);

    /* create a new entry */
    KalturaBaseEntry entry = new KalturaBaseEntry();
    entry.name = entryName;
    entry.type = KalturaEntryType.MEDIA_CLIP;

/* attach uploaded file to newly created entry */
    baseEntryService.addFromUploadedFile(entry, token);
  } catch (KalturaApiException e) {
    throw new KalturaException(e);
  }
}

 

Displaying Videos on the Website

Since the play-out of content in Sophora is implemented with JSP templates, a corresponding template is required. This template is equipped with similar mechanisms as the HTML file used for the preview player in the DeskClient's wizard. A SWFObject embeds the video player and receives the Kaltura entry ID as a parameter. The template receives this ID from the Sophora document that has to be played out. Additional parameters for the size, the height and the preferred configuration of the video allow altering of the video player's appearance.

Conclusion: Added Value by the Connection of two Systems

The interaction of both systems, Sophora and Kaltura, offers sensible benefits on every side. As described, the connection facilitates users to integrate videos in websites easily without leaving the familiar environment of the used CMS. In the background the system benefits from valuable functions of the video platform, such as streaming, the video player widget, or the automated format conversion.

This solution has many options for future extensions. Possible variants might be the design of an online video platform within the CMS or the upload of videos as user generated content via the website.

From a technical point of view, the connection of the Kaltura platform with the Sophora CMS proceeded straight forward and without serious obstacles. The Java library provides an easy access to the platform's functionality.

Sven Hoffman
Sven Hoffman

What do you think?

JAX Magazine - 2014 - 03 Exclucively for iPad users JAX Magazine on Android

Comments

Latest opinions