Post a Movie File On Your Website

Internet No Comments

If you have ever wanted to post a movie on your website (instead of using Youtube and other similar services), the steps below might help you get started. I will provide instructions for converting a movie AVI file from my digital camera into a Flash Video (FLV) file for posting on a web page.

019MickeyMagicMy camera, a Canon SD870 IS, produces video files in AVI (Audio Video Interleaved) format. The videos are 640×480 at 30 frames per second (at about 18mbps bitrate) and mono audio at 44kHz sample rate (at 705kbps bitrate). The bitrate and audio bitrates, in combination with the other attributes, determine the video and audio quality. For example, at a higher bitrate, a video frame will look much sharper with less artifacts. Also, the video and audio bitrates together determine how much bandwidth you would use to play the movie when streaming it. Knowing this info will come in useful when we do the movie conversion below.

The goal is to convert the AVI movie file into a FLV movie file which is much smaller and supports streaming playback (which allows the user to view the movie as it downloads). As an example, I have an AVI file which is 17 seconds long and 30MB in size. I will want to convert that down to a 2-4MB FLV file size (1/10 the original size) with a 1-1.5mbps video bitrate and at most 96kbps audio bitrate. These bitrates should be easily handled by users who are using DSL or cable Internet broadband services. To maintain video quality, I will also switch the video to be 15 frames per second while keeping the same 640×480 resolution.

There are two free utilities that you will need to download and install:

  • MediaInfo supplies technical information (resolution, frame rate, bitrate, sample rate, etc.) about a video and/or audio file.
  • Free FLV Converter to convert from AVI (and others) to FLV format.
    Note: When installing, select “Custom Installation” and unselect the two Searchqu install options!

First, run MediaInfo and open the original movie file. Take note of the video bitrate, video resolution, video frames per second (fps), audio bitrate, audio sample rate, and number of channels (mono 1 vs stereo 2). When you set the target FLV attributes, you will want to pick values which are equal to or less than the original values. You can keep MediaInfo opened to refer to.

Second, run “Free FLV Converter” and click on the “Conversion to FLV” button at the top middle. Browse to and select the original movie file; AVI file in my case. Unfortunately, the “Free FLV Converter” does not use the original file’s video/audio attributes. Instead, in the “Output configuration”, I had to make the following changes:

  • Change Video Size from 320×240 to 640×480.
  • Change Video Bitrate from 386 to 1500. (I tried keeping it at 386 and the resulting FLV movie was extremely pixelated. Even at 800, it was still too pixelated for my taste.)
  • Change Frame rate from 25 to 15.

I left the Audio settings of Frequency (aka sample rate) at 44100 and Bitrate at 96 Kbps. Hit the Convert button to convert to FLV format.

The “Free FLV Converter” utility will save the converted FLV movie file (with the same name as the original file but a .flv extension) to the desktop. The resulting file size is 3.5MB. If the file had been bigger, I would need to reduce the FLV target settings further. In addition, the utility will nicely generate an example HTML file (with same name as the video file), a FLVPlayer.swf (a Shockwave Flash movie player), and a Skin.swf (skin for the Flash movie player) file. Open the HTML file in a browser to play the FLV movie. Hopefully, the quality of the generated movie is good.

You can use the generated HTML file as-is or as a reference. To use as-is, just copy the generated FLV movie file, the HTML file, the FLVPlayer.swf, and the Skin.swf to your website. You will want to upload the four files into the same online directory. To use as a reference, copy-paste the <object> definition from the generated HTML to your own HTML page. You will still need to copy the FLVPlayer.swf and Skin.swf files to your website.

Note: If you use another FLV conversion software and notice that the download progress bar on the movie player (dark grey background) doesn’t advance, then it may be that the software did not add the appropriate meta data to the FLV file. In this case, you can use flvmdi.exe tool to add the missing metadata.

The settings used above worked for me. You may wish to adjust for your needs accordingly. Have fun!

No Comments

One Router to Rule Them All

Internet No Comments

applewirelessiconI recently bought an iMac for my sister. While setting it up, the Software Update would keep aborting due to network disconnects. While testing, I noticed my wireless G connection would start off fast, then drastically slow down, then pause for a minute, disconnect/reconnect, and finally just unable to connect. If I reboot, the behavior repeats. Strangely, my Macbook Pro and a Windows 7 desktop sitting nearby had no issues.

After hours of googling and trying out different suggestions, I came to the realization that the Apple wireless function is just very fickle. Wireless issues were attributed to the wireless hardware card, the firmware on the card, the Mac OS X version, the wireless driver, the Airport software version, the distance to the router, the type and model of the router, the type of connection (A, B, G or N), wireless channel used (1 thru 11), the encryption (no security, WEP, WPA, WPA2), and interference from Apple’s own bluetooth mouse/keyboard (if you use channel 6), wireless phones, walls, aquarium pump, neighbor’s routers, the metal kettle sitting on the stove, etc.

If you’re lucky and your Apple computer doesn’t have any issues with wireless, count your stars and if you are not, just pray that Apple will come out with a software fix soon. Or you can buy a wireless USB adapter (many have solved their wireless issues using this solution), but something sticking out of the back of the iMac defeats the reason to get an iMac (design cleanliness).

CNet’s MacFixIt Tutorial: Fixing Wireless connectivity is one of the better references I found. In addition to the tutorial suggestions, if you have an older router like a Wireless G router, I recommend disabling the IPv6 support as this might cause problems for your router and wireless connection. To disable IPv6 support, go to System Preferences->Network->Airport, click on the “Advanced…” button on the bottom right, select TCP/IP tab, change “Configure IPv6” to Off.

As a final test, I deployed a Wireless N router twice the distance away as my Wireless G router. The iMac connected to the Wireless N router and my wireless became 95% stable. There were still occasional drops but I could now watch Youtube videos at 360p. Strangely, I ran some wireless monitoring software (recommendations below) and the Wireless N signal was twice as bad as the Wireless G signal. Oh well, looks like this iMac puppy prefers Wireless N. Go figure.

During my investigation, I found some very cool and free (my second favorite word; my first is when you pay me) wireless monitoring software. Here are my recommendations:

  • If you are using Windows, get inSSIDer (better than NetStumbler!). I love inSSIDer’s graphical display that shows both signal strength and channel coverage (see below). You can see where the conflicts are and where the gaps are… so you can move your router channel there, assuming you’re lucky enough to have gaps.
  • If you are using Mac OS X, get iStumbler (NetStumbler for Mac?). It’s not as cool as inSSIDer, but it’s better than nothing.

Below is the inSSIDer graph for Wireless G from my Windows 7 desktop. My Wireless G router is in red and my temporary Wireless N router (supporting both G and N) is in yellow. I overwrote my SSIDs to protect my privacy while leaving the neighbors’ SSIDs visible (Muhuhaha… that’s evil laughter for the reading impaired). There is about 5-6 other wireless networks but they are so low power that they don’t show on the graph.

A month ago, it was just my nice neighbor, green 2WIRED732 (channel 8), and my Wireless G router (channel 11). Actually, my green neighbor is not too nice; he or she should be using channel 1 or 6, not 8. The recommendation is to keep 5 channels apart so in the 1-11 channel space, we should use 1, 6, and 11. Of course, this argument goes out the window when you have a lot of neighbors all over the channel spectrum.

Now, when I look at the graph, I see that my channel 11 space has been invaded by grey 2WIRE583… argh!!! And there is the evil blue belkin.3eb3 which is taking up both channels 3 and 7 (look at that wide channel coverage!). Between grey and evil blue, they have the whole 1 thru 11 channels covered! There is no gap.

That’s when an evil thought appear in my head. I need one router to rule over all other routers!

One Router to rule them all
One Router to find
One Router to bring me wireless
and in the congested emptyness to bind with!

I need the One Router that will cover the whole Wireless G and N channel spectrum (like my little friend, evil blue) and pump out 3-4 times the signal strength (need lotsa gigantic antenna and a backup generator). And maybe build an EM barrier around my house (time to stock up on aluminum foil?).

Yes, my precious! Yessss, my precioussss! Muhuhaha! (Again, that’s evil laughter for the… ah, never mind.)

No Comments

Keep Your Digital Life Secured

Internet No Comments

keepassYou’re living more of your life and doing more of your business on the Internet. You’re paying bills with online banking, checking your credit cards on the web, and shopping at several dotcom stores. Every one of those sites may require you to have an account with a username and password. To make it easy, you’re using the same password for all the sites (I hope not). Or you use several passwords but there are so many to remember, so you put them all in a little text file on your desktop or write them on a post-it note. Does this sound like you?

You have decided to digitized your legal documents to save space and to speed up searching. Or maybe you have taken the step to receive all or some of your documents, like bank statements, in digital format. You scan and save everything onto your hard drive. Does this also sound like you?

You have anti-virus and anti-spyware software running on your computer and doing frequent scans, weekly and maybe even daily. (If you don’t, see my post on free anti-virus and anti-spyware software). Hopefully, the software will protect your computer from having unscrupulous programs installed, which for example, could capture your keyboard inputs when you are logging into your banking website. But what prevents someone from stealing your computer (especially laptops) and reading your password text file and digitized legal documents? Would you be one of the many who can only say “nothing”?

Don’t lose hope. There are free software solutions which can help you protect your passwords and digitized documents. (Thanks very much to the software developers who donate their time and efforts to create these free tools!) Below are the two free programs that I use to secure my information. They work on both Windows and Mac OS X.

The first is Keepass which is a simple-to-use, secured password keeping utility. It is a lightweight text editor that saves any inputted text to a single, encrypted file. The file will grow if you add more text. Just run Keepass and input your Keepass password (which you set when creating the file) to view the encrypted text file. Keepass will lock itself if you don’t use it after a certain amount of inactivity time (by default, I think it is one minute). I use Keepass to keep information that I need to access often, such as passwords and other textual data. With Keepass, I can use a different password for each website and the passwords can be gibberish. (Please make sure to use a long Keepass password and practice typing it so you won’t forget.)

The second is TrueCrypt which can be considered as a secured, virtual hard drive utility. You can use TrueCrypt to create an encrypted file which can appear as a virtual hard drive. The virtual hard drive will show up in “My Computers” as just another drive letter. Any files you put into that virtual drive is stored in the encrypted file. The size of encrypted file cannot grow; so when you first create it, please pick a size which will fit your secure storage needs. (If you run out of space, just create use TrueCrypt to create a larger file, open the old and new files as virtual drives, and copy everything over to the new, larger drive.) Because the encrypted file acts like a hard drive, you can create folders and subfolders inside it to organize your files. Like Keepass, TrueCrypt requires a password to unencrypt the file and open it as a virtual hard drive. I use TrueCrypt as a secure storage for all my digitized documents.

Update: I’ve been using Truecrypt to encrypt a whole partition as NTFS. (I’ve also encrypted with FAT32 when I need Mac OS X to have read-write access.) There is a slow write issue that is caused by a combination of TrueCrypt with different storage controllers. For example, on my current desktop with an Intel C600+/C220+ SATA controller, encrypted write speed is limited to 20MBps to my SSD. This is very bad because normally I get unencrypted 400MBps write speed. (Veracrypt should have the same issue because it uses the Truecrypt code base.) I’m considering giving up cross-platform support by switching to Windows BitLocker.

Well, that’s it. As the doctor would say, that wasn’t too bad, right?

No Comments

Annoyance-Free Internet Browsing with Firefox and Adblock Plus

Internet No Comments

Update: While NoScript is a powerful tool, it is also a very complicated tool and hard to use. After I had used it for while, I realized that the safety it gave me was not worth the hassle of manually setting permissions for everything; not to mention that many useful sites (like banking websites) were broken unless I disabled NoScript. I think this manually-intensive permission setting by the user is also why Windows Vista failed so miserably.

adblockplusInstead of NoScript, I would like to recommend a very user-friendly plugin called Adblock Plus. Adblock Plus cuts down on the popups and ads without hassling me at all. Just use Firefox to browse to the Adblock Plus website, hit the green “Install Adblock Plus” button, and when Firefox restarts, accept the default Adblock Plus subscription setting. The subscription provides a blacklist which eliminates the need for Adblock Plus to prompt you to block content.

Safe Internet Browsing with NoScript (Original Posting Follows)

If you use Firefox, there is a great Firefox add-on called NoScript which makes internet browsing much safer with your cooperation.

NoScript prevents executable content (such as Javascript, Java, and Flash) from running on a web page unless you give it permission to. Executable content are used for stuff like showing video on a web page and are misused to infect your computer with viruses and spyware.

Once you have NoScript installed, when you go to a website, you will see at the bottom of Firefox a line bar with the Options button on the right. If you trust the website (such as www.bankamerica.com), then click on the Options button and select “Allow bankamerica.com”. From then on, executable content on that website will always be allowed to run.

If the page doesn’t look right, you can also temporarily allow the executable content to run by clicking on the Options button and selecting “Temporarily allow <website_url>”. If you come back to the website later, the executable content will not be allowed to run.

NoScript can make browsing a lot safer, but it can be a hassle at the beginning because you have to give permission for each website. Unfortunately, some web pages host executable content from different websites so you may have to give permission to two or three websites before the web page shows up okay.

If you’re interested, just run Firefox, browse to NoScript – JavaScript/Java/Flash blocker for a safer Firefox experience! and click on the “Add to Firefox” green button.

No Comments

Flex/Flash to STOMP to ActiveMQ

Internet 2 Comments

adobeflashplayerRecently, I wanted to look into writing a Flash client which uses the STOMP protocol to talk to an Apache ActiveMQ Server. I found this great blog, Flex chat application that uses Apache ActiveMQ and STOMP, that talks about creating a STOMP-based chat client using Flex. I tried to follow the blog and found that it was missing several installation steps and instructions on how to use the free Flex SDK. To save you the trouble, I’ve documented the missing steps below.

Note: I’ve never developed with Flash or Flex before but after some reading, I came to the realization that both were different ways of doing the same thing. Flash is an in-browser platform which uses the ActionScript language, similar to a Java Applet using the Java language. Flex could be considered as way to package ActionScript 3 (AS3) code, pre-built AS3 GUI libraries, and media files for compilation into a SWF file. This paragraph is probably totally inaccurate but it helps me keep things organized in my head.

First, download and unzip the latest Apache ActiveMQ Server to a directory like “c:\install\apache-activemq”.

  • Enable the STOMP support:
    • Open and edit “c:\install\apache-activemq\conf\activemq.xml”
    • Search for the text “<transportConnectors>”
    • Add the stomp connector definition under the existing openwire connector:
    <transportConnector name="openwire" uri="tcp://0.0.0.0:61616"/>
    <transportConnector name="stomp" uri="stomp://0.0.0.0:61613"/>
  • Run the ActiveMQ Server with this command: “c:\install\apache-activemq\bin\activemq.bat”. The ActiveMQ Server will start listening on ports 61616 and 61613.

Second, download and install the latest Flash Security Policy Server to a directory like “c:\install\flash-policy-server”. The Flash Security Policy Server allow cross-domain STOMP connections to be made from the Flex chat client.

Note: Adobe added cross-domain security restrictions to Adobe Flash 9 players and later versions. This restriction prevents the Flash player from connecting to another server or to a different port on the same server (such as the STOMP port 61613) from which the Flash player’s hosting HTML page was served. To allow the Flash player to talk to the different STOMP port 61613, we have to run a flash security policy server on the same hosting server with a configuration allowing the action.

  • Allow Flash clients to talk to the server’s Stomp port:
    • Open and edit “c:\install\flash-policy-server\resources\default_policy.xml”
    • Search for text “allow-access-from”
    • Under the allow access statement for port 8080, add a second line for the stomp port 61613:
    <allow-access-from domain="*" to-ports="8080" secure="false"/>
    <allow-access-from domain="*" to-ports="61613" secure="false"/>
  • Run the policy server with the command: “c:\install\flash-policy-server\start-policy-server.bat”. The policy server will listen on port 843.

Third, download and unzip the latest Adobe Flex SDK to a directory like “c:\install\flex-sdk”.

  • Add the Flex SDK bin directory to your path environmental variable:
    • Right-click on “My Computers” and select “Properties”. A dialog window will appear.
    • Click on “Advanced” tab and hit the “Environment Variables” button. A smaller dialog window will appear.
    • Double-click on the “Path” variable in either list boxes. An even smaller dialog window will appear.
    • Go to the “Variable value” edit field and append “;c:\install\flex-sdk\bin” to the end.
    • Hit OK, OK, OK.
  • Alternative, you can just run the following in the command prompt window before compiling with Flex: “set PATH=%PATH%;c:\install\flex-sdk\bin”

Fourth, download and unzip the STOMP Chat client source to a directory like “c:\projects\stompchat”.

  • Launch the Window command prompt application by going to Start menu, select “Run…”, type in “cmd”, and hit the OK button.
  • Go to the stompchat directory: “cd \projects\stompchat”
  • Compile the STOMP chat client using the Flex SDK compiler:
    mxmlc.exe -source-path=.\ .\StompChat.mxml -output .\StompChat.swf
  • Drag and drop the generated StompChat.swf file into two browser windows (the latest Firefox or IE will work). Login with any name and start chatting back and forth.

Congratulations! Hopefully everything worked for you.

If it didn’t, here are some debugging steps:

  • Manually connect to the ActiveMQ STOMP service to make sure it is actually running by following this Stomp Tutorial.
  • If you have the Java SDK installed, you can use JConsole to look at the ActiveMQ queue statistics.
    • Run “jconsole.exe” from the Java SDK bin directory.
    • Select “Local Process” and “run.jar start”. Click on Connect.
    • Click on “BMeans” tab
    • Expand “org.apache.activemq”, “localhost”, “Topic”, and “CHAT.DEMO” which is the queue name used by the STOMP chat client (if you open StompChat.mxml, you will see it defined as the topic variable)
    • Expand “Attributes” and select “QueueSize”. The QueueSize count should keep increasing as chat messages are received by ActiveMQ server. You will have to hit the Refresh button to update the count.

FYI, Integrating Flex and RabbitMQ using STOMP is another Flex STOMP example that sends an image file instead of just text chat messages. Here are the Flex SDK compilation commands for the example STOMP Image Share source:

mxmlc.exe -source-path=.\src\ -library-path+=.\libs\Stomp.swc .\src\ImageSender.mxml -output .\bin\ImageSender.swf
mxmlc.exe -source-path=.\src\ -library-path+=.\libs\Stomp.swc .\src\ImageReceiver.mxml -output .\bin\ImageReceiver.swf
2 Comments

Javascript to JSON to PHP (and back)

Internet 1 Comment

I was working on a little project that involved having a javascript client talk to a PHP backend using the JSON format. Of course, the first thing I did was to google for a simple example of this. Unfortunately, the info was scattered across several sites so it required some detective work to stitch together all the different data to get a working example.

To hopefully save you the time, I will provide a working example of how to get Javascript to talk to PHP using JSON. I will follow the time-honored tradition of providing a Hello World example. Even though it is very boring, it does demonstrate the bare essentials of the code.

Below is the Hello World PHP server script (let us call it “hello.php”). It parses a JSON-formatted post body and responds in kind.

<?php

// Retrieve the request body
// The request body is expected to look like:
// {
//   "firstName" : "John",
//   "lastName" : "Doe"
// }
$reqBodyJSON = @file_get_contents('php://input');
$reqObj = json_decode($reqBodyJSON);

// Retrieve the first and last name
$firstName = $reqObj->firstName;
$lastName = $reqObj->lastName;

// Construct our json response which will be an array
// of two possible replies
$response = array(
   "friend" => "Hi, ".$firstName."!  I'm glad to see you!",
   "foe" => "Goodbye, Mr. ".$lastName."!  Go away, please!"
);

// Output json response header and body
header('Content-type: application/json');
echo json_encode($response);

?>

Below is the Hello World HTML and Javascript client (let us call it “hello.html”). It will call the PHP server and display one of the two returned responses (selected randomly). The client uses a lightweight javascript framework called Prototype to facilitate the Ajax call to the server; we will need the “prototype.js” to be placed on the server for retrieval by the javascript client.

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Hello World!</title>

<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript">

function sayHello() {
  // Retrieve the values from the form
  var first = document.getElementById("firstName").value;
  var last = document.getElementById("lastName").value;

  // Construct request object
  var reqObj = {
    firstName : first,
    lastName : last
  };

  // Call the server
  new Ajax.Request('hello.php', {
    method : 'post',
    contentType : 'application/json',
    postBody : Object.toJSON(reqObj),
    requestHeaders : {Accept: 'application/json'},
    onSuccess : function (response) {
      // Get the response object
      var respObj = response.responseJSON;
      // Make our response random
      var isFoe = Math.floor(Math.random()*2+1); // 1 or 2
      var replyText;
      if (isFoe == 1) {
        replyText = respObj.foe;
      } else {
        replyText = respObj.friend;
      }
      document.getElementById("reply").value = replyText;
    },
    onFailure : function() {
      alert('Ajax call failed');
    }
  });
};

</script>
</head>

<body>
<h3>Hello World!</h3>

Please input your first and last name:
<form>
  First Name: <input id="firstName" type="textbox" value="George"><br>
  Last Name: <input id="lastName" type="textbox" value="Washington"><br>
  <input type="button" value="Say Hello" onclick="sayHello()">
  <br><br>
  Response: <input id="reply" type="textbox" readonly size="50"
             value="Press button for response!">
</form>
</body>
</html>

I hope that this example will help you in your explorations of web programming.

1 Comment

Secure Your Facebook Account

Internet No Comments

facebookBy default, Facebook will expose most of your info to everyone. To only allow your friends and family to access your most private info, you will need to configure Facebook to limit access.

  1. Log into Facebook
  2. Click on “Settings->Privacy Settings” on the top-right corner
  3. Click on “Profile”
    • Select “Only Friends” in all the options
    • Check the “Friends may post to my Wall” box
    • Click on “Save Changes”
  4. Click on “Contact Information” tab near the top
    • Select “Only Friends” on all the options
    • Click on “Save Changes”
  5. Click on the “Privacy” link near the top-left to go back to the main Privacy Settings
  6. Click on “Search”
    • Make sure that the “My friend list” is not checked; otherwise strangers will see your friends
    • Make sure that “A link to add me as a friend” is checked; otherwise folks won’t be able to request you as a friend. If you’re nice, you can check the “My profile picture” box also so that they can see your picture.
    • I left the “Search Visibility” set to “Everyone” and the “Create a public search listing” checked so that people can find me; but you can uncheck these two options if you want to.
    • Click on “Save Changes”
  7. Click on the “Privacy” link near the top-left to go back to the main Privacy Settings
  8. That’s it. You don’t need to adjust the other two sections, “News Feed and Wall” and “Applications”.

Congratulations, you have just secured your Facebook account.

No Comments

Next Entries »