Flash Live Streaming

Live Media Encoders for Flash (How to Generate Your Live Broadcast)

Streaming End Points (How to Publish Your Live Broadcast on a Web Page)  

Adobe Media Live Encoder

The Adobe Media Live Encoder is a free download from Adobe.  You will need to create a new Adobe ID or login using an existing account information. 

Flash Media Live Encoder allows you to capture live audio & video while streaming in real time to a Flash (or Wowza) Media Server.  The media encoder features support for On2 VP6 & H.264 codecs.

Quickstart Guide

  • Download and install the application.  You will need an Adobe ID or register for an ID.
  • Connect your video device (i.e., web cam or video camera)
  • Open Adobe Flash Media Live Media Encoder
  • Under Device select the type of video device you are using

Note: You can choose the codec to use: H.264 or VP6.  When using the VP6 your file will be saved with the FLV file extension.  If you use H.264 your file will be saved with the F4V extension.  VP6 & FLV are generally recommended for live streaming.  For more on the FLV & F4V file formats click here to visit a helpful page on Adobe's web site.

Additionally, you can use one of the pre-defined presets in Adobe Flash Media Encoder.

  • Next tick Streaming to Flash Media Server
  • FMS URL: enter the path to the server including the application name--for example:

rtmp://flash.oit.duke.edu/live/

[note that no specific server paths should be used--only the CNAME flash.oit.duke.edu.  This is to ensure that your code works in the event we fail over from one server to another.] 

  • Stream: this is the name of your stream.  You may name the stream how you wish, but do not include a file extension here.  For example:  mystream
  • Tick 'Save to File' if you would like to save your live stream.

You can choose the save location of your file. 

  • Click the Connect button.  You are now connected to the server.
  • Check your settings and click Start

An icon will appear in the lower left corner of the Media Encoder.  This lets you know that you are streaming to the server. 

ON2 Flix Live

  • First download On2 Flix Live from the ON2 website
  • Connect your camera
  • Open the application click Advance
  • Choose your streaming setting from the drop down menu.
  • Configure Send to Server, for example:
rtmp://flash.oit.duke.edu/live/
  • Tick Archive file if you would like to save your stream

You can choose the save location of your file.  If you have access, you can save your FLV directly to the FMS.

  • Choose the video & audio source
  • You can leave Server Type blank
  • Click the GO! button

You will see a message in the dialog box that lets you know that you have connected to the server and the stream name that you are using for the connection.

Live Stream End Points

There are several options for broadcasting your live stream.  Here are some of the most common:

JW Media Player - Quickstart

The JW Media Player is a free Flash video and audio player (there is a fee, however, if you intend to use JW for commercial purposes).   

  • Click here to download the JW Media Player 
  • Unzip the file.
  • Create a new HTML file in your HTML editor
  • Save the file in the mediaplaer folder
  • Copy & paste the following code into the <head> tag in your HTML
<script type="text/javascript" src="swfobject.js"></script>
  • Next copy the following code into the <body> tag of your HTML file.

<script type='text/javascript'>
var s1 = new SWFObject('player.swf','ply','470','320','9','#ffffff');
s1.addParam('allowfullscreen','true');
s1.addParam('allowscriptaccess','always');
s1.addParam('wmode','opaque');
s1.addVariable('file', 'STREAM_NAME');
s1.addVariable('streamer', 'rtmp://flash.oit.duke.edu/live/');
s1.addVariable('type', 'video');
s1.write('container');
</script>

[note that no specific server paths should be used--only the CNAME flash.oit.duke.edu.  This is to ensure that your code works in the event we fail over from one server to another.]

  • You need to change one line of code
s1.addVariable('file', 'STREAM_NAME');
  • Stream Name : This is the name you gave your stream
  • Publish your HTML page & open in a browser.
  • You will a see the JW Player in the browser.  Click the play button.

FlowPlayer

Flowplayer is an open source Flash video player.  It supports FLV, H.264, encoded MP4 & MV4 video formats.  It can not play Windows Media format or QuickTime movies.

To add the Flowplayer to a web page you will need to download two files, the Flowplayer & the RTMP Plugin for Flowplayer

NOTE:  At times FlowPlayer files will be updated.  Once you download your source files from FlowPlayer, check the version number of the download against the version number in the code below.  It may be necessary to updated the version number of the FlowPlayer & the JavaScript in the code below.

FlowPlayer Quickstart Guide

  • Click here to download the Flowplayer.
  • Click here to download the RTMP Flowplayer plugin
  • Unzip both files
  • Open the RTMP folder and copy the file flowplayer.rtmp-3.0.x.swf
  • Open the Flowplayer folder and paste the RTMP file in folder with the flowplayer-3.0.x.swf file
  • You should have three swf files and a folder called examples.
  • Create a new HTML file in your HTML editor and save it inside the example folder.
  • Copy & paste the following code into the <head> tag in your HTML
<script type="text/javascript" src="../flowplayer-3.0.2.min.js"></script>
  • Next copy the following code into the <body> tag of your HTML file.

a style="display:block;width:400px;height:300px" id="player"></a>
<!-- this will install flowplayer inside previous A- tag. -->
<script type="text/javascript">
flowplayer("player", "../flowplayer-3.0.2.swf", {
  clip: {
    url: 'STREAM_NAME',
    provider: 'rtmp',
    live: true
  },
  plugins: {
    rtmp: {
      url: '../flowplayer.rtmp-3.0.1.swf',
      netConnectionUrl: 'rtmp://flash.oit.duke.edu/live/'
    },
    controls: {  
      url: 'flowplayer.controls-3.0.2.swf',  
 
      // which buttons are visible and which not ?  
      play:false,       
      fullscreen:true,  
 
     // scrubber is a well known nickname to the timeline/playhead combination  
      scrubber: false          
    }               
  }
});
</script>

[note that no specific server paths should be used--only the CNAME flash.oit.duke.edu.  This is to ensure that your code works in the event we fail over from one server to another.]

  • You need to change one line of code
    url: 'STREAM_NAME',
  • Stream Name : This is the name you gave your stream
  • Publish your HTML file & open in a browser
  • You will see the FlowPlayer in the browser
  • Click Play if you have a live stream running

FLV Component

The FLV Playback Component comes built in to Flash.  It comes with several prebuilt skins that allows you to customize the playback controls.  For advanced users, custom skins may be built for the FLV Component.  Both progressive & stream video can be played on the FLV Component.

Sample stream path: rtmp://flash.oit.duke.edu/live/mystream

Adobe offers a 30 day trial for Flash.  You can download a copy from the Adobe's website. You will need an Adobe ID to download the trial.  Its free to register.

FLV Component - Quickstart

You will need a live stream in order for the FLV Component to connect.  If you are not streaming an feed then you will see a blank SWF file.

  • Open the Flash Professional application
  • You can choose between Action Script 2.0 or 3.0 
  • Save your file, make sure you save all your files to the same folder
  • Click on Windows > Components
  • The component dialog box will open.
  • Expand theVideo tab
  • Select FLV Playback & drag it to the stage
  • Click on Windows > Component Inspector
  • The Component Inspector allows you set the media parameters.
  • You can choose the type of skin you like.
  • Click on source, then click on the magnify icon
  • Enter the path to your live stream.

You will use the path from the FMS URL & the Stream name.  For example:

 rtmp://flash.oit.duke.edu/live/mystream
  • Save your file.
  • Click Control > Test Movie

To access the publishing settings click on File > Publishing Settings.  The default publishing settings in Flash with publish a SWF file and a HTML file that includes a AC_RunActiveContent.js file.  For more information on Active Content click here.

Dreamweaver Flash Video

If you have access to Dreamweaver you can use the built in Flash Video option to create a video player and a web page on which to broadcast your live stream. 

  • Open the Dreamweaver application
  • Create a new HTML Page
  • Save the file to a folder.
  • Click Insert > Media > Flash Video
  • The Insert Flash Video dialog will open.
  • Video Type: select Streamig video from the drop down menu
  • Server URI: enter the path to your streaming server, for example:
rtmp:flash.oit.duke.edu/live/
  • Stream name: choose a name for your stream 
  • Skin: this will allow you to choose a preset skin
  • Enter the 'Width & Height' of your stream
  • Tick 'Live video feed' & 'Auto play'
  • Click Ok
  • Allow copy depandant files
  • Your player will be inserted into you HTML page
  • Save & Publish the file

Once the file is published it will open in a browser.  If you have your stream running you should see the broadcast.