Picture-in-Picture Screencasts with Silverlight

In a post I just made, I wanted to show a picture-in-picture screencast of what I did with Groove and Virtual Earth.  I created a Silverlight application (that you can steal)with Expression Blend to host two parallel video streams in a picture-in-picture scenario.  Here is my workflow:

  1. Record a screencast with webcam video using Camtasia Studio.
  2. Once you've recorded the video, open the video to edit it.
  3. Right-click on the .camrec file and select Extract Camrec contents...
  4. Import the *_Camera_Stream.wmv file and the *_Screen_Stream.avi files into Expression Media encoder.
  5. Encode both files into WMV files at an appropriate bitrate and size for your content and audience.  For hosting on Silverlight.live.com, each video stream must be less than 22MB.
  6. I had created Silverlight application in Expression Blend (attached) that supports picture-in-picture.  In Scene.xaml.js, specify the two new WMV files in the PrimaryMedia and SecondaryMedia variables at the top of the file.
  7. Upload the files to Siverlight.live.com

Here are some features of the Picture-in-Picture app:

  • Picture-in-picture (me talking) has a radial gradient opacity so it appears over the primary video in a faded-in way.
  • Picture-in-picture can be swapped with the primary video in real time by clicking on the swap button in the upper right of the controls.
  • controls auto hide when moving the mouse away from them.
  • buttons animate their functionality.
  • full screen button switches to full screen in real-time
  • You can very easily adapt it to use your video streams by modifying the two javascript variables at the top of scene.xaml.js.
  • I have attached the source code (without the videos) so you can see it in action.

Silverlight PictureInPicture.zip