[Sample of Feb 29th] Story Creator Sample Application for Windows Phone 7

Article
02/29/2012

Sample download:
C# version: https://code.msdn.microsoft.com/CSWP7AzureVideoStory-2b9c3e12
VB version: https://code.msdn.microsoft.com/VBWPAzureVideoStory-ed1d5acc

Today’s code sample is a big sample application that combines many hot technologies such as Windows Phone 7, Windows Azure, HTML5, etc. This sample solution is a story creator for Windows Phone 7. You can use it to create photo stories on your phone, and send the stories to a Windows Azure service to encode them into videos. The Windows Azure Service includes a REST service built with WCF Web API, a simple HTML5 browser client that allows you to see encoded videos, and a native component encodes videos using WIC and Media Foundation. While individual pieces of technologies are very interesting, the true power comes when the platforms are combined. We know most developers need to work with the combined platform rather than individual technologies. So we hope this sample solution will be helpful to you.

The sample application was written by our star Sample Writer: Yi-Lun Luo.

You can find more code samples that demonstrate the most typical programming scenarios by using Microsoft All-In-One Code Framework Sample Browser or Sample Browser Visual Studio extension. They give you the flexibility to search samples, download samples on demand, manage the downloaded samples in a centralized place, and automatically be notified about sample updates. If it is the first time that you hear about Microsoft All-In-One Code Framework, please watch the introduction video on Microsoft Showcase, or read the introduction on our homepage https://1code.codeplex.com/.

Introduction

This sample solution is a story creator for Windows Phone 7. You can use it to create photo stories on your phone, and send the stories to a Windows Azure service to encode them into videos. The Windows Azure Service includes a REST service built with WCF Web API, a simple HTML5 browser client that allows you to see encoded videos, and a native component encodes videos using WIC and Media Foundation.

While individual pieces of technologies are very interesting, the true power comes when the platforms are combined. We know most developers need to work with the combined platform rather than individual technologies. So we hope this sample solution will be helpful to you.

Use the Application

When you launch the client application, on the first screen you’ll find 3 buttons. They allow you to create a new story, or working on an existing one.

No matter which option you choose, eventually you’ll be taken to the compose page. On this page, you can click the add button on the application bar to add new photos to the story.

This will take you to the choose photos page. On this page, you can choose multiple photos by tapping on them. Tapping an already selected photo will remove the selection. Flip horizontally on the page to scroll the photo list. If there’re too many photos in your phone’s media library, up to 20 will be displayed on a single page. You can use the button with left/right arrows in the application bar to navigate to previous/next pages. Click the button with the check mark to finish the selection.

Once you have added some photos to the story, select one on the design surface, and click the edit button in the application bar. This will bring up a form, in which you can configure how to display the selected photo in the slide show as well as the encoded video. Note in this release, batch editing is not supported. You can of course also remove the selected photo from the story by clicking the remove button. Flip horizontally to scroll the photo list.

After you’re satisfied with your configuration, click the preview button (the first button in the above screenshot). This will navigate you to a full screen page, which displays a slide show of the photos based on your configuration.

You can also click the “…” button in the application bar, which will bring up more menu items, including a menu item labeled “upload”. This command allows you to upload the story and all selected photos to the Windows Azure cloud service. To test this feature, you’re required to either host the cloud service project using your Windows Azure account, or start the cloud service project using Compute Emulator. See below for more technical information.

The video encoding may take a while, depending on the size of the story. As for now, after the encoding is finished, you won’t get any notifications. We may improve the experience by integrating push notification in the next release. But you can check the home.htm page inside the Web Role (navigate to https://127.0.0.1:81/ or your cloud deployment). If the video is successfully encoded, after refresh the page, you’ll see it displayed. Click a video’s name to play it on the left side, or download it by clicking the corresponding Download link.

Prerequisites

To build and run the sample, the following system is required:

Windows 7. Windows Phone SDK requires you to use Windows Vista or Windows 7. Our native encoding component requires new features in Windows 7 (such as sink writer). Thus the only supported operating system is Windows 7. We recommend you to use a 64 bit OS, although a 32 bit OS will also work with some extra configuration (refer to the next section for more information).
Visual Studio 2010 with SP1
Windows Phone 7 SDK (Mango SDK will also be fine, but this sample is built with WP7)
Silverlight Toolkit for Windows Phone 7
Latest Visual Studio Tools for Windows Azure
WCF Web API Preview 4 (If you use a newer version, you may need to fix a few break changes)
A browser capable of playing HTML 5 mpeg4 videos (such as IE9)

Build and Deploy the Solution

To build the source solution, first please make sure you meet all system requirements described above.

If you are using a 32 bit OS, you need to configure the NativeEncoderProject to build against win32, instead of x64. Note if later you decide to deploy the cloud service to the cloud, you need to change the configuration back to x64, as Windows Azure cloud machines use 64 bit OS.

Certain references, such as Microsoft.ApplicationServer.Http, may require special attention, because the path on my machine is different from yours. You may need to remove the references, and add again using the correct path.

Then configure the StoryCreatorCloudService project as the start project (the cloud service project), if it’s not already configured.

Start the StoryCreatorCloudService project, and make sure it has finished startup.

Start the VideoStoryCreator project (the Windows Phone project) in either the emulator or an actual phone.

Enjoy!

Technical Details

For more information about technical details, please refer to the documents under the Specs folder. Architecture.docx describes the overall architecture of the source solution. How to Create More Transitions.docx describes how to extend the transition system. Other documents are design specifications written when we designed each feature.