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

Comments (12)

  1. As the Dust Settles on Tech.Ed I find myself frantically preparing sessions for Web On The Piste . It

  2. anna says:

    This may seem self evident to you, but I’m just starting out in screencasting and need some help here.  Can I enhance already produced camrec audio files and separate them to put into my mac to oomp up the voice narration?  And then re-import them into the camrec file.  Thing is, the website is in Dreamweaver, where it’s already stored on the server and I want to put it back there- reason why I’m working with two machines here.  Thanks for any help.  And can you point me to any forums you recommend.

  3. mscherotter says:

    Anna,

    You can increase the volume in Camtasia.  Have you tried that?

    Michael

  4. scbarnes says:

    What a cool use of two videos! eheh if only we supported alpha channels in video we could really have some fun 😛

  5. This is the type of experience I have been looking for.  Great work.

  6. Ben says:

    Very cool!  However, there were times that the video of your face would stop and the screencast would keep going.  Then the two videos would be out of sync.  Still very cool, though.  Keep up the good work!

  7. Check this out – cool stuff! Synergist : Picture-in-Picture Screencasts with Silverlight

  8. Check this out – cool stuff! Synergist : Picture-in-Picture Screencasts with Silverlight

  9. Michael A Griffey says:

    It may be really cool. I can’t see it though. All I see is the "Get Microsoft Silverlight" button. It’s a pretty button though.

    I know what you’re thinking. Just click the button and install it. Problem is, I already did that and I already installed Silverlight 1.1 Alpha Refresh.

    XP using FF 2.0.0.9 and IE6(government office required)

    If all your end user sees is the pretty little “Get Microsoft Silverlight” button, they will leave your site in a Flash.

  10. mscherotter says:

    Michael,

    That’s odd.  Can you please mail me at http://blogs.msdn.com/synergist/contact.aspx so we can get to the bottom of it?

    Thanks,

    Michael

  11. mscherotter says:

    Michael,

    This is being hosted on Silverlight Streaming and they just added a feature to set the background bitmap so you know what to see if you install Silverlight.

    I just haven’t added it to this solution.

    Michael

  12. EricLi says:

    I really like this application. Thank you!!