Scenario

SharePoint picture library including the Silverlight webcam web part

To create a SharePoint web part which enables a user to turn on their web cam and allow them to take a picture then save the picture back into a picture library.

To achieve this I have create a fairly simple Silverlight application using the new webcam capabilities now available in Silverlight 4.

When the picture is captured the resulting picture is stored wihtin a WriteableBitmap. I have used an open source assembly (FJ.Core) to convert this into a more appropriate Jpeg.

Finally I hook into SharePoint using the client object model available in SharePoint 2010 and save the Jpeg back into the picture library

Walk through.

Create a standard Silverlight 4 application and add the following reference dll’s

1. FJ.Core (for JPeg encoding)
2. SharePoint’s client object model dll’s
   (Note. You can find these dll in the 14 Hive layouts\clientbin directory)
     a. Microsoft.SharePoint.Client.Siverlight
     b. Microsoft.SharePoint.Client.Silverlight.Runtime
     
   

   Notes on MVVM
   In my example I have stuck with MVVM (Model View ViewModel)  checkout silverlight.net for more information On MVVM. I have a couple of base classes which I find useful when working with MVVM, One for handling commanding with delegates ‘DelegateCommand.cs’ and ‘MVVMBase.cs’  to handle some standard stuff in your model objects just i.e. NotifyChanged helper methods etc.

Changes to APP.XAML

Open the App.axml.cs file and add a
Using Microsoft.SharePoint.Client;
 
Add the following code to the StartUp  method

//Sharepoint context binding
ApplicationContext.Init(e.InitParams, 
System.Threading.SynchronizationContext.Current);

The above ensures the ApplicationContext gets initialised with the same init. Paramaters and synchronizationCotext as the current thread.

Main.XAML

I have left the default Silverlight page created in a new project as MainPage.axml.

The first thing to note that this usercontrol has a resource loading the associated viewModel class and is set as the default context of the control.

    <UserControl.Resources>
        <local:MainViewModel x:Key="viewModel" d:IsDataSource="True"/>
    </UserControl.Resources>
    <UserControl.DataContext>
        <Binding Source="{StaticResource viewModel}"/>
    </UserControl.DataContext>

In this xaml file I layout a grid with 2 columns and 2 rows. The first row comprised of a rectangle which will get filled with the videobrush which has a source of the web cam and the image on the right hand side gets bound to a WriteableBitmap which is a snapshot taken when the user takes a pic.

A couple of buttons are added to Start the cam, Take a picture then save to sharepoint. To avoid code behind these are all bound to appropriate commands.

MainViewModel.CS

All the interesting stuff is in a single viewModel class ‘MainViewModel.cs’

First thing to note is this class inherits from my MVVMBase.cs which gives access to a helper method 

public void NotifyPropertyChanged(string propertyName)

I have a few properties which get bound to objects over in Main.axml which are

1. CapturedImage – the image object binds its source to this. This is the actual picture taken
2. VideoBrush – the rectangle object binds its fill to this. This is the web cam
3. Commands : StartCommand, TakePictureCommand and SaveToSharePoint command are bound to their respective buttons
   
    

The constructor

In addition to wiring up the command objects the constructor initialises the CaptureSource object and associates a delegate to the CaptureImageCompleted event. This simply grabs the image capture and stores this to a WriteableBitmap object ‘capturedImage’. I then call a helper methods ‘RefreshCommandStatus’ which causes the command object’s ‘canExecute’ methods to fire resulting in the buttons being enabled or disabled appropriately.  For example if the web cam has not yet been started then the Take Picture button shall remain ‘disabled’

Start the cam

if (_captureSource != null)
     {
         if (_captureSource.State != CaptureState.Stopped)
         {
             _captureSource.Stop(); // stop whatever device may be capturing
         }

         // create the brush
         VideoBrush = new VideoBrush();                
         VideoBrush.SetSource(_captureSource);

         // request user permission and display the capture
         if (CaptureDeviceConfiguration.AllowedDeviceAccess || 
             CaptureDeviceConfiguration.RequestDeviceAccess())
         {
             _captureSource.Start();
         }
     }

     RefreshCommandStates();

Starting the web cam is simple…

Firstly check the cam is initially stopped by looking at the ‘State’ property of _CaptureSource. If it isn’t already stopped then stop it.

Then create a VideoBrush object and set its source to reference the webcam. (This is bound to the Fill property of the rectangle object in Main.axml)

Then you need to attempt to start the cam but you need to wrap this around a couple of checks. Either the user has already specified that the web cam can be used by this application or you can ask Silverlight to ask the user now

Prompt displayed to user when attempting to start the cam. 

I then call the refreshcommandstates method to update the status of the buttons. Resulting in the ‘Start Cam’ button being disabled and the ‘Take picture’ button being enabled.

Take a picture

This is the rocket science bit (not!) Just call the  capturesource.CaptureImageAsync method. Because I wired a delegate up in the consturctor when this event has completed an asyncrounous method gets called when the work has been done and the image is saved down to my writeable bitmap property. Binding of the image object ‘source’ property in Main.axml will automaticlally be notified of this change and therefore display the captured image.

 <Image x:Name="takenPicture" Source="{Binding capturedImage}" />

Save picture

To avoid unnecessary requests back and forth to your SharePoint server you can pipe all your requests together such i.e. get web, get list and create item. When your done you then execute all the queries async fashion. Then, with call back delegates you can handle the results ‘Success’ or ‘Failure’ (Success hopefully).

So…

Initiate spClientConext – Ok I hard coded http://sp2010 but you would be best to pass this stuff in dynamically via your web part.

spClientContext = new sp.ClientContext("http://sp2010");

Get the appropriate document library. In this case its called ‘pictures’ which is a standard SharePoint picture library

spPictureList = spClientContext.Web.Lists.GetByTitle("pictures");

Then I create a new FileCreationInformation object. Here I specifiy some properties the main ones are ‘Content’ which is a stream, in this case I convert the writeablebitmap to a Jpeg then into a memory stream, see the helper methods ‘pictureStream’ and ‘EncodeJpeg’

The next property is Url. To ensure I gave this something unique I just used the TimeOfDays.Ticks property but you could prompt the user for a filename.

//Create the FileCreationInformation object
                FileCreationInformation fci = new FileCreationInformation();
                fci.Overwrite = true;
                
                fci.Content = pictureStream().ToArray();
                fci.Url = DateTime.Now.TimeOfDay.Ticks + ".jpg";

                //Add to picture library
                spPictureList.RootFolder.Files.Add(fci);

Then I add the FIleCreationInformation object to the picture library’s rootFolder

Finally calling the ExectueeQueryAsync method. When the work is done either my saveSucceeded or saveFailed delgates will be called.

SaveSucceeded

Because this occurs on another thread from the UI thread you need to make sure your call back methods don’t try and access UI objects directly.

By running the code within the Dispatcher I can safley reference objects available in the UI thread. In this case I display a messagebox to the user, then I clear the capturedImage object to allow the user to take another picture.

I also disabled the save button just before the async. Method was  called then enabled it again on completion. Because this is running async. You cant be sure how long the operation will take and  you don’t want the pesky impatient user clicking save again

Running it

In this case I simply uploaded the compiled XAP file to a SharePoint document library then used the out of the box SharePoint Silverlight web part. But it would be a better idea to package up your own web part (See previous posting Deploying a silverlight application to SharePoint). This will allow you to pass in dynamic parameters for the library name and site url and not hardcode things like I did in this example.

Download Source Code Here

Overview 

In this posting I hope to provide you with an guide on how to deploy a Silverlight application to SharePoint 2010. I’ll deploy this as a sandbox solution but will point out where you might do things a little differently if you want to deploy as a file based solution to the 14 Hive.

To use the deployed Silverlight app. you could go ahead and use the new Silverlight web part. Great for testing but to make things easier for the user you could also wrap this up in a deployable web part. I’ll outline how you can achieve this within the same solution too.

Creating the Visual Studio 2010 Solution and projects.

In the following steps I’ll create an empty SharePoint solution in Visual Studio 2010. I’ll add Silverlight project to the solution then create some SharePoint Items to handle the deployment of the XAP file and also the wrapper web part.

1. Create a new empty SharePoint solution.

2. Select the appropriate type of solution. In this case I am keeping the solution as a ‘Sandbox’ solution.

3. Add the Silverlight application to the solution. In this case I’m create a new Silverlight application. From the menus select File – Add – New Project. Choose the appropriate Silverlight template then click ok, and click ok on the following dialog to create the test app (If required).

4.As you probably know all you need to run the Silverlight application is the .XAP file which is the created at compile time. Therefore this is all you need to deploy from your Silverlight project to the SharePoint solution. In this example I have created a sandbox solution so will create a SharePoint Module to upload the XAP file into the SharePoint content database.  (If you want to deploy this a standard solution (ie non-sandbox) then you can create a mapping to a 14 Hive folder and deploy the file there)

In this step I add a SharePoint project item ‘Module’ to the SharePoint solution. Right click on the SharePoint project and select ‘Add new item’

The created module provides you with a sample.txt file and an elements xml file. Any file you drop into this folder will be automatically included in the elements.xml file and therefore shall  be uploaded into SharePoint. Go ahead and delete the sample.txt file.

5. Next you want a post build script to run on your Silverlight project to copy over the XAP file from the appropriate bin directory (Debug or Release, based on you compile options). You need to initially build the silverlight application to see the XAP file. By default the bin directory is hidden so click the ‘show all files’ icon highlighted in the solution explorer and locate the bin\debug directory. There you can see the XAP file.

Right click the Silverlight application and locate the post-build events box within the build events tab and key in something like the following.

copy “$(TargetDir)SilverlightApplication.xap” “$(SolutionDir)SilverlightWebPartSample\SilverlightFile”

Couple points to note here. Wrap your file paths in quotes, I found some issues with long file paths, spaces etc. Also the $(TargetDir) and $(SolutionDir) both post fix a backslash so you don’t need to supply one.

Once you have done this go ahead an compile the Silverlight project once more. Then look at the SharePoint project and in particular the ‘SilverlightFile’ module. If you are ‘showing all files’ you should see the SilverlightApplication.xap file.  You need to right click this file now and select ‘include’ If you then look at the elements.xml file within this module you will see Visual Studio has automatically added a reference to this file now. Neat and also eliminates any typos in this xml file

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
  <Module Name="SilverlightFile">
  <File Path="SilverlightFile\SilverlightApplication.xap" Url="SilverlightFile/SilverlightApplication.xap" />
</Module>
</Elements>

6. You need to play around with the build order to ensure your Silverlight application builds first then its post build event will copy the XAP file to your SharePoint project. Obviously you don’t want this the wrong way around as your SharePoint solution will never get the current XAP file for deployment.

You can modify the build order by right clicking the Solution and selecting ‘Build Dependencies’ From here select the SharePoint project and make sure its dependent on the Silverlight application. Click ok then check this by right clicking the solution once more and this time select dependency order.

Creating a web part to display the associated Silverlight application

The previous steps would allow you to go-ahead an build and deploy the solution to SharePoint. At which point you could use the out of the box Silverlight web part but in the following steps I’ll create a simple web part which automatically displays the Silverlight application. Once deployed you can then select the web part and drop it onto your page.

1. using the existing solution outlined in the previous section select’ Add new item’ within the SharePoint solution. And add a new c# web part (Not a visual web part, this wont work as a sandbox solution anyway) And give it a name. I have been creative here and named it SilverlightApplicationWebPart

Solution Explorer…

2.  We basically want this web part to render out some HTML which will instruct the browser to load the Silverlight application. Luckily the HTML has already been written for us in the supporting Silverlight test web app. Just open up the HTML file and copy the <object> html code.

3. Once you have this code copied open up with webpart code page and add the following code.

namespace CFB.lab.SilverlightWebPartSample.SilverlightApplicaitonWebPart
{
    [ToolboxItemAttribute(false)]
    public class SilverlightApplicaitonWebPart : WebPart
    {

        protected override void Render(HtmlTextWriter writer)
        {
            string x =                                                                                                                           "+
            "     <param name='source' value='ClientBin/SilverlightApplication.xap'/>                                                            "+
            "     <param name='onError' value='onSilverlightError' />                                                                            "+
            "     <param name='background' value='white' />                                                                                      "+
            "   <object data='data:application/x-silverlight-2,' type='application/x-silverlight-2' width='100%' height='100%'>                  "+
            "     <param name='minRuntimeVersion' value='4.0.50401.0' />                                                                         "+
            "     <param name='autoUpgrade' value='true' />                                                                                      "+
            "     <a href='http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50401.0' style='text-decoration:none'>                            "+
             "         <img src='http://go.microsoft.com/fwlink/?LinkId=161376' alt='Get Microsoft Silverlight' style='border-style:none'/>       "+
            "     </a>       "+
            "   </object>              ";                                                                                                          

            writer.Write(x);
            base.Render(writer);

        }
    }
}

Note : You need to change the first line of the HTML as the silverlight app will no longer exists in the ClientBin. This should now read…

            “     <param name=’source’ value=’SilverlightFile/SilverlightApplication.xap’/>    “

The ‘SilverlightFile’ corresponds to the module name you gave within the SharePoint project.

When you copy the HTML over just highlight the code and do a quick find and replace of the double quotes to single quotes. Then build this out as a string.

If you really want to save time you could use the new multi-line edit in VS2010 just hold the Alt key while selecting the space on the screen where you want to add multiple lines of the same content…

Note: If your Silverlight needs any init parameters you can easily add them here. For example you may require some query string parameters. You can get this from the web part and add dynamically add them to your string. Here is an example of injecting a querystring value

   public class SilverlightApplicaitonWebPart : WebPart    {                protected override void Render(HtmlTextWriter writer)        {            string YOURVALUE = "";            if (Context.Request.QueryString["yourvalue"] != null) YOURVALUE = Context.Request.QueryString["yourvalue"].ToUpper();

            string x =                                                                                                                           "+     "     <param name='source' value='ClientBin/SilverlightApplication.xap'/>                                                            "+     "     <param name='onError' value='onSilverlightError' />                                                                            "+     "     <param name='background' value='white' />                                                                                      "+            "   <object data='data:application/x-silverlight-2,' type='application/x-silverlight-2' width='100%' height='100%'>                  "+     "     <param name='minRuntimeVersion' value='4.0.50401.0' />                                                                         "+     "     <param name='autoUpgrade' value='true' />                                                                                      "+            "     <param name='initParams' value='YOURKEY="+YOURVALUE+ "' />" +     "     <a href='http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50401.0' style='text-decoration:none'>                            "+  "         <img src='http://go.microsoft.com/fwlink/?LinkId=161376' alt='Get Microsoft Silverlight' style='border-style:none'/>       "+     "     </a>       "+         "   </object>              ";                                                                                                                                                                                                                                                                       writer.Write(x);            base.Render(writer);                  }    }

4. OK so now you are good to build. Providing you have no build errors, right-click the SharePoint project and select ‘Deploy’

5. To test the web part, edit a page within the SharePoint site and locate the published web part. Once its added to the page it should load up the appropriate silverlight app. My example has gone for an innovative ‘Hello SharePoint from Silverlight’ message. My creativity knows no bounds.

Editing the page – select the published web part to add then click Add…

Hope this is of some help, happy coding

(Note: Applicable even in SharePoint 2010 RTM)

If you try and access the WCF data services using http://SP2010SERVERNAME/_vti_bin/listdata.svc you get the following error message

You need to install an update for the .NET Framework 3.5 SP1. Download from Microsoft here. I found an IISRESET was not enough to get this to work. A full reboot cleared the fault.

Noticed a problem when trying to install SharePoint 2010 release candidate on win 2008 running as a DC.

Problem:

The setup was not prompting you for the server type ‘Single Server’, ‘New Farm’. Instead the install would install SharePoint and SQL server express. The configuration wizard would then setup SharePoint as a single server.

Workaround:

Copy the setup.exe to a local directory on the server eg : c:\SPSETUP then open a command prompt ‘as administrator’ and run the following

c:\SPSETUP\setup.exe /extract c:\SPSETUP

Then from the SPSETUP folder run the install with the following command

setup.exe /config c:\spsetup\File\SetupFarm\config,xml

The install shall run as normal, but this time when the configuration wizard is run you should get the prompts to specify the appropriate configuration database server.

If you are running as a single server and using SQL Server Express then I also noticed this problem…

Also noticed that the config. wizard fails at step 5 due to it timing out. Thanks to some other postings I discovered this was due to the Sharepoint Server Search 14 and later on the SharePoint Foundation Search V4 service was being restarted by the configuration wizard. When the service is restarted it was using the ‘Local Service’ account. You can see this happening if you watch the services while the config. wizard is running. If before running the wizard you change these to run with appropriate domain accounts these should start up ok.