Moving on to FEE from Flash! a new Beginning…

It’s time to make a fresh beginning. Not that it’s starting today this day in 2016 but It started with my moving away from Flash Development to Front End Development in HTML5/CSS3/JavaScript.

12 Years of great work in various technologies related to Flash domain – Flash Media Server development/Wowza/Red5, creating some RIA applications using Flash Remoting with ASP.net, great eLearning projects, using Flash and then Flex to create a virtual conferencing application with whiteboard/audio/video stuff it was some fun for sure, (special thanks to authorGEN / WiZiQ where I did all that great work in flash) created some AIR apps as well. I was always encouraged to write my experiences in dealing with daily problems, as a result of which I started writing this blog and some wonderful problems and their solution.
Made some great online friends from all part of world through flash forums and blogs and mailing lists.

And with all that background I came to Canada in 2010 to work on games development in Flash in one small company. It was great learning curve. Great colleagues and it lasted whole 3years before the project I was working on closed down and I was looking for a job and there was not much in market to look around in Flash domain until you were serious Flash gamer with lot’s of C/C++ or Java skills.

It was lucky for me that I started my career in HTML/CSS/JavaScript back in 2000 and I was keeping up with technology on and off and did some pretty good applications in JavaScript in eLearning domain at the time when JavaScript was not as cool is it sounds now 🙂 and browsers were not as robust as they are now, with Chrome was not even born at that time. I was learning about HTML5, CSS3 responsive web designing stuff, Sass, using Cordova to create android apps and new developments in JavaScript. So was able to get another job fairly quickly in another company in FEE domain and that’s how I moved away from Flash and now working mainly in FEE space.

Recently I have been involved with HTML5, JavaScript, CSS3, Sass, Node, npm and lot of other Front End technologies. There are so many that you can’t keep up to speed with them. You start with one and within a month you realize that there something new technology in the market more trendy and claimed to be the best by many experts in the domain.

I read a little bit about all these MVVM or MV* frameworks like Backbone, AngularJS, EmberJs and found that all these frameworks gives you a functionality to create Single Page Application and it struck me that’s what I was doing in Flex 7-8yrs back :). With some added advantages (flash/flex developer knows) which are not there in these framework yet.

But these frameworks have an edge over flash for sure as Flash is no more relevant for browsers, mobiles never had flash player for browsers so you if you want to make same web app you have to go the app route making AIR app for phones and browser web site for Desktops. So it no more hold the advantage of develop once and deploy everywhere and moreover most of these JavaScript SPA frameworks have the advantage of community which once Flash used to had. With Angular2 & React we have seen a lot improved approach to SPA architecture with a focus to mobile app development using the same code base.

With HTML5 and responsive web designing concepts you can make same website viewable across the platform. (although it has some inherent issues where responsive websites can be pretty heavy for mobile browsers sometime if not designed properly)

Well I am hoping to share my experience in this new domain more frequently from now on…

Advertisements

Setting Flex 4 Application background transparent

This article is covered in more detail in flex 4 help documents at About the Application container so in case you are looking for detailed description on what all you can do with Application container please refer to that article.

I am going to cover the small part of it here as I found that it’s a bit tricky in Flex 4 to get your background transparent and you don’t find enough help on it while searching around on the net.

In flex 4 you can’t set backgroundImage or backgroundAlpha  to zero directly you have to create skin for your application container using which you can set background color or image. So in case you want to make a see through flash/flex application you need a transparent image. The first thing you will need is a transparent image you can use. So create one using Photoshop or some other design software. For Transparent skin you can use the following code, create a file named for example: MainApplicationSkin.mxml (you can name it any. just make sure use the same name in main application).

<?xml version=”1.0″ encoding=”utf-8″?>
<s:Skin xmlns:fx=”http://ns.adobe.com/mxml/2009&#8243;
xmlns:mx=”library://ns.adobe.com/flex/mx”
xmlns:s=”library://ns.adobe.com/flex/spark”>

<fx:Metadata>  [HostComponent(“spark.components.Application”)] </fx:Metadata>
<s:states>
<s:State name=”normal” />
<s:State name=”disabled” />
</s:states>

<!– Use an Image control to embed an image for the background of the Application container. –>
<mx:Image source=”@Embed(source=’images/transparent.png’)”
left=”0″ right=”0″ top=”0″ bottom=”0″ maintainAspectRatio=”false” />
<s:Group id=”contentGroup” left=”0″ right=”0″ top=”0″ bottom=”0″ />
</s:Skin>

Now if this skin is at the same level as your main application you can use it in your main application as follows:

<s:Application xmlns:fx=”http://ns.adobe.com/mxml/2009&#8243;
xmlns:s=”library://ns.adobe.com/flex/spark”
xmlns:mx=”library://ns.adobe.com/flex/mx”
width=”100%” height=”100%” minWidth=”550″
skinClass=”MainApplicationSkin”>
<fx:Declarations></fx:Declarations>
</s:Application>

You can see how the MainApplicationSkin has been supplied as a parameter to skinClass. This will make your main flex application as transparent. Now the other part is to make this as a transparent in your html code. We need to tell the object code to set the object “wmode” as transparent. For this you have to set it at two places one in object code part and other in embed code part. For Example:

http://SampleApp.swf

You can see how the wmode has been set as transparent in two places. This will make your html background appear through flash object. So as we see, we need to make it transparent at 2 levels one in flex application which we do using skin in flex 4 and other in html code. It’s same as we used to do with earlier versions of flash/flex applications.

Error #2032:IOError

To start with in this error I have encountered and explored is specific to ASP.NET and Flash communication using URLVariables and URLLoader.

The error was that although I could send update value to my .Net page but couldn’t receive the update back in Flash player specifically in Chrome and Opera.  To my relief the problem for Opera was resolved with their latest release of version 10.54

So the quest begin and I Google around and found the one of the best source related to Flash Errors on web which is Judah’s blog So in case you are not looking to .net related problem please go through the post and responses in that blog entry you might come across your problem related response.

I put flash.events.HTTPStatusEvent.HTTP_STATUS as suggested by Mike Chambers on that Judah’s blog that helped me to move in right direction at least. I just noticed that in Chrome I am getting status=0 whereas in Firefox or IE I was getting Status=200.

I used Wireshark as suggested in the comments by quite a few users. This post Using WireShark to sniff HTTP packets
has steps listed to help you in getting related information using Wireshark. I was able to figure out that I am receiving response from in both Chrome and Firefox but somehow Chrome is not able to read the response.

Suddenly because of my good luck ASP.Net developer has put some error in his page by mistake and i was able to see the error value in Chrome and when I asked me to send me some text in error blog itself i was able to see the value in Chrome as well.

So now it was the turn of .net code to figure out what wrong was there and we saw that the correct block has two lines after sending the values which are:

Response.Flush();
//Response.Close();

We just commented out Response.Close(); and here it is the problem is solved and we were able to see the values in all browsers. So for reference I searched around what was the problem with Response.close and here is a  post Response.End, Response.Close, and How Customer Feedback Helps Us Improve MSDN Documentation

Which clearly states that Response.close send reset packet and that’s why I was getting 0 instead of 200 and because of that Chrome was missing the values somehow.

Few other related forum questions and blog post which i have read during this problem are:

URLLoader Error #2032: Stream Error

Why is my URLLoader not dispatching when it completes?

Creating Windows Mac or Linux executable file from AIR file

This post is regarding how we can create executable from AIR file targeting a specific OS platform. Flex or Flash builder doesn’t give us the functionality to create executable, we have to use command line Air compiler to create executable. As of now we can create executable targeting 3 major platform i.e. Windows, MAC and Linux. Until now i.e. before version 2 of AIR it wasn’t possible in AIR. We simply create a single AIR output file and can install/deploy it on any platform using AIR framework. But then we couldn’t call up native processes in the host operative system in AIR and it turned out to be a very less effective desktop application. So because of huge demand from community Adobe has come out with AIR 2, which  has native process class in AIR among few other enhancements. But this additional feature has downside as well and that is we have to create separate executable for each 3 major supported OS i.e. Windows, MAC and Linux. 2nd if it’s a executable we can’t update it directly from Server like we use to do for AIR apps.

How can be create executable from AIR app:
Goto command line
Move to AIR SDK installed folder>bin
command to create executable is:

adt -package -target native <output executable file path with output file name>
<input air file path with input air file name>

Examples:

Windows executable:
adt -package -target native C:\AIRSamples\AIRSample.exe C:\AIRSamples\AIRSample.air

Mac executable:
adt -package -target native C:\AIRSamples\AIRSample.dmg C:\AIRSamples\AIRSample.air

Linux executable:
adt -package -target native C:\AIRSamples\AIRSample.rpm C:\AIRSamples\AIRSample.air

Preparing the app as a native application

In order to use the new NativeProcess class in your application you need to add one line to your application descriptor file:

<supportedProfiles>extendedDesktop</supportedProfiles> tag and you must add “desktop” for desktop version as well to it i.e.
correct format is:<supportedProfiles>extendedDesktop desktop</supportedProfiles>
Otherwise you will get an Error:306-
“Descriptor must support the profile desktop, mobileDevice, or extendedMobileDevice while creating release version of your AIR project”.
 

Setting up port 80 on Windows 2008 server for FMS or Wowza running IIS7 alongside

It’s been a long time since I wrote any article. It was more of being laziness on my part and also because sometimes you have NDA’s not allowing you to share your technical misadventure(s) with the folks of your community.

So this one is just setting up port 80 for FMS and Wowza (Red5 maybe didn’t tried setting up port for it) and for that matter any application which you want to setup on port 80 alongside other ports for the particular IP on which you want to setup that particular application.

The pre-requisites here are that you have more then 1 IP on the Windows 2008 server on which you are going to install your streaming server In case you want to keep IIS running alongside on the same server. BTW if you are looking for setting up port 80 on Windows 2000 or Windows 2003 server please visit Stefan’s blog he has a very well written post updated for both 2000 and 2003 windows server Running Flashcom Server alongside IIS.

Technical part:

I have searched around and found this article by Steve Schofield. He setup apache alongside IIS on another IP and assigned port 80 to that.

As we know Windows always assign port 80 by default to IIS on all IP setup on a machine. So whenever we setup any application on any IP we have to first remove IIS from its port 80 only then we can assign the port 80 to our other application on that particular IP.  I will just copy paste the steps written on Steves blog for straight reference here:

  1. Added or make sure your machine has at least two IPs (just for example 192.168.0.90 and 192.168.0.91)
  2. “Open an [elevated] command prompt”. i.e. you need to run command prompt as an administrator as UAC will block this command.
  3. Type netsh
  4. Type http
  5. Type sho iplisten.  It should be blank
  6. Type add iplisten ipaddress=192.168.0.90 You should get IP address successfully added
  7. Type sho iplisten again. It should sho 192.168.0.90 in the list
  8. Type exit to get out of netsh
  9. Type netstat -an. See if you notice 192.168.0.90:80 in the list.  If you see 0.0.0.0:80, do an iisreset

Now Install Wowza or FMS and then you can mention port 80 against a particular IP on which you want to setup your these streaming servers.

For Wowza:

goto: conf>vhost.xml – In IpAddress tag mention the 2nd IP on which you want to setup wowza in this case it’s 192.168.0.91.

In Port tag mention port 1935,80 using comma as a separator and after saving vhost file restart the Wowza service.

For FMS:

In FMS you can edit listening ports at two places, one at

conf>fms.ini -> In this file look for ADAPTOR.HOSTPORT tag there place port 80 after 1935 using comma separator. Add IP in front of color for example 192.168.0.91:1935,80 Make sure you don’t have # in front of ADAPTOR.HOSTPORT as it comment out the line.

The other place you can edit is directly in Adaptor.xml which is there inside folder conf\_defaultRoot_ look for HostPort add IP:Port(s) using comma separate as giving in the commenting section of adaptor.xml file. So in our example case it will be like 192.168.0.91:1935,80 in place of ${ADAPTOR.HOSTPORT} which is using variables defined in fms.ini.

You just make sure you update it only at single place in fms.ini or in adaptor.xml.

After updating the file restart both FMS services.

After installing your streaming server and configuring port 80 for them you can check if the respective IPs are listening to their port 80 by using netstat -an at command line.

In our example case it should show up something like:  192.168.0.90:80 and 192.168.0.91:80.

Then you can test out by connecting to your streaming server from your machine using rtmp://ip:80/appname. It should work.

Just hope it helps…

Stop using DuplicateDir tag for failover support architecutre in FMS!

I was working on fail-over architecture for our application and came across this <duplicateDir> tag in application.xml which, I am quite sure that many of you advanced FMS users already know or some of you might be already using it in your FMS based applications to support Fail-over.

I designed an architecture for our application in this architecture I was trying to keep the same folder hierarchy on both server.  So that if FMS (machine 1) stops working and users connects to same running instance from FMS (machine 2) they get the last updated data on FMS (machine 2) dumped through duplicate functionality from FMS1. There is a property in tag to attach application directory name to the path on other server or not i.e. by assigning value true you can add application directory name to the path or it will just copy the files at instance path. But when I was switching off the app directory name by assigning false it was just copying all sharedobject/streams at the root instead of at instance path. If I keep the app directory by assigning it  true.  It copies at correct path including instance path but attaching application directory path at beginning.

Anyway thinking that it’s some kind of bug or I might be doing something wrong. I posted a query regarding it on Flashcomguru mailing list and here comes the reply from FMS team member:

The <DuplicateDir> functionality for SharedObjects has been deprecated; it probably shouldn’t have been documented, my apologies. I’ve added a note to the online docs (comments appear at the bottom of the page):
http://help.adobe.com/en_US/FlashMediaServer/3.5_AdminGuide/WS5b3ccc516d4fbf351e63e3d119f2926bcf-7ff0.html

So what do we do now? I mean how do we achieve the duplicate directory functionality for fail-over in case we have planned for future? Or in case some of you were using it in past? So here is the reply from Adobe engineering team:

<DuplicateDir> won’t be supported moving forward and existing bugs won’t be fixed, so it’s not a good idea to use it.
You can use the File plug-in to build a fail-over architecture for streams.

So good luck for all the FMS developers who were or are in process of implementing failover architecture and were planning to or already using this duplicate directory in their architecture.

Some other good way to implement failover is to follow architecture suggested by Rober A. Colvin

I am just curious to know that will NAS/SAN introduce any kind of latency?  Compared to the files being stored on and delivered from same  machine?

Please let me know if anyone has any idea about it.

JScrCap screen capture utility for both FMS and Wowza Media Server

I have been evaluating JScrCap for a while now and finally i got something to write about. I got it working with both FMS and Wowza.  There are few pros and cons I am detailing below in the article.

Quality and memory usage is pretty good compare to the VH Capture which, we (flash media community) were used to use for screen-sharing applications.

You just have to put the JScrCap bundle on any web-server and use the JScrCap as an Applet in html page to start with. Just call the web page and it will prompt the client that there is an applet you want to run it or not. As soon as user clicks the run he is ready to share his screen through Flash media server or Wowza Media server.

FMS (Flash Media Server)

  1. You can’t use the default code i.e. SVC1 and also free codec used for screencapture with JScrCap utility as FMS doesn’t recognize this codec. Actually FMS  drops connection after first frame. Access log shows 419 x-status code, which means “License to receive screen sharing video failed”See more info or feedback from Flash community as Steafen puts in his blog.
  2. You can only use H264 codec for screencapture which does have licensing limitations.
  3. Using H264 you can’t reocrd flv file on server you can only create mp4 files. So in case you want to use FMS for screensharing using JScrCap and want to record the stream on server as well you have to make sure you record the incoming stream as mp4 stream not flv. Following is the error i see in log file if I try to record the h264 data as flv “2009-07-09 15:07:30 7180 (w)2611179 Warning from libflv.dll: Recording H264 to FLV is unsupported, tried in FLV :
    F:\RnD\FlashCom\FlashComm Applications\livestreamrecord\streams\_definst_\livestream.flv.
    2009-07-09 15:09:03 7180 (e)2601163 Failed to record F:\RnD\FlashCom\FlashComm Applications\livestreamrecord\streams\_definst_\livestream, no space left on device -“

  4. You can record metadata in mp4 file using FMS.

Wowza Media Server

  1. You can use both codec i.e. default one SVC1 or H264 for screencapture.
  2. You can record flv or mp4 files using h264 codec in Wowza.
  3. Wowza doesn’t record data in mp4 stream. So if you want to access data across in recorded stream make sure you only record the stream as flv.
  4. JScrCap sent mouse coordinates data as onMouseData so in case you are using Wowza with JScrCap you have to listen on onMouseData on Netstream object. This was an update Vladimir done recently on request as earlier the way data was being sent across using JScrCap was only recognized by FMS not Wowza. It was pointed to me by Charlie that the wowza doesn’t record the metadata the way JScrCap is sending so he suggested the way it should be and thankfully Vladimir did it very quickly.
  5. The other major benefit of using Wowza is that you can use EC2 instance of wowza which has very less cost compared to the upfront cost you have to pay to get FMS.

I tested it on Windows and Mac and it worked fine. I think any user’s platform which will be able to run java applet through JVM etc. can have screensharing working through his system.

The other important thing I noticed in JScrcap notes is that SVC1 – works on all platforms, H264 – works only on Windows and MacOSX. So as FMS can only interpret h264 stream not SVC1  that means we wont be able to use screensharing on Linux machines with FMS we have to use Wowza there as it does recognize SVC1 compressed stream.

Please post your views regarding this article or if there is anything missing I can update it here.