Streaming Video: Creating a Professional uStream Show
Ian Lurie Sep 12 2007
A few weeks ago I streamed Conversations With the Candidates. Two years ago a project like that would’ve cost my client a small fortune to encode, stream and then deliver the video to a large audience.
This time? The price of my plane ticket, plus my time in Orlando.
The difference is a service called uStream.tv. With it, you can quickly create your own shows, then stream them, live and/or record them for later playback. This tutorial walks you through what I did, the tools I used, etc..:
I used two tools to create the show: CamTwist, to combine graphics with the video ‘on the fly’ and send the combination to uStream, plus Adobe FireWorks to create the graphics.
If you’re on the PC, CamTwist won’t work, but WebCam Max will. CamTwist is free. WebCam Max costs $29.95, but is well worth it. Plus their logo is great.
Part 1: The Foundation
In my experience, three things will make or break your show:
- Bandwidth: When you broadcast, your outgoing bandwidth will be very important. That’s your upload speed. Note that most cable and DSL providers give you high download speed, but lousy upload speed. At my house, for example, I get 4 megabits as my download speed, but only 500 kbps as my upload speed. I won’t get all geeky about it – suffice it to say I have a river for a download stream, and a small straw for upload. You can do a uStream show with only 300 kbps, but the video will stop and start a lot. For high-quality video, you’ll need at least 900 kbps, and more is better.
- The camera: The higher-quality the original video, the better the show. You can use your webcam (Apple’s iSight does a great job). But if you have a DV cam, you can use that for far better results. For my show, I got to go one better and get a stream directly from the TV cameras using a DAC converter.
- The computer: Really any laptop can handle uStream. I used a MacBook Pro (2 years old). If you’re going to use extra tools like CamTwist, make sure you have something fast: A Pentium PC or an Intel Macbook will do the trick. A slower laptop may not deliver the video as quickly as uStream needs it, which again will create stops and starts.
You can experiment to find the best configuration. As you’ll see below, you have a lot of control over your stream settings, so you can deliver something marginally viewable under almost any conditions.
Part 2: Prep Work
[Note: If this part makes no sense, just skip it. You don't have to create a graphic. It's just a nice touch. You can use many of CamTwist's other effects without any graphics at all. For example, the 'Text' effect will let you superimpose text without creating any graphics.]
You want the show to look professional. I’d decided in advance that I wanted to have a graphic superimposed over the video, news-style, like this:
To do that, I needed to first create the graphic. I used Adobe Fireworks. You can use Photoshop, or Paintshop Pro, or whatever you prefer. I used my client’s logo, plus a high-contrast color that would stand out against the video, over a transparent background. The transparency will let the video show through when you superimpose it. I added a drop shadow so the graphic would appear to float over the video:
I saved that as a .PNG graphic for later. You can use either PNG or GIF format – both support transparency. JPG won’t work.
Part 3: Set Up The Show
Before showtime, you’ll want to make sure you’ve got the graphics and the video all set up the way you want them. I’m going to use CamTwist in my example:
- Start up CamTwist.
- Click ‘Advanced’, next to ‘Settings’.
- Then click ‘stage’.
- Choose your video source. In my example, I’m using my iSight camera just for test purposes. You should now see your video feed.
- Choose any effects you want to use. Don’t go overboard. You can turn a great show into a fun house in no time at all. In my case, I picked the versatile Image Overlay. Double-click the effect.
- Click-and-drag the graphic you want into the lower right-hand window.
- Use the sliders below the settings area to scale and rotate the graphic as desired.
- You can set the transparency, too, but I don’t recommend it. Transparency effects will put a lot of strain on your audience’s computers. Be nice to their computers, OK?
- Then position it by dragging the button in the top settings window.
- Finally, save the effect so you can use it again later: Click ‘Save Setup’.
Part 4: Create the Show on uStream
This part’s easy – uStream walks you through the process.
- Go to uStream.tv.
- If you don’t already have one, create an account.
- Click ‘My Shows’.
- Then click ‘Create New Standard Show’.
- Fill out the form. Don’t worry about the show picture, etc. just yet.
- Pick your show options. The Chatbox is a great option – it involves the audience, and I highly recommend it.
- Click ‘Create Show’. You’ll see the show saved in your ‘My Shows’ list.
Part 5: Action!
Ready? Click ‘Go Live’.
- The uStream.tv Recorder window will appear. If it doesn’t, make sure you have turned off any popup blockers.
- The Flash Player will ask permission to use your camera. Click ‘Allow’.
- In CamTwist, click ‘Deploy’.
- Click ‘Advanced Settings’.
- Under ‘Video settings’, make sure you have ‘CamTwist’ selected.
- Under ‘Audio Settings’, select what makes sense. If you’re using an external microphone, select ‘Built-in Input’. If you’re using a DV cam, select ‘DV Audio’. Otherwise, you’ll probably use ‘Built-in Microphone’.
- Leave quality and FPS (frames per second) alone for now.
- Click ‘Apply’.
- Click ‘Start Broadcast’.
- If you want to record the show at the same time, click ‘start recording’.
That’s it – you’re now broadcasting.
Part 6: Tweaking Things
Streaming is a balancing act: The higher-quality your video, the more outgoing bandwidth it requires at your end, and the more incoming bandwidth it requires from your audience.
You may need to lower the sound or audio quality to compensate for bandwidth issues. Or, you may be able to increase quality. Here’s how you do it:
- In the uStream recorder window, click ‘Advanced’.
- The first thing I usually do is decrease the FPS, or Frames Per Second. You can go as low as 8 frames per second and still have a decent show, and this will save a lot of bandwidth.
- Next, try lowering the audio quality by selecting a lower kHz. At 5 kHz, it’s going to sound like your show is under water, so I suggest going no lower than 8, or even 11 kHz.
- Finally, lower the video quality. You can preview it in the recorder window, or by watching your own show.
It takes some practice, and I found that I had to raise and lower quality as my network got busier or quieter. If you have a chat room running as part of your show, you can just ask your audience. They’ll give you great feedback as to which settings work best. This isn’t TV – everyone works together, and your audience appreciates it when you ask.
Part 7: Customizing
You can use uStream’s site to deliver the video. You can also cut-and-paste the embedding code into your own site. Cut and paste the ‘Embed’ code and you’ll see the uStream show on your site. Cut-and-paste the ‘Embed Chat’ and you’ll get the chat room, too.
If you’re not sure, here’s one strong argument: The IAMAW saw a 100% increase in incoming links from major blog search engines Technorati and Bloglines when they ran their show:
Lots of Possibilities
uStream is very, very easy. Try it! If you’ve got any questions, post ‘em in the comments area, below.
Ian Lurie is CEO and founder of Portent Inc. He is co-author of the 2nd edition of the Web Marketing All-In-One for Dummies and wrote the sections on SEO, blogging, social media and web analytics. He's recorded training for Lynda.com, writes regularly for the Portent Blog and has been published on AllThingsD, Forbes.com and TechCrunch. And, Ian speaks at conferences around the world, including SearchLove, MozCon, SIC and ad:Tech. Read More
- Do You Use Data To Improve Your Website Design?
- How to use Intention.js for Responsive Design
- What Does a Degree in Architecture Have to Do with Web Design & Development?
- A Front-End Workflow For The Evolving Web
- Stop Writing Blog Posts: Ideas for Interactive Content
- Parallax Scrolling? HTML5 Animations? Why We’re Falling for New Design Techniques