For those web developers out there who are familiar with Casey Reas and Ben Fry‘s Processing programming language, you might have encountered a standstill when it came to sharing your sketches that use the computer’s video webcam.  Sure the libraries make webcams easy to use, giving you online support on the official website and quick results when you run the program. But what about publishing your webcam sketches to an internet browser? Why do you get the white box of death?

Objective

The browser needs to alert the users that your program needs access to their webcam. Permission must be set first before anything can be shown. In order to make the browser ask this vital question you must sign your .jar files. Signing prevents your program from being blocked (a.k.a. white box of death) and gives it online ownership for security’s sake. The process must be redone every six months or so to maintain ownership credibility. Since you will be using at least one library (for webcam use), you will not only need to sign one .jar file but multiple .jar files. In my case I had to sign four.

Requirements

• Terminal (Mac OS X) or HyperTerminal (Windows 95 – XP)
  • List of other terminal emulators

Steps

1. After you export your Processing sketch, move the applet folder to your desktop. This is optional yet it makes it really easy for people who are shaky when it comes to making commands in Terminal. Once you know the exact location of the applet folder, open it to see the names of your .jar files. Write them down or keep the folder open so you can see them. Now open the terminal emulator of your choice.
2. The first command is simply finding your applet folder. Yes, there is a single space after “cd”. Spaces are important!

   cd ~/Desktop/applet

   Press Enter/Return to make the command. Nothing should really happen, but to see if you actually found the folder you can make another command.

   ls

   This will list everything in the applet folder. If you don’t recognize any the files listed or nothing shows up, you didn’t put in the correct path.

3. Now that you have found the applet folder in Terminal, you will need to make a pKeyStore file that is secured with two passwords and an alias of your choosing. These are in bold if you want to change them, but this command will work for anyone as long as they remain consistent. Capitalization is important!

   keytool -genkey -keystore pKeyStore -storepass p5store -keypass p5keys -alias p5geek

4. Terminal will now ask for ownership details like organization name, etc. If you go fast on this part you can miss the last question where it asks you to confirm that the information you supplied is true. If you type just anything you will be forced to start all over again. Type “Yes” and you will ready for Step 5.
5. The pKeyStore file that has been created in the applet folder has your information at this point. However, you will now have to self-certify each .jar file using the passwords and alias you established in Step 3. You can initialize this by the following command (Note: The passwords and alias are in bold in case you changed them):

   keytool -selfcert -keystore pKeyStore -storepass p5store -keypass p5keys -alias p5geek

6. The command to self-certify a .jar file is simple. You will use “jarsigner” instead of “keytool” along with the usual stuff (keystore name, two passwords and alias). The one other crucial change is the name of the .jar file. It goes before the alias. You must do this command for each .jar file in the applet folder in order for the program to work online (Note: The .jar file is in bold to show what is the changing part of the command):

   jarsigner -keystore pKeyStore -storepass p5store -keypass p5keys core.jar -alias p5geek

   For example, after this command you would type everything out again but replace “core.jar” with “video.jar” (or whatever the other .jar file is named) until all .jar files have been signed. You will know this by the confirmation message Terminal will give you after each command.

7. Upload the applet folder to your web server or run the program through your local server and see the alert box that the browser gives you. Click “Allow Access” and you are good to go! Just remember this process six months from now when you have to renew the certification.
   

My blog has now been opened to the public! I built the theme upon Mujtaba‘s Silver Dreams 1.4 and I am running WordPress 3.0.1, the latest install at present. This is the first time I have ever made my own WordPress theme. I was forced to do it since CodeIgniter, the PHP framework that built my portfolio website with, does not (or should not) integrate with WordPress. Both systems are good at what they do so they should be considered as separate entities. The best way I found to “integrate” them was to create my own WordPress theme that mimicked the CodeIgniter side of my site. And voila! There you go. I enjoy learning new computer languages so exploring the WordPress codex was fun. I’ll probably change a few things around now and then, but at this point I feel ready to take my blog out of hiding. I hope you like it.

So what do you expect to read from this blog? I’ll keep it professional with some random things every now and then. I love to share code ever since I learned crowd-sourcing my senior year in college. I have a few posts in mind already – helpful tips/resources that helped me design a couple of my projects as well as a slice of my own “genius.” Stay tuned.