robmello.com: Add Streaming Video to TypePad Blog with Stickam

Fullstickinterface Stickam™ allows you to easily place streaming video on your blog and/or web site. The video is uploaded via the Flash browser plug-in and displays as a flash movie - NICE!

However, if you copy and paste the Stickam code as the site suggests, you’ll get a very busy full-sized 160 x 400 interface on your blog that takes up a lot of real estate. (See the image to the left.)

If you are not planning on using the chat features, and simply want a streaming web-cam, then you can mask the display using HTML and have a nice streaming video window on your web site or blog. Here’s how to do it:

Step 1. Install your web cam.

Step 2. Get your free Stickam account.

Step 3. Click on the GO LIVE button.

Golivebutton

Step 4. Copy the HTML from the Stickam code window. You’re not going to use the whole thing. You’re only interested in the code between the EMBED tags.

Step 5. Place the following HTML code in your web page or blog post. Be sure to replace the code within the EMBED tags with the code copied from your Stickam account.

<div id="camscroll" style="BORDER-RIGHT: #666 0px solid; PADDING-RIGHT: 0px; BORDER-TOP: #666 0px solid; DISPLAY: block; PADDING-LEFT: 8px; FLOAT: right; PADDING-BOTTOM: 0px; MARGIN: 0px; SCROLLBAR-HIGHLIGHT-COLOR: #f8f8f8; OVERFLOW: auto; BORDER-LEFT: #666 0px solid; WIDTH: 184px; SCROLLBAR-SHADOW-COLOR: #f8f8f8; SCROLLBAR-3DLIGHT-COLOR: #f8f8f8; SCROLLBAR-ARROW-COLOR: #f8f8f8; PADDING-TOP: 0px; SCROLLBAR-TRACK-COLOR: #f8f8f8; BORDER-BOTTOM: #666 0px solid; SCROLLBAR-DARKSHADOW-COLOR: #f8f8f8; HEIGHT: 123px"> <embed src="http://www.stickam.com/flashVarChatPlayer/11111111-0" width="160" height="400" type="application/x-shockwave-flash" allowscriptaccess="always"></embed> </div> <p>Welcome to my live web cam.</p>

This will launch a new browser window. You will be asked if it is OK for FLASH (installed in your browser) to access your camera and microphone. You will have to click Allow and leave that window running for as long as you want to stream your web cam.

Flashdialog

The code creates a DIV which masks the FLASH player so that you only get the video display portion of the Stickam application. If you’re a web developer, you may be asking, "Why are you using OVERFLOW:auto instead of OVERFLOW:hidden and then adding all those SCROLLBAR attributes to hide the scroll bar?" Good question! Unfortunately, FireFox doesn’t handle OVERFLOW:hidden properly with FLASH. The entire FLASH section spills outside of your DIV. I explored several solutions which I will describe below.

Option 1. Use JavaScript to set the DIV attributes.

The following JavaScript will set the DIV attributes to OVERFLOW if you're using an IE browser. This solution worked, but had two problems. It leaves room for the scrollbars so there is extra room to the right of the image, and if you have a page with a bunch of stuff on it, then IE will draw the scroll bar and then hide it. Seeing this happen isn't very desirable.

<SCRIPT LANGUAGE="JavaScript1.2"></SCRIPT>

There is a better way to completely hide the scroll bar on IE browsers without seeing the bar flash briefly by setting the following SCROLLBAR and FILTER attributes. However, it still results in too much space to the right of the image:

FILTER: chroma(color=FFFFFF);
SCROLLBAR-FACE-COLOR: #ffffff;
SCROLLBAR-HIGHLIGHT-COLOR: #ffffff;
SCROLLBAR-SHADOW-COLOR: #ffffff;
SCROLLBAR-3DLIGHT-COLOR: #ffffff;
SCROLLBAR-ARROW-COLOR: #ffffff;
SCROLLBAR-TRACK-COLOR: #ffffff;
SCROLLBAR-DARKSHADOW-COLOR: #ffffff;

I finally decided to show the scrollbar with subtle colors so that the image is framed nicely with the code at the top of this post. Even though I would like to not show the scrollbars at all, the alternatives of having the element behave badly in FireFox or leaving too much room to the right of my image were not desirable.