(Old) API for Flex Developers

From Livestream » User Guide

(Difference between revisions)
Jump to: navigation, search
(Brightcove integration)
 
Line 188: Line 188:
==== Homepage Player ====
==== Homepage Player ====
The [http://cdn.livestream.com/chromelessPlayer/examples/homepagePlayer.html Livestream.com homepage player] was built using this API, and features simple customized overlay controls and exposes javascript functions to be able to switch between channels. It also displays updating thumbnails of the stream when not playing the content. The full source is available [http://cdn.livestream.com/chromelessPlayer/livestream-api.zip here].
The [http://cdn.livestream.com/chromelessPlayer/examples/homepagePlayer.html Livestream.com homepage player] was built using this API, and features simple customized overlay controls and exposes javascript functions to be able to switch between channels. It also displays updating thumbnails of the stream when not playing the content. The full source is available [http://cdn.livestream.com/chromelessPlayer/livestream-api.zip here].
-
 
-
==== Brightcove integration ====
 
-
Our [http://cdn.livestream.com/chromelessPlayer/examples/brightcoveDemo.html Brightcove integration] is an example of how to integrate with a third-party solution using the Flex API. It has updating thumbnails, overlay play, pause and mute buttons and it interacts with the controls in the Brightcove interface. The full source is available [http://cdn.livestream.com/chromelessPlayer/livestream-api.zip here].
 
-
 
-
[[File:Image-screenshot-brightcove_player.jpg|link=Brightcove_Integration]]
 
-
 
=== Using the thumbnail API ===
=== Using the thumbnail API ===

Current revision as of 18:47, 1 June 2012

Livestream provides an API for Flex developers who want to integrate the player into their own Flex project. The component to load in your Flex application is a regular Flex module with which you can interact using various functions and by listening to events. The module is hosted on our servers and is available at this URL:

http://cdn.livestream.com/chromelessPlayer/v12/ChromelessPlayer.swf

Please note that since this swf is a Flex module, it will not actually do anything if you load it in the browser directly.


Contents

Prerequisites


In order to be able to use any of the player API's, you need to get a developer key. Once you have obtained it you have it to pass it to the API module as a first thing before you try to connect to a channel. For Flash and Flex, use the devKey property or the setDevKey() function in the HTML scenario.

You will want to pass your developer key to the player before you set the channel so that it has knowledge of the key before connecting. A good solution is to wait for the "ready" event to fire and set the key first thing.


Player behavior


The first step is to get a general overview of how the player works over here.


Important Notice: Flash Security Restrictions


Before we get started, we should take a look at the Flash security restrictions when it comes to loading a module from a remote domain into your application. If like most developers you are going to test your application locally, trying to load the ChromelessPlayer.swf module directly from our servers will lead to a 'SWF is not a loadable module' error caused by the Flash security restrictions. The quickest way to get around this is to download the ChromelessPlayer.swf flash locally to your harddrive and access is from there. When you deploy your application to a web server, you will then need to change the URL of the module to point to our servers again.


Simple example


To import the Livestream module into your application, you can use a ModuleLoader from the mx.modules package. The Livestream component runs some initialization code when first loaded, so after it has been loaded by the ModuleLoader, you should wait for it to dispatch the "ready" event before you interact with it.

The following is an example of the simplest integration of our component in a Flex application:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
 
	<mx:Script>
		<![CDATA[
 
			private var player:*;
 
			private function loaderReadyHandler(event:Event):void
			{			
				player = ModuleLoader(event.target).child;
				player.addEventListener("ready", playerReadyHandler);
				player.addEventListener("errorEvent", playerErrorHandler);
			}
 
			private function playerReadyHandler(event:Event):void
			{
				player.devKey = 'REPLACE WITH YOUR DEVKEY';
				player.channel = 'livestreamapi43';
				player.play();
			}
 
			private function playerErrorHandler(event:Event):void
			{
				var e:Object = Object(event);
				trace('Player error: [' + e.code + '] ' + e.message);
			}
 
		]]>
	</mx:Script>
 
	<mx:ModuleLoader
		url="http://cdn.livestream.com/chromelessPlayer/v12/ChromelessPlayer.swf"
		width="100%"
		height="100%"
		ready="loaderReadyHandler(event)" />
 
</mx:Application>


Interactions with the Livestream module


Once the ModuleLoader has loaded the ChromelessPlayer.swf module, you can assign a variable to it's child which will be the instance of the player you will be interacting with. The first thing you should do is wait for that component to dispatch an event of type "ready", as shown in the example. You are then free to interact with the player using any of the properties and methods documented here.

Here is a listing of the other events that the component dispatches:

Event Type Description
connectionEvent Fired when the player initially connects to the channel. This does not imply that video playback has started
disconnectionEvent Fired when the player gets disconnected from the channel. Does not usually happen unless your connection drops for instance
isLiveEvent Fired when the channel goes on/off live status. You may use isLive after this has been fired to check whether the channel went live or just stopped being live.
playbackEvent Fired when content playback actually starts, when the video starts playing
playbackCompleteEvent Fired when a clip reaches it's end in on-demand mode or when the playback was stopped in live mode
errorEvent Fired when an error occurs. The code attribute on the event will tell you what the error code is and the message attribute contains a short description of the issue
playClickedEvent Fires when the overlay play button is clicked on the player
pauseClickedEvent Fires when the overlay pause button is clicked on the player
mutedEvent Fires when the player is muted
unmutedEvent Fires when the player is unmuted


Other Examples


Here are some real-life example of the Livestream Flex API as it was used for some of our internal projects.

Homepage Player

The Livestream.com homepage player was built using this API, and features simple customized overlay controls and exposes javascript functions to be able to switch between channels. It also displays updating thumbnails of the stream when not playing the content. The full source is available here.

Using the thumbnail API


Livestream also provides a thumbnail API which gives you the ability to periodically retrieve screenshots of the currently running video stream. You can find the documentation of the Live Thumbnail API here.


Using the channel API


You can find an example of how to use the channel API with the player API here.