Home : Silverlight UI Components : WebCamera1

Web Camera Silverlight Component

Summary: Use web camara to take digital images. Save images as files on your web server or to your relational database. Advanced features include completion notification. Support for JPEG, PNG, and BMP encodings. Fully customizable. Sample code included.

Alternatively, you can use free Web Camera Online Service
With Support:
Example 1: Web Camera (default settings)
View XML configuration file

Images will be stored temporary and removed in 24 hours

Example 2: Styled Web Camera (one click save, PNG encoded)
View XML configuration file
Update ImageID
Images will be stored temporary and removed in 24 hours

Add this component in 4 easy steps Download Visual Studio 2010 sample project
  1. Download XAP file and place it in /ClientBin folder of your web project:
  2. Download XML configuration file and add it to your web project (right click, select 'Save Target As'):
  3. Add HTML code below to your web page:
  4. Add new Web Page, name it Service.aspx. Add code to process posted data. Sample C# code
  5. Customize your component by changing values in XML configuration file:
    • Width - defines width of the component. Default: 300
    • Height - defines height of the component. Default: 225
    • AutoStart - defines if camera is activated automatically. Options: true, false. Default: false
    • OneClickSave - defines if camera captures and saves image with single click. Setting both AutoStart and OneClickSave to true allows minimal user interaction with Web Camera component. Options: true, false. Default: false
    • BackgroundColor - defines background color of the component in RGB format. Default: 255.255.255 (white)
    • BackgroundWebCamColor - defines background color of the Camera preview area in RGB format. Default: 255.255.255 (white)
    • SaveDataTo - defines URL where data will be sent in XML format (POST method). Sample C# code to read posted data on web server. Use this parameter to pass any additional variables such as user id.
      Example: <SaveDataTo>url:service.aspx?action=saveimage&userID=3</SaveDataTo>. Default: empty
    • ImageID - optional parameter sent to server with image data. Can be set in XML on dynamically with JavaScript to uniquely identify captured images.
      Example of setting value in XML: <ImageID>customer123</ImageID>.
      Example of setting value with JavaScript:
      var control = document.getElementById("camera2");
      if (control != null) control.Content.Camera.SetVariable("ImageID", "customer124");

      Default: empty
    • RoundedCorners - defines if shapes have rounded corners. Default: true
    • NotifyResult - defines JavaScript function that will be called when image is processed by the server. The value passed to this function is text returned by your web server code. In this example, a file name is randomly generated, image is saved on the server, and file name is returned. If no JavaScript function is specified, "Done" will be displayed briefly. You can return values such as "Thank You", "Saved", "Now Take Second Picture", etc.
      Example: <NotifyResult>jsfunction:ShowImage1</NotifyResult>. Default: empty
    • ImageWidth - defines width of the image to send to server. Default: 300
    • ImageHeight - defines height of the image to send to server. Default: 225
      Note: Since you can specify both width and height of the image, it is important to maintain proper image proportions. Current ratio is 1.33 = 300 (width) / 225 (height)
    • ImageFormat - defines format used to encode image. Options: JPEG, PNG, BMP. Default: JPEG
Other info:
  • Values for initParams parameter of Silverlight object:
    • configuration - optional. Name of XML file that defines visual presentation and behavior
    • configuration. - optional. Alternate to XML configuration, all settings can be specified as part of initParams parameter. Example: ...,configuration.width=100,configuration.height=200,...
  • For windowless mode, add additional parameter to Silverlight control.
    Sample: < param name="windowless" value ="true"/>
    For more information read MSDN article
  • If Silverlight component is not displayed properly after application was moved to test or production servers, ensure proper MIME settings on your web server. For more information search "XAP Mime type in IIS" with your favorite search engine
Home  ∴  Labs  ∴  Contact