Jaa

Picture-in-Picture Screencasts with Silverlight

  • Artikkeli

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

  • Anonymous
    August 19, 2007
    As the Dust Settles on Tech.Ed I find myself frantically preparing sessions for Web On The Piste . It

  • Anonymous
    August 29, 2007
    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.

  • Anonymous
    August 31, 2007
    Anna, You can increase the volume in Camtasia.  Have you tried that? Michael

  • Anonymous
    September 06, 2007
    What a cool use of two videos! eheh if only we supported alpha channels in video we could really have some fun :P

  • Anonymous
    September 06, 2007
    This is the type of experience I have been looking for.  Great work.

  • Anonymous
    September 07, 2007
    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!

  • Anonymous
    September 22, 2007
    Check this out - cool stuff! Synergist : Picture-in-Picture Screencasts with Silverlight

  • Anonymous
    September 22, 2007
    Check this out - cool stuff! Synergist : Picture-in-Picture Screencasts with Silverlight

  • Anonymous
    November 21, 2007
    The comment has been removed

  • Anonymous
    November 21, 2007
    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

  • Anonymous
    November 25, 2007
    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

  • Anonymous
    June 26, 2008
    I really like this application. Thank you!!