Can't view FMS streaming videos from remote browserclients...

[clsimeone]

Hi All,

I created a video player with FLEX 2.0 and with it I can view streaming video
from localhost.

However, when I open the video player web page from a remote browser my swf
loads, but the video's don't play. That is, I see my video player, but there's
no video.

So, "rtmp://localhost:1935/myApp/myVideo.flv" only works on the localhost.

When using an ip address (where xx.xx.xx.xx is the ip address) -
"rtmp://xx.xx.xx.xx:1935/myApp/myVideo.flv" does not work at all. Again, my
video player and all it's controls are there and functioning, but the video
does not load.

Any ideas? Any help would be greatly appreciated.

Thanks
Chris S.

[clsimeone]

I can't post all the code in one message so here it is in three parts. It's a
mix of code that I found on the web , the XRay project and stuff I added as
well. It requires an XML file to populate the drop down list...


=======================================
== THE FLEX MXML/ACTIONSCRIPT CODE ==
=======================================
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
height="567" width="680" verticalAlign="top"
xmlns="*"
layout="vertical"
horizontalAlign="center"
creationComplete="onCreationComplete();" >

<mx:Script>
<![CDATA[
import mx.utils.XMLUtil;
import mx.core.Application;
import mx.managers.PopUpManager;
import flash.events.ProgressEvent;
import flash.events.MouseEvent;
import flash.events.Event;
import mx.events.VideoEvent;
import mx.events.MetadataEvent;
import flash.utils.Timer;
import flash.events.TimerEvent;

[Bindable]
public var flvPath:String = "";
[Bindable]
private var metaData:Object = {duration:0};
public var scrubbing:Boolean = false;
public var selectedItem:Object;

////////////////////////////////////////////////////////////
//////////////
public function onCreationComplete():void
{
videoPlayer.addEventListener( VideoEvent.PLAYHEAD_UPDATE,
playheadUpdated );
videoPlayer.volume = 0.50;
volumeSlider.value = (videoPlayer.volume) * 100;
}
////////////////////////////////////////////////////////////
//////////////
public function updateScrubBar(event:Event):void
{
if(!scrubbing)
scrubBar.value = videoPlayer.playheadTime;
}
////////////////////////////////////////////////////////////
//////////////
public function updateVolume(event:Event):void
{
videoPlayer.volume = (volumeSlider.value) * .01;
}
////////////////////////////////////////////////////////////
//////////////
public function scrubVideo(event:Event):void
{
videoPlayer.playheadTime = scrubBar.value;
scrubbing = false;
}
////////////////////////////////////////////////////////////
//////////////
public function onSelectedVideo(event:Event):void
{
try
{
selectedItem = ComboBox(event.target).selectedItem;
var path:String = selectedItem.data;
var vid:String = selectedItem.label;
var vidpath:String = "rtmp:/"+path+vid;

if(path.length == 0)
return;

if(videoPlayer.playing)
{
videoPlayer.stop();
btnStop.enabled = false;
}

flvPath = vidpath;

videoPlayer.load();
var myTimer:Timer = new Timer(1000, 2);
myTimer.addEventListener("timer", onVideoPlay);
myTimer.start();
lblPath.text = flvPath;
}
catch(error:*)
{
throw error;
}

}
////////////////////////////////////////////////////////////
//////////////
public function onVideoPlay(event:Event):void
{
try
{
videoPlayer.play();
btnStop.enabled = true;
btnPause.enabled = true;
}
catch(error:*)
{
throw error;
}
}
////////////////////////////////////////////////////////////
//////////////
public function onVideoStop():void
{
videoPlayer.stop();
btnStop.enabled = false;
btnPause.enabled = false;
}
////////////////////////////////////////////////////////////
//////////////
public function onVideoSetup(event:Event):void
{
lblTotalTime.text = timeString(videoPlayer.totalTime);
scrubBar.maximum = videoPlayer.totalTime;
}
////////////////////////////////////////////////////////////
//////////////
public function onVideoReady(event:Event):void
{
var myTimer:Timer = new Timer(1000, 2);
myTimer.addEventListener("time r", onVideoSetup);
myTimer.start();
}
////////////////////////////////////////////////////////////
//////////////
public function playheadUpdated(event:VideoEvent):void
{
lblPosition.text = timeString(event.playheadTime);
} ;
////////////////////////////////////////////////////////////
//////////////
public function updatePosition(event:Event):void
{
videoPlayer.playheadTime = scrubBar.value;
}
////////////////////////////////////////////////////////////
//////////////
public function timeString(mili:Number):String
{
mili = (mili + 0)*1000;
var hours:String = String( Math.floor(mili / 3600000) );
var minutes:String = String( Math.floor((Number(mili) -
Number(hours) * 60 * 60 * 1000) / 60000) );
var seconds:String = String( Math.floor((Number(mili) -
Number(hours) * 60 * 60 * 1000 - Number(minutes) * 60 * 1000) / 1000) );

if (Number(hours) < 10)
hours = "0" + hours;
if (Number(minutes) < 10)
minutes = "0" + minutes;
if (Number(seconds) < 10)
seconds = "0" + seconds;

return (hours + ":" + minutes + ":" + seconds);

}
////////////////////////////////////////////////////////////
//////////////
]]>
</mx:Script>

[clsimeone]

<mx:XML id="VideoList2" source="flvVideo.xml" format="e4x" />
<mx:XMLListCollection id="colVideos" source="{VideoList2.video}"/>
<mx:Label id="lblPath" width="90%" text="" height="24" textAlign="center"
fontFamily="Verdana" fontSize="15" color="#ffffff"/>


<mx:TitleWindow id="videoWindow"
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
showCloseButton="false"
horizontalAlign="center"
verticalAlign="middle"
borderAlpha=".50"
dropShadowEnabled="true"
roundedBottomCorners="true"
visible="true"
backgroundColor="#003366"
backgroundAlpha=".22"
fontWeight="bold">

<mx:HBox id="pnlTimer" width="100%" horizontalAlign="right"
verticalAlign="middle">
<mx:ComboBox id="cb" dataProvider="{colVideos}"
labelField="label" width="300" close="onSelectedVideo(event)" />
<mx:Label id="lblPosition" width="83" text="00:00:00"
height="24" textAlign="center" fontFamily="Verdana" fontSize="15"
color="#ffffff"/>
<mx:Label text="|" fontWeight="bold" fontFamily="Verdana"
fontSize="18" width="20" textAlign="center" color="#ffffff"/>
<mx:Label id="lblTotalTime" width="87" text="00:00:00"
height="24" textAlign="center" fontFamily="Verdana" fontSize="15"
color="#ffffff"/>
</mx:HBox>

<mx:VideoDisplay id="videoPlayer" x="0" top="100"
playheadUpdateInterval="1000"

playheadUpdate="updateScrubBar(event)"
ready="onVideoReady(event)"
autoPlay="false"
source="{flv Path}"
maintainAspe ctRatio="true"
/>

<mx:ApplicationControlBar width="100%" height="42">
<mx:Button id="btnPlay" label="play" x="292.5" y="0"
click="onVideoPlay(event);"/>
<mx:Button id="btnPause" label="pause" x="350.5" y="0"
click="videoPlayer.pause();"/>
<mx:Button id="btnStop" label="stop" x="418.5" y="0"
click="onVideoStop();"/>

<mx:HSlider id="scrubBar" width="100%" height="20"
click="scrubVideo(event)"
thumbRelease="scrubbing=false"
thumbPress="scrubbing=true"
showDataTip="true"
dataTipFormatFunction="timeString"
minimum="0"
maximum="{metaData.duration}"
snapInterval="1"
enabled="true"
liveDragging="false"
/>
<mx:HSlider id="volumeSlider" width="78" height="20"
thumbPress="scrubbing=true"
click="scrubbing=false;"
thumbRelease="scrubbing=false"
thumbDrag="updateVolume(event);"
minimum="0"
maximum="100"
snapInterval="1"
enabled="true"
liveDragging="true"
/>
<mx:Label text="Vol."/>
</mx:ApplicationControlBar>
</mx:TitleWindow>
</mx:Application>

[clsimeone]

======================================
== THE XML FILE - flvVideo.xml ==
======================================
<?xml version="1.0" encoding="utf-8"?>
<videos>
<video>
<label>Select...</label>
<data></data>
</video>
<video>
<label>video1.flv</label>
<data>/servername/fms_application/</data>
</video>
<video>
<label>video2.flv</label>
<data>/servername/fms_application/</data>
</video>
</videos>

[clsimeone]

Okay, after all that it was the firewall.

First I added what I thought were the correct ports - that didn't work. And,
even though I thought I killed the firewall, the service was still running. I
killed the service and bada-bing it worked.

If anyone has instructions/comments/suggestions regarding firewalls and FMS
ports please post them in this forum.

Enjoy the code if you find it useful!!!

Chris

[dongzky]

Maybe this article will help on firewall issues.

[url]http://www.adobe.com/devnet/flashcom/articles/firewall_streaming_print.html[/url]