Build Flowplayer From Source

There is no direct Link which gives proper instructions on how to build flowplayer. Here is my effort to build one

First goto flowplayer website and download source .Below is instruction

Once downloaded extract it to a folder

Rather than from website you can also get flowplayer-core source from

http://flowplayer-core.googlecode.com/svn/

Now in folder above checkout following code base

http://flowplayer-plugins.googlecode.com/svn

Flowplayer build is dependent on the above plugins you download

now goto to flowplayer you downloaded from website and open build.properties

Make sure you update you flex installation Directory

# you need to adjust following to point to your Flex SDK

flex3dir=C:/software/Flex/flex_sdk_4.1/

# change following to point to .exe files when running on Windows

mxmlc_bin= ${flex3bindir}/mxmlc.exe

compc_bin= ${flex3bindir}/compc.exe

asdoc_bin= ${flex3bindir}/asdoc.exe

Now Make sure you update the path for all plugins

plugin.buildfiles=bwcheck/build.xml,controls/build.xml,controls/build-air.xml,controls/build-tube.xml,controls/build-skinless.xml, \
  viralvideos/build.xml,pseudostreaming/build.xml,securestreaming/build.xml,smil/build.xml,sharing/build.xml

for plugins that can be built inside the player

plugin-classes=${plugins.dir}controls/trunk/src/actionscript ${plugins.dir}content/trunk/src/actionscript  \
  ${plugins.dir}akamai/trunk/src/actionscript ${plugins.dir}rtmp/trunk/src/actionscript ${plugins.dir}pseudostreaming/trunk/src/actionscript \
  ${plugins.dir}audio/trunk/src/actionscript ${plugins.dir}bwcheck/trunk/src/actionscript ${plugins.dir}cluster/trunk/src/actionscript \
  ${plugins.dir}captions/trunk/src/actionscript ${plugins.dir}securestreaming/trunk/src/actionscript ${plugins.dir}smil/trunk/src/actionscript \
  ${plugins.dir}common/trunk/src/actionscript

plugin-swc=${plugins.dir}controls/trunk/src/flash ${plugins.dir}content/trunk/src/flash ${plugins.dir}/viralvideos/trunk/src/flash ${plugins.dir}/pseudostreaming/trunk/libcontrols-dir=${plugins.dir}controls/trunk

Once configuration is updated you just goto to the directory where you unzipped downloaded flowplayer and then type “ant”

It Will automatically build all stuff for you

Make sure you have following in your machine before you build

ANT: http://ant.apache.org/bindownload.cgi

Flex SDK: http://opensource.adobe.com/wiki/display/flexsdk/

Next tutorial is on adding our custom component to flowplayer……………………..


Advertisements

Red5 Server RTMPT with Apache as Webserver and Flowplayer Configuration

Today i’m going to discuss how to setup your own streaming server over the web very cost effectively and also a Player which can play your streams

Red5 is the best Opensource Streaming server available over the web and you can quickly download it’s installation and run it to setup your streaming server

Installation

If you are first time user of Red5, start the server by clicking “red5.bat”

Once that is done goto Home page

Here is the link for default home page  http://localhost:5080

Red5 is by default configured on port 5080 ( It comes with embedded tomcat)

Now click on install link and install oflvDemo (Application using flash installer red5 provides)

RTMPT Configuration

Verify if you have “rtmpt.server” bean configured in your “conf/red5-core.xml”

If not present copy the following code


<bean id="rtmpt.server" class="org.red5.server.tomcat.rtmpt.RTMPTLoader" init-method="init" lazy-init="true">

		<property name="webappFolder" value="${red5.root}/webapps" />

		<property name="connector">
			<bean class="org.apache.catalina.connector.Connector">
				<constructor-arg type="java.lang.String" value="org.apache.coyote.http11.Http11NioProtocol" />
				<property name="port"><value>${rtmpt.port}</value></property>
				<property name="enableLookups"><value>false</value></property>
			</bean>
		</property>

		<property name="connectionProperties">
			<map>
				<entry key="maxKeepAliveRequests" value="${rtmpt.max_keep_alive_requests}"/>
				<entry key="useExecutor" value="true"/>
				<entry key="maxThreads" value="${rtmpt.max_threads}"/>
				<entry key="acceptorThreadCount" value="${rtmpt.acceptor_thread_count}"/>
				<entry key="processorCache" value="${rtmpt.processor_cache}"/>
			</map>
		</property>

		<property name="host">
			<bean class="org.apache.catalina.core.StandardHost">
				<property name="name" value="${rtmpt.host}" />
				<property name="unpackWARs" value="false" />
				<property name="autoDeploy" value="false" />
				<property name="xmlValidation" value="false" />
				<property name="xmlNamespaceAware" value="false" />
			</bean>
		</property>		

	</bean>

The above code enables RTMPT Plugin into your Red5 server. This is required in most cases where you want to start streaming over the web where all ports other than port 80 are blocked

RTMPT is RTMP protocol over HTTP

By default if you just want to test on local machine you wont need this RTMPT setup

Now lets have our Webserver proxy to this Red5. The webserver i chose here is Apache Http Server

Verify if you have mod_proxy module enabled in Apache httpd.conf

If not enable it

Now add the following configuration to apache to make it as proxy to red5

ProxyPass /demos http://localhost:5080/demos
ProxyPassReverse /demos http://localhost:5080/demos
ProxyPass /open http://localhost:8088/open
ProxyPassReverse /open http://localhost:8088/open
ProxyPass /send http://localhost:8088/send
ProxyPassReverse /send http://localhost:8088/send
ProxyPass /idle http://localhost:8088/idle
ProxyPassReverse /idle http://localhost:8088/idle
ProxyPass /close http://localhost:8088/close
ProxyPassReverse /close http://localhost:8088/close
ProxyPass /fcs http://localhost:8088/fcs
ProxyPassReverse /fcs http://localhost:8088/fcs

The above configuration create proxy for demos where olfvDemo is hosted as well as RTMPT connection requests that are listening on port 8088 (Default RTMPT ) port for red5

Dont forget to restart server’s once you change configurations.

Player setup

Flowplayer is best opensource flash Player which is available over the web. You can download it from web or you can checkout the one which is configured for red5 from

https://linkwithweb.googlecode.com/svn/trunk/Player

Below is the code that is to written as configuration to run a Stream from olfvDemo(Red5 application)

<!-- 		include flowplayer JavaScript file that does  		Flash embedding and provides the Flowplayer API.	-->

<script type="text/javascript" src="flowplayer-3.2.6.min.js"></script>

		<!-- this A tag is where your Flowplayer will be placed. it can be anywhere -->
		<a  
			 href="http://pseudo01.hddn.com/vod/demo.flowplayervod/flowplayer-700.flv"
			 style="display:block;width:620px;height:530px"  
			 id="player"> 
		</a> 
	
		<!-- this will install flowplayer inside previous A- tag. -->
		<script>
			flowplayer("player", "../flowplayer-3.2.7.swf",{
			 clip: {
					url: 'toystory3.flv',
					// configure clip to use influxis as our provider, it uses our rtmp plugin
					provider: 'northalley'
				},
				allowfullscreen : true,
				// streaming plugins are configured under the plugins node
				plugins: {

					// here is our rtpm plugin configuration
					northalley: {
						url: '../flowplayer.rtmp-3.2.3.swf',
						// netConnectionUrl defines where the streams are found
						netConnectionUrl:'rtmpt://localhost:8088/oflaDemo'
					}
				}
			});
		
		</script>

We have donwloaded RTMP plugin to run RTMP streams.

Njoy publishing your streams for freeeee