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:
- Record a screencast with webcam video using Camtasia Studio.
- Once you've recorded the video, open the video to edit it.
- Right-click on the .camrec file and select Extract Camrec contents...
- Import the *_Camera_Stream.wmv file and the *_Screen_Stream.avi files into Expression Media encoder.
- 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.
- 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.
- 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.