sharepoint 2010 and azure: blob storageaz12722.vo.msecnd.net/.../spblobstorageazure1-0/lab.docx ·...
TRANSCRIPT
Hands-On LabSharePoint 2010 & Azure: Blob Storage
Lab version: 1.0
Last updated: 5/24/2023
CONTENTS
SECTION 1: SMOOTH STREAMING VIDEO FROM BLOB STORAGE....................................................2Overview.................................................................................................................................................3
Exercise 1: Smooth Streaming Content...................................................................................................4
Task 1 – Installing the Expresion Encoder Publishing Plugin................................................................5
Task 2 – Publishing the Content...........................................................................................................5
Exercise 2: Smooth Streaming in SharePoint 2010..................................................................................6
Task 1 – Playing the Video in SharePoint 2010....................................................................................6
Task 2 – Creating a Time-Limited Uri...................................................................................................7
Summary.................................................................................................................................................9
SECTION 2: SHAREPOINT 2010 VIDEO LIBRARY................................................................................10Overview...............................................................................................................................................10
Exercise 1: Populating Blob Storage......................................................................................................11
Task 1 – Creating the Web Role Project.............................................................................................11
Task 2 – Creating the User Interface..................................................................................................12
Task 3 – Creating a Data Class............................................................................................................15
Task 4 – Initiating Azure Storage........................................................................................................15
Task 5 – Coding Project Functionality...............................................................................................16
Task 6 – Testing the Solution.............................................................................................................18
Task 7 – Deploying the Web Role to Azure........................................................................................20
Task 8 – Playing Videos in SharePoint 2010 Media Player.................................................................21
Exercise 2: Creating a Media Player.......................................................................................................21
Task 1 – Creating the Intermediate REST Service...............................................................................21
Task 2 – Creating the Silverlight Project............................................................................................24
Task 3 – Coding the Silverlight Application........................................................................................25
Task 4 – Deploying the Solution to SharePoint 2010.........................................................................28
Summary...............................................................................................................................................29
Section 1: Smooth Streaming Video from Blob Storage
Overview
In this lab, you will build a Silverlight Media Player that plays videos stored in Azure Blob Storage. The player will utilize “Smooth Streaming”, which is the Microsoft HTTP-based adaptive streaming protocol. This approach uses HTTP progressive download to download and play chunks of a video stream.
Objectives
In this lab, you will:
Learn to create a Silverlight Media Player.
Learn to store videos in Azure Blob Storage.
System Requirements
You must have the following items to complete this lab:
Windows Azure SDK and Windows Azure Tools for Microsoft Visual Studio
Access to a Windows Azure account
Expression Blend
Setup
This lab uses several tools and resources that must be downloaded and installed prior to starting the lab. These resources are:
The Big Buck Bunny video
Adaptive Streaming with Windows Azure Blobs Uploader
Azure Storage Explorer
Download the Big Buck Bunny video from http://mirrorblender.top-ix.org/peach/bigbuckbunny_movies/big_buck_bunny_480p_stereo.avi and save it in a working directory.
Download the Adaptive Streaming with Windows Azure Blobs Uploader (AdaptiveStreamingAzure_binaries.zip). Unzip the files into the same working directory where you placed the Big Buck Bunny video.
Download the Azure Storage Explorer. Run AzureStorageExplorer4.msi to install the tool.
The Windows Azure SDK (included in Windows Azure Tools for Visual Studio) installs a simulation environment on your development machine for testing Azure applications locally before deploying them to the cloud. The simulation environment consists of the development fabric to host web and worker roles, and the development storage which simulates cloud blob, table and queue storage locally.
Development storage uses SQL Server as its underlying storage mechanism, and by default the SDK will attempt to configure it to use SQL Server Express. If you do not have SQL Server Express installed before installing the SDK, or you wish to simply use an existing SQL Server instance to host the development storage database, you must run the dsinit command to select the SQL Server instance where the database will be created.
Please see instructions below for how to run dsinit.
Using dsinit to Configure Development Storage
1. Open a command prompt.
2. Edit the following command line as appropriate for your environment, where [AzureSDKInstallDrive] is the drive where you installed the Azure SDK (or Windows Azure Tools for Visual Studio), and [YourSqlInstance] is the SqlServer where you want to create the development storage database.
[AzureSDKInstallDrive]\ Program Files\Windows Azure SDK\v1.3\bin\devstore\dsinit.exe /sqlinstance:[YourSqlInstance]
Example Command Line:“C:\Program Files\Windows Azure SDK\v1.3\bin\devstore\dsinit.exe” /sqlinstance:.
3. Note that the sample command line above uses the value “.” for the sqlinstance argument, which specifies that the local default SQL instance will be used for development storage.
Exercises
This Hands-On Lab is comprised of the following exercises:
1. Smooth Streaming Content
2. Smooth Steaming in SharePoint 2010
Estimated Time to complete this lab: 30 minutes
Exercise 1: Smooth Streaming Content
In this exercise, you will create the smooth streaming content to upload into Azure. Then you will play the content in a SharePoint 2010 site.
Task 1 – Installing the Expresion Encoder Publishing Plugin
In this task, you will install the Expression Encoder Publishing Plugin for creating the smooth streaming content.
1. Open a Command Prompt window running as administrator on your machine.
2. Change the directory to the EncoderPlugin directory associated with the Adaptive Streaming with Windows Azure Blobs Uploader binaries you downloaded during the exercise setup.
3. Execute install.cmd.
Task 2 – Publishing the Content
In this task, you will create the smooth streaming content and publish it to Azure.
1. Open Microsoft Expression Encoder 4.
2. In the Load a New Project screen, click Silverlight Project.
3. In Expression Encoder 4, click Import.
4. In the Import Media Files, navigate to the video you downloaded earlier and click Open.
5. Right click the video and select Apply Preset>Encoding for Silverlight>IIS Smooth Streaming>VC-1 IIS Smooth Streaming - SD 480p VBR.
6. In the Publish Window, select Windows Azure Adaptive Streaming Publisher from the Publish To drop-down list.
7. Check the Publish After Encode box.
8. Enter the Account Name for your Azure account.
9. Enter the Account Key for your Azure account.
10. In the Path field, enter smoothstreaming.
Figure 1Publish Settings
11. Select File>Save Job from the main menu and save the project with the name SmoothStreamingEncoding.
12. Click Encode.
13. After the encoding and uploading process is complete, the browser will open with the video running.
Exercise 2: Smooth Streaming in SharePoint 2010
In this exercise, you will play the smooth streaming content in a SharePoint 2010 site.
Task 1 – Playing the Video in SharePoint 2010
In this task, you will play the smooth streaming video in SharePoint 2010.
1. Run the Azure Storage Explorer you installed as part of the lab set up.
2. When prompted, add your account information.
3. Click the Blobs button in the ribbon.
4. Double click the smoothstreaming folder to display all of the files previously uploaded into Azure.
5. Double click the MediaPlayerTemplate.xap file to open the Properties window.
6. Record the Absolute Uri to the package for use in SharePoint 2010 later.
7. Double click the Manifest file.
8. Record the Absolute Uri to the Manifest for use in SharePoint 2010 later
9. Open a SharePoint 2010 site and optionally add a new page for hosting web parts.
10. Select Site Actions>Edit Page.
11. Click Insert>Web Part in the ribbon.
12. In the Media and Content category, select the Silverlight Web Part and click Add.
13. In the Silverlight Web Part dialog, enter the absolute Uri to the MediaPlayerTemplate.xap file and click OK.
14. Click Edit Web Part.
15. Under the Other Settings category, click Custom Initialization Parameters.
16. Put the following string in this field being careful to enter the absolute Uri for your manifest.
XML
playerSettings=<Playlist><AutoLoad>false</AutoLoad><AutoPlay>false</AutoPlay><DisplayTimeCode>false</DisplayTimeCode><EnableOffline>true</EnableOffline><EnablePopOut>true</EnablePopOut><EnableCaptions>true</EnableCaptions><EnableCachedComposition>true</EnableCachedComposition><StretchNonSquarePixels>NoStretch</StretchNonSquarePixels><StartMuted>false</StartMuted><StartWithPlaylistShowing>false</StartWithPlaylistShowing><Items><PlaylistItem><AudioCodec>WmaProfessional</AudioCodec><Description></Description><FileSize>510330196</FileSize><IsAdaptiveStreaming>true</IsAdaptiveStreaming><MediaSource>THE ABSOLUTE URI TO YOUR MANIFEST BLOB CONTAINER</MediaSource><ThumbSource></ThumbSource><Title>big_buck_bunny_480p_stereo</Title><DRM>false</DRM><VideoCodec>VC1</VideoCodec><FrameRate>24.0000384000614</FrameRate><Width>852</Width><Height>480</Height><AspectRatioWidth>16</AspectRatioWidth><AspectRatioHeight>9</AspectRatioHeight></PlaylistItem></Items></Playlist>
17. Click OK and the video should begin to play.
Task 2 – Creating a Time-Limited Uri
In this task, you will create a tme-limited URL for the video so that it can be played for only a specified period of time..
1. Run the Azure Storage Explorer you installed as part of the lab set up.
2. Click the Blobs button in the ribbon.
3. Click the smoothstreaming folder.
4. Click the Manifest file.
5. Click the Security button in the ribbon.
6. In the Blob & Container Security dialog, click the Shared Access Policies tab.
7. In the Policy Name field type Time Limited.
8. Check the Read box.
9. In the Start Time and Expiry Time boxes, enter a time range.
Figure 2Shared Access Policies
10. Click Save Policies.
11. Close the Blob & Container Security dialog.
12. Click the Security button in the ribbon.
13. In the Blob & Container Security dialog, click the Shared Access Signatures tab.
14. Make sure the Container Name is set to smoothstreaming and the Blob Name references the Manifest file.
15. In the Policy drop-down list, select the Time Limited policy.
16. Click Generate Signature.
Figure 3Shared Access Signatures
17. Click Copy to Clipboard.
18. Click the Container Access tab.
19. Change the Container Access Level to Private.
20. Click Update Access Level.
21. Click Close.
22. Return to the page where the Silverlight Web Part is located and edit the web part properties.
23. Under the Other Settings category, click Custom Initialization Parameters.
24. Carefully replace the value of the MediaSource element with the value you copied from the Azure Storage Explorer.
25. Escape all of the ampersands in the new MediaSource element with & or the resulting XML will be invalid.
26. Save the changes and play the video.
Summary
In this lab you learned about smooth streaming video. You used community tools to convert a video and save it into Azure blob storage. You then used the available Silverlight web part in SharePoint 2010 to play the video.
Section 2: SharePoint 2010 Video Library.
Overview
In this lab, you will create a video library and media player for SharePoint 2010. The videos will be stored as blobs in Azure and played through a custom Silverlight application.
Objectives
In this lab, you will:
Learn to manage and utilize blob storage in Azure
Learn to access blobs storage through Silverlight
System Requirements
You must have the following items to complete this lab:
Windows Azure SDK and Windows Azure Tools for Microsoft Visual Studio
Access to a Windows Azure account
Visual Studio 2010 Power Tools extension
Silverlight SharePoint Web Parts extension
Setup
Download and install the Visual Studio 2010 SharePont Power Tools extension. This is an extension for Visual Studio 2010 that supports creating Sandboxed Visual Web Parts.
Download and install the Silverlight SharePoint Web parts.This is an extension for Visual Studio 2010 that supports creating Silverlight wbe parts.
The Windows Azure SDK (included in Windows Azure Tools for Visual Studio) installs a simulation environment on your development machine for testing Azure applications locally before deploying them
to the cloud. The simulation environment consists of the development fabric to host web and worker roles, and the development storage which simulates cloud blob, table and queue storage locally.
Development storage uses SQL Server as its underlying storage mechanism, and by default the SDK will attempt to configure it to use SQL Server Express. If you do not have SQL Server Express installed before installing the SDK, or you wish to simply use an existing SQL Server instance to host the development storage database, you must run the dsinit command to select the SQL Server instance where the database will be created.
Please see instructions below for how to run dsinit.
Using dsinit to Configure Development Storage
1. Open a command prompt.
2. Edit the following command line as appropriate for your environment, where [AzureSDKInstallDrive] is the drive where you installed the Azure SDK (or Windows Azure Tools for Visual Studio), and [YourSqlInstance] is the SqlServer where you want to create the development storage database.
[AzureSDKInstallDrive]\ Program Files\Windows Azure SDK\v1.3\bin\devstore\dsinit.exe /sqlinstance:[YourSqlInstance]
Example Command Line:“C:\Program Files\Windows Azure SDK\v1.3\bin\devstore\dsinit.exe” /sqlinstance:.
3. Note that the sample command line above uses the value “.” for the sqlinstance argument, which specifies that the local default SQL instance will be used for development storage.
Exercises
This Hands-On Lab is comprised of the following exercises:
1. Populating Blob Storage
2. Creating a Media Player
Estimated Time to complete this lab: 60 minutes
Exercise 1: Populating Blob Storage
In this exercise, you will create a web role project to populate blob storage with videos.
Task 1 – Creating the Web Role Project
In this task, you will create a new web role project.
1. Start Visual Studio 2010.
2. Select File>New Project from the main menu.
3. In the New Project dialog, select Visual C#>Cloud>Windows Azure Project.
4. Name the new project AzureVideoManager and click OK.
5. In the New Windows Azure Project dialog, select ASP.NET Web Role.
6. Use the arrows to add the new web role to the solution.
7. Hover over the web role project and click the pencil icon.
8. Rename the web role VideoBlobManager and click OK.
Task 2 – Creating the User Interface
In this task, you will create the user interface for the web role.
1. In the Solution Explorer, open Default.aspx for editing in Source view.
2. Replace the markup in the page with the following code.
ASPX
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="VideoBlobManager._Default" %>
<html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title>Video Blob Manager</title></head><body> <form id="form1" runat="server"> <table> <tr> <td><strong>My Videos</strong></td> <td> </td> </tr> <tr> <td><strong>Submit</strong></td> <td>Click Browse, provide a name and select a category</td> </tr> <tr> <td> <asp:Label ID="filePathLabel" Text="Video Path:" AssociatedControlID="videoUploadControl" runat="server" Style="font-family: Calibri; color: #000066;" /> </td> <td>
<asp:FileUpload ID="videoUploadControl" runat="server" Style="font-family: Calibri" /> </td> </tr> <tr> <td> <asp:Label ID="videoNameLabel" Text="Video Name:" AssociatedControlID="videoNameBox" runat="server" Style="font-family: Calibri; color: #000066;" /> </td> <td> <asp:TextBox ID="videoNameBox" runat="server" Width="220px" /> </td> </tr> <tr> <td> <asp:Label ID="categoryLabel" Text="Category:" AssociatedControlID="dropdwnCategory" runat="server" Style="font-family: Calibri; color: #000066;" /> </td> <td> <asp:DropDownList ID="dropdwnCategory" runat="server" Width="220px"> <asp:ListItem>Technical</asp:ListItem> <asp:ListItem>Marketing</asp:ListItem> <asp:ListItem>Business</asp:ListItem> <asp:ListItem>Sales</asp:ListItem> <asp:ListItem>Travel</asp:ListItem> <asp:ListItem>Personal</asp:ListItem> </asp:DropDownList> </td> </tr> <tr> <td> </td> <td> <asp:LinkButton ID="lnkbtnSubmitVideo" runat="server" Font-Names="Calibri" OnClick="SubmitVideo_Click"> Submit Video</asp:LinkButton> | <asp:LinkButton ID="lnkbtnClearFields" runat="server" Font-Names="Calibri" OnClick="ClearFields_Click"> Clear Fields</asp:LinkButton> </td> </tr> <tr>
<td> <strong>View & Delete</strong> </td> <td> Click Delete to delete a specific video </td> </tr> <tr> <td> <asp:Label ID="lblDataGrd" runat="server" Text="Video List:" Style="color: #000066;font-family: Calibri"></asp:Label> </td> <td> <asp:GridView ID="videoList" AutoGenerateColumns="false" DataKeyNames="FileUri" runat="server" OnRowCommand="RowCommandHandler" Font-Names="Calibri" Font-Size="Small" Width="296px"> <AlternatingRowStyle BackColor="#99CCFF" Font-Names="Calibri" Font-Size="Small" /> <Columns> <asp:ButtonField HeaderText="Delete" Text="Delete" CommandName="DeleteVideo" /> <asp:HyperLinkField HeaderText="Link & Title" DataTextField="VideoName" DataNavigateUrlFields="FileUri" /> <asp:BoundField DataField="Category" HeaderText="Category" /> <asp:BoundField DataField="DateSubmitted" HeaderText="Date Submitted" /> </Columns> <HeaderStyle BackColor="#000099" Font-Bold="True" ForeColor="White" /> </asp:GridView> </td> </tr> </table> </form></body></html>
Figure 4User Interface for Video Manager
Task 3 – Creating a Data Class
In this task, you will create a data class for managing video information.
1. In the Solution Explorer, right click the VideoBlobManager project and select Add>Class from the context menu.
2. In the Add New Item dialog, name the new class VideoBlobStorage.cs and click Add.
3. Add the following code inside the class definition.
C#
public Uri FileUri { get; set; }public string VideoName { get; set; }public string Category { get; set; }public string DateSubmitted { get; set; }
Task 4 – Initiating Azure Storage
In this task, you will create a Global.asax file for initiating Azure Storage.
1. In the Solution Explorer, right click the VideoBlobManager project and select Add>New Item from the context menu.
2. In the Add New Item dialog, select Visual C#>Web>Global Application Class and click Add.
3. At the top of the Global.asax file, add the following code references.
C#
using Microsoft.WindowsAzure;
using Microsoft.WindowsAzure.Diagnostics;using Microsoft.WindowsAzure.ServiceRuntime;
1. In the Application_Start method, add the following code to initiate Azure storage.
C#
CloudStorageAccount.SetConfigurationSettingPublisher(( configName, configSetting) => { var connectionString = RoleEnvironment.GetConfigurationSettingValue(configName); configSetting(connectionString); });
Task 5 – Coding Project Functionality
In this task, you will code the project functionality.
1. In the Solution Explorer, open Default.aspx.cs for editing.
2. Add the following code references to the top of the file.
C#
using Microsoft.WindowsAzure.StorageClient;using Microsoft.WindowsAzure;
3. Within the class, add the following member variables.
C#
CloudBlobContainer azureBlobContainer = null;CloudStorageAccount azureStorageAcct = null;CloudBlobClient azureBlobClient = null;BlobContainerPermissions azureBlobPermissions = null;string submissionDateTime = string.Empty;
4. Add the following method to update the list of videos.
C#
private void UpdateVideoList(){ var azureBlobs = azureBlobContainer.ListBlobs(); var listOfBriefs = new List<VideoBlobStorage>(); foreach (var blobItem in azureBlobs) { var azureBlobRecord =
azureBlobContainer.GetBlobReference(blobItem.Uri.ToString()); azureBlobRecord.FetchAttributes(); listOfBriefs.Add(new VideoBlobStorage() { FileUri = blobItem.Uri, VideoName = azureBlobRecord.Metadata["VideoName"], Category = azureBlobRecord.Metadata["Category"], DateSubmitted = azureBlobRecord.Metadata["DateSubmitted"] }); } videoList.DataSource = listOfBriefs; videoList.DataBind();}
5. In the Page_Load event, add the following code.
C#
azureStorageAcct = CloudStorageAccount.FromConfigurationSetting("DataConnectionString");azureBlobClient = azureStorageAcct.CreateCloudBlobClient();azureBlobContainer = azureBlobClient.GetContainerReference("videofiles");azureBlobContainer.CreateIfNotExist();azureBlobPermissions = new BlobContainerPermissions();azureBlobPermissions.PublicAccess = BlobContainerPublicAccessType.Container;azureBlobContainer.SetPermissions(azureBlobPermissions);UpdateVideoList();
6. Add the following code to delete a selected video.
C#
protected void RowCommandHandler(object sender, GridViewCommandEventArgs e){ if (e.CommandName == "DeleteVideo") { var blobIndex = Convert.ToInt32(e.CommandArgument); var blobName = (Uri)videoList.DataKeys[blobIndex].Value; var blobContainer = azureBlobClient.GetContainerReference("videofiles"); var blob = blobContainer.GetBlobReference(blobName.ToString()); blob.DeleteIfExists(); } UpdateVideoList();}
7. Add the following code to submit a video to blob storage.
C#
protected void SubmitVideo_Click(object sender, EventArgs e){ submissionDateTime = DateTime.Now.ToShortDateString(); string videoFileExtension = System.IO.Path.GetExtension(videoUploadControl.FileName); var videoFilePrefix = videoNameBox.Text; var blob = azureBlobContainer.GetBlobReference( videoFilePrefix + videoFileExtension); var blobName = blob.Attributes.Properties.ToString(); blob.UploadFromStream(videoUploadControl.FileContent); blob.Metadata["VideoName"] = videoNameBox.Text; blob.Metadata["Category"] = dropdwnCategory.SelectedItem.ToString(); blob.Metadata["DateSubmitted"] = submissionDateTime; blob.SetMetadata(); blob.Properties.ContentType = videoUploadControl.PostedFile.ContentType; blob.SetProperties(); UpdateVideoList(); videoNameBox.Text = string.Empty;}
8. Add the following code to clear the form fields.
C#
protected void ClearFields_Click(object sender, EventArgs e){ videoNameBox.Text = string.Empty;}
Task 6 – Testing the Solution
In this task, you will test the solution before deploying it to Azure.
1. In the Solution Explorer, double click the VideoBlobManager web role.
2. Click Settings.
3. Click Add Setting.
4. In the Name field, enter DataConnectionString.
5. In the Type list, select Connection String.
6. In the Value field, click the ellipsis.
7. In the Storage Account Connection String dialog, click OK.
Figure 5Settings
8. Select File>Save All from the Visual Studio menu.
9. In the Solution Explorer, open web.config for editing.
10. Add the following beneath the system.web element to allow for the size and time required to upload videos.
XML
<httpRuntime maxRequestLength="104856" executionTimeout="43200"/>
11. Hit F5.
12. When the web role starts., click the Browse button, navigate to a video and upload it. Once uploaded, you can click the link to play it.
Figure 6Testing the Web Role
Task 7 – Deploying the Web Role to Azure
In this task, you will deploy the web role to Azure so that you can upload videos.
1. In the Solution Explorer, double click the VideoBlobManager web role.
2. Click Settings.
3. Click the eliipsis associated with the Value field for the DataConnectionString setting.
4. Click Enter Storage Account Credentials.
5. Enter your Account Name and Account Key.
6. Select Use Default HTTP Endpoints and click OK.
7. Click the eliipsis associated with the Value field for the Diagnostics.ConnectionString setting.
8. Click Enter Storage Account Credentials.
9. Select your Account Name from the drop-down list and click OK.
10. In the Solution Explorer, right click the AzureVideoManager project and select Publish from the context menu.
11. Select Create Service Package Only and click OK.
12. Open your Azure Management portal.
13. Click Hosted Services, Storage Accounts & CDN.
14. Click New Hosted Service.
15. Enter a name for your servie.
16. Enter a URL Prefix for your service.
17. Select a region to host your service.
18. Select Deploy to Production Environment.
19. Enter a Deployment Name.
20. Under Package Location, click Browse Locally.
21. Locate the AzureVideoManager.cspkg file and click Open.
22. Under Configuration File, click Browse Locally.
23. Locate the ServiceConfiguration.cscfg file and click Open.
24. In the Create a New Hosted Service dialog, click OK.
25. When you see the warning dialog telling you that only one instance is defined, override the warning and submit the package.
Figure 7Override the Warning
26. After the new hosted service is started, locate the DNS Name. Click the link and the Video Manager will appear in the browser.
27. Upload some small video smple for use later.
Task 8 – Playing Videos in SharePoint 2010 Media Player
In this task, you will play one of the uploaded videos in the SharePoint 2010 Media Player.
1. Open a SharePoint 2010 site and optionally add a new page for hosting web parts.
2. Select Site Actions>Edit Page.
3. Click Insert>Video and Audio in the ribbon.
4. Select the Media Web Part and click Change Media>From Address in the ribbon.
5. In the Link Media dialog, enter the URL to one of the uploaded videos and click OK.
6. You should now be able to play the video in the Media Player.
Exercise 2: Creating a Media Player
In this exercise, you will create a Silverlight media player to list and play the videos in SharePoint 2010.
Task 1 – Creating the Intermediate REST Service
In this task, you will create an intermediate REST service that can access Azure storage. This is required because calls from a Silverlight application running in SharePoint will be cross-domain, which is not normally allowed.
1. Open the AzureVideoManager solution in Visual Studio 2010.
2. Right click the Roles folder and select Add>New Web Role Project from the context menu.
3. In the Add New Role Project dialog, select WCF ServiceWebRole.
4. Name the web role IntermediateRestVideoService and click Add.
5. Open IService1.cs for editing.
6. Add the following code reference to the file.
C#
using System.IO;
7. Replace the entire service contract with the following code.
C#
[OperationContract][WebGet(UriTemplate = "{Container}")]Stream BlobInfo(string Container);
8. Open Service1.svc for editing.
9. Add the following code reference to the file.
C#
using System.IO;using System.Net;
10. Replace the entire class with the following code making sure to use the Account Name for your Azure account.
C#
public Stream BlobInfo(string Container){ WebClient client = new WebClient(); return client.OpenRead(String.Format("http://accountname.blob.core.windows.net/{0}?resttype=container&comp=list", Container));}
11. Open web.config for editing.
12. Replace the serviceModel section with the following code.
XML
<services> <service name=" IntermediateRestVideoService.Service1"> <endpoint bindingConfiguration="webBinding" behaviorConfiguration="RESTful" address="" binding="webHttpBinding" contract="IntermediateRestVideoService.IService1"/> </service></services><behaviors> <endpointBehaviors> <behavior name="RESTful"> <webHttp/> </behavior> </endpointBehaviors></behaviors><bindings> <webHttpBinding> <binding name="webBinding"> <security mode="None"> <transport clientCredentialType="None"/> </security> </binding> </webHttpBinding></bindings>
13. Right click the IntermediateRestVideoService project and select Add>New Item from the context menu.
14. In the Add New Item dialog, select Visual C#>XML File.
15. Name the new file ClientAccessPolicy.xml and click Add.
16. Add the following code to the file.
XML
< ?xml version="1.0" encoding="utf-8"?><access-policy> <cross-domain-access> <policy> <allow-from http-request-headers="SOAPAction"> <domain uri="*"/> </allow-from> <grant-to> <resource path="/" include-subpaths="true"/> </grant-to> </policy> </cross-domain-access></access-policy>
17. Save all files and build the solution.
18. Open your Azure Management portal.
19. Click Hosted Services, Storage Accounts & CDN.
20. Click Hosted Services.
21. Click on the video storage service you created earlier.
22. Delete the service.
23. Refer to the steps earlier in the hands-on lab to deploy the new version of the project to Azure.
24. When finished, make note of the Uri that refers to the intermediate RESTful service.
Task 2 – Creating the Silverlight Project
In this task, you will create the Silverlight project to list and play videos.
1. In the Solution Explorer, right click the AzureVideoManager solution and select Add>New Project from the context menu.
2. In the Add New Project dialog, select Visual C#>Silverlight>Silverlight Application.
3. Name the new project SilverlightAzureVideoLibrary and click OK.
4. In the New Silverlight Application dialog, uncheck the box labeled Host the Silverlight Application in a New or Existing Web Site in the solution and click OK.
Figure 8New Silverlight Application
Task 3 – Coding the Silverlight Application
In this task, you will add the code for the Silverlight application.
1. In the SilverlightAzureVideoLibrary project, right click the References node and select Add reference from the context menu.
2. Add a reference to System.Windows.Control.Data and System.Xml.Linq.
3. In the Solution Explorer, right click the VideoBlobManager project and select Add>Class from the context menu.
4. In the Add New Item dialog, name the new class VideoBlobStorage.cs and click Add.
5. Add the following code inside the class definition.
C#
public string Url { get; set; }public string Name { get; set; }
6. In the Solution Explorer, open MainPage.xaml for editing.
7. Add the following just under the UserControl element.
XAML
Loaded="UserControl_Loaded"xmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"
8. Add the following markup inside the Grid element to create the user interface.
XAML
<StackPanel Orientation="Vertical"> <StackPanel Orientation="Horizontal"> <data:DataGrid Name="VideoList" AutoGenerateColumns="False"> <data:DataGrid.Columns> <data:DataGridTemplateColumn Header="" CanUserSort="False"> <data:DataGridTemplateColumn.CellTemplate> <DataTemplate> <Button x:Name="PlayButton" Content="Play Video" Click="PlayButton_Click"/> </DataTemplate> </data:DataGridTemplateColumn.CellTemplate> </data:DataGridTemplateColumn> <data:DataGridTextColumn Width="150" Binding="{Binding Name}" Header="Name"/> <data:DataGridTextColumn Width="300" Binding="{Binding Url}" Header="Url"/> </data:DataGrid.Columns> </data:DataGrid> <MediaElement Name="VideoElement" Width="200" Height="200"/> </StackPanel> <TextBox x:Name="Messages" IsReadOnly="True"/></StackPanel>
9. In the Solution Explorer, open MainPage.xaml.cs for editing.
10. Add the following code references to the top of the class.
C#
using System.Threading;using System.Xml;using System.Xml.Linq;
11. Add the following code to the class to define member variables.
C#
List<VideoBlobStorage> videos;
12. Add the following code to show the videos in the grid being careful to use the URI that refers to the intermediate REST service.
C#
private void UserControl_Loaded(object sender, RoutedEventArgs e){ string requestUri = "http://guid.cloudapp.net:8080/service1.svc/videofiles"; HttpWebRequest request = (HttpWebRequest)HttpWebRequest.Create( new Uri(requestUri));
request.BeginGetResponse((IAsyncResult result) => { Dispatcher.BeginInvoke(() => { XElement results; videos = new List<VideoBlobStorage>(); Messages.Text = string.Empty;
try { HttpWebRequest req = (HttpWebRequest)result.AsyncState; HttpWebResponse resp = (HttpWebResponse)req.EndGetResponse(result);
using (StreamReader sr = new StreamReader(resp.GetResponseStream())) {
results = XElement.Parse(sr.ReadToEnd());
var q = from r in results.Descendants("Blob") select new { Name = r.Element("Name").Value, Url = r.Element("Url").Value };
foreach (var i in q) {
videos.Add(new VideoBlobStorage() { Name = i.Name, Url = i.Url }); }
VideoList.ItemsSource = videos; Messages.Text = videos.Count.ToString() + " result(s) found."; } } catch (Exception x) { Messages.Text = x.Message; } }); }, request);
}
13. Add the following code to play the selected video.
C#
private void PlayButton_Click(object sender, RoutedEventArgs e){ Button btn = sender as Button; VideoBlobStorage videoData = btn.DataContext as VideoBlobStorage; VideoElement.Source = new Uri(videoData.Url); VideoElement.Play();}
Task 4 – Deploying the Solution to SharePoint 2010
In this task, you will deploy the solution and play the videos.
1. Right click the AzureVideoManagerSolution project, and select Add>Project from the context menu.
2. In the Add New Project dialog, select Visual C#>SharePoint 2010>Empy SharePoint Project.
3. Name the new project ShareAzurePointVideoLibrary and click OK.
4. In the SharePoint Customization Wizard, enter the URL to a Site Collection where you will deploy the new web part.
5. Select to Deploy as a Sandboxed Solution and click Finish.
6. Right click the SharePointAzureVideoLibrary project and select Add>New Item from the context menu.
7. In the Add New Item dialog, select Silverlight Web Part. This item will be visible if you installed the Visual Studio extensions described in the lab set up steps.
8. Name the new item SilverlightAzureVideoWebPart and click Add.
Figure 9New Silverlight Web Part
9. Right click the SharePointAzureVideoLibrary project and select Build.
10. Right click the SharePointAzureVideoLibrary project and select Deploy.
11. In the browser, open the Site Collection you referenced in the SharePoint Customization Wizard.
12. In SharePoint, select Site Actions>View All Site Content.
13. Click the Site Pages library.
14. Click the SilverlightAzureVideoLibraryWebPartPage.
Figure 10Video Library in SharePoint 2010
Summary
In this lab, you created an application for managing blob storage. This application showed hoe to use code to upload blobs and read information about them. Then you created a Silverlight application to display and play the videos. The Silverlight application was deployed into SharePoint 2010 as a web part.