In Silverlight, you can access the video and audio feeds from media devices such as webcams and TV tuners. This enables a number of scenarios, such as capturing and displaying images, uploading profile pictures to social networking applications, video diaries, audio diaries, audio note taking, augmented reality, and body gestures.

This QuickStart contains the following sections:

Setting Up Webcams

To set up a webcam in your Silverlight application, the first thing you need to do is get the available AudioCaptureDevices and VideoCaptureDevices on the system. CaptureDeviceConfiguration exposes a number of static members for getting all the available devices as well as getting the default devices. Once you have the device, you can associate it with a CaptureSource.

CaptureSource is the main class used to interact with audio and video devices. Through the CaptureSource you can start and stop the devices, check the state of the devices, and capture a single video frame. A CaptureSource is associated with one AudioCaptureDevice and one VideoCaptureDevice, though it need not be associated with both.

The following example shows how to use the GetDefaultVideoCaptureDevice method to get the default video device on the system and associate it with a CaptureSource.

C#

CaptureSource captureSource = new CaptureSource();
VideoCaptureDevice webcam = CaptureDeviceConfiguration.GetDefaultVideoCaptureDevice();
captureSource.VideoCaptureDevice = webcam;

VB

Dim captureSource As CaptureSource = New CaptureSource
Dim webcam As VideoCaptureDevice = CaptureDeviceConfiguration.GetDefaultVideoCaptureDevice
captureSource.VideoCaptureDevice = webcam

Displaying Video

Now that you have the webcam, you need to display the video in your application. We'll use a Rectangle object and a VideoBrush to display the video. Since the Fill property of the Rectangle takes a Brush, you can't set it directly to the CaptureSource. Instead, we'll set the source of the VideoBrush to the CaptureSource and then set the Fill property of the Rectangle to the VideoBrush.

Before a Silverlight application can play audio or video form a device, it must first be granted access by the user. To request access in your Silverlight application, call the static method RequestDeviceAccess on the CaptureDeviceConfiguration class. This method must be called in response to a user initiated event, such as a Button Click event. If RequestDeviceAccess is not called from a user initiated event, the method will always return false. If the Start method is called and device access has not been granted, an InvalidOperationException will be thrown. The AllowedDeviceAccess property on CaptureDeviceConfiguration specifies whether or not device access has been granted.

The following example shows to display the video from a Webcam on a CaptureSource object via a VideoBrush.

XAML

<Grid x:Name="LayoutRoot" Background="LightBlue" Loaded="LayoutRoot_Loaded" >
   <Grid.ColumnDefinitions>
      <ColumnDefinition />
      <ColumnDefinition />
   </Grid.ColumnDefinitions>
   <Grid.RowDefinitions>
      <RowDefinition Height="100"/>
      <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

   <!-- StackPanel to hold the Buttons -->
   <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" 
               Grid.ColumnSpan="2" Grid.Row="0">
      <Button x:Name="StartButton" Click="StartButton_Click" Height="50" 
              Width="100"Content="Start Camera" />
      <Button x:Name="StopButton" Click="StopButton_Click" Height="50" 
              Width="100" Content="Stop Camera" />
   </StackPanel>

   <!-- The Fill property will be set to the webCam VideoBrush -->
   <Rectangle x:Name="webcamDisplay"  Grid.Row="1" Grid.Column="0" Margin="5"  />
</Grid>

C#

// the main object for interacting with the audio/video devices
public CaptureSource captureSource;
   
// brush for the video feed
public VideoBrush webcamBrush;

private void LayoutRoot_Loaded(object sender, RoutedEventArgs e)
{
  // Initialize the CaptureSource.
  InitWebcam();
}

public void InitWebcam()
{
   // Create the CaptureSource.
   captureSource = new CaptureSource();
}

private void StartButton_Click(object sender, RoutedEventArgs e)
{
   if (captureSource.State != CaptureState.Started)
   {
     // Set the video capture source the WebCam.
     captureSource.VideoCaptureDevice = 
        CaptureDeviceConfiguration.GetDefaultVideoCaptureDevice();

     // set the source on the VideoBrush used to display the video
     webcamBrush = new VideoBrush();
     webcamBrush.SetSource(captureSource);

     // Set the Fill property of the Rectangle to the VideoBrush.
     webcamDisplay.Fill = webcamBrush;

     // Request access to device and verify the VideoCaptureDevice is not null.
     if (CaptureDeviceConfiguration.RequestDeviceAccess() &&
         captureSource.VideoCaptureDevice != null)
     {
        try
        {
           captureSource.Start();
        }
        catch (InvalidOperationException ex)
        {
           // Notify user that the webcam could not be started.
           MessageBox.Show("There was a problem starting the webcam " +
                           "If using a Mac, verify default device settings." +
                           "Right click app to access the Configuration settings.");
        }
     }
     else
     {
        MessageBox.Show("Could not start Webcam. Verify device is connected " +
                        "and privacy permission allow access to device.");
     }
   }
}
    
private void StopButton_Click(object sender, RoutedEventArgs e)
{
   // verify the VideoCaptureDevice is not null
   if (captureSource.VideoCaptureDevice != null)
   {
      captureSource.Stop();
   }
}

VB

'The main object for interacting with the audio/video devices
Dim captureSource As CaptureSource

'Brush for the video feed.
Dim webcamBrush As VideoBrush

Private Sub LayoutRoot_Loaded(ByVal sender As System.Object,
                               ByVal e As System.Windows.RoutedEventArgs)
   InitWebcam()
End Sub

Private Sub InitWebcam()
   ' Create the CaptureSource.
    Me.captureSource = New CaptureSource
End Sub

Private Sub StartButton_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)

   If (captureSource.State <> CaptureState.Started) Then
     ' Set the video capture source the WebCam.
     captureSource.VideoCaptureDevice = 
          CaptureDeviceConfiguration.GetDefaultVideoCaptureDevice

     ' set the source on the VideoBrush used to display the video
     webcamBrush = New VideoBrush
     webcamBrush.SetSource(captureSource)

     ' Set the Fill property of the Rectangle  to the VideoBrush.
     webcamDisplay.Fill = webcamBrush

     ' Request access to device and verify the VideoCaptureDevice is not null.
     If (CaptureDeviceConfiguration.RequestDeviceAccess _
           AndAlso (Not (captureSource.VideoCaptureDevice) Is Nothing)) Then
       Try
          captureSource.Start()
       Catch ex As InvalidOperationException
         ' Notify user that the webcam could not be started.
         MessageBox.Show("There was a problem starting the webcam " +
                         "If using a Mac, verify default device settings." +
                         "Right click app to access the Configuration settings.")
        End Try
     Else
        MessageBox.Show("Could not start Webcam. Verify device is connected " +
                        "and privacy permission allow access to device.")
     End If
   End If
End Sub

Private Sub StopButton_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
   ' verify the VideoCaptureDevice is not null
   If (Not (captureSource.VideoCaptureDevice) Is Nothing) Then
       captureSource.Stop()
   End If
End Sub

Capturing Images

Besides displaying the video from a webcam, you can also capture an image. Use the CaptureImageAsync method on the CaptureSource class to asynchronously capture a single frame of video. To determine when the capture is complete, listen to the CaptureImageCompleted event. The CaptureFailed event is raised if there is an error with the image capture.

The following example shows how to capture a single frame of a video and display it in a CaptureSource.

XAML

<Grid x:Name="LayoutRoot" Background="LightBlue" Loaded="LayoutRoot_Loaded" >
   <Grid.ColumnDefinitions>
      <ColumnDefinition />
      <ColumnDefinition />
   </Grid.ColumnDefinitions>
   <Grid.RowDefinitions>
      <RowDefinition Height="100"/>
      <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

   <!-- StackPanel to hold the Buttons -->
   <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" 
               Grid.ColumnSpan="2" Grid.Row="0">
      <Button x:Name="StartButton" Click="StartButton_Click" Height="50" 
              Width="100" Content="Start Camera" />
      <Button x:Name="StopButton" Click="StopButton_Click" Height="50" 
              Width="100" Content="Stop Camera" />
      <Button x:Name="CaptureButton" Click="CaptureButton_Click" Height="50" 
              Width="100" Content="Capture Image" />
   </StackPanel>

   <!-- The Fill property will be set to the webCam VideoBrush -->
   <Rectangle x:Name="webcamDisplay"  Grid.Row="1" Grid.Column="0" Margin="5"  />

   <!-- This Fill property will be set to the capturedImage ImageBrush  -->
   <Rectangle x:Name="capturedDisplay" Grid.Row="1" Grid.Column="1"  Margin="5" />
</Grid>

C#

// The main object for interacting with the audio/video devices.
public CaptureSource captureSource;

// Brush for the video feed.
public VideoBrush webcamBrush;

// Brush for the captured video frame.
public ImageBrush capturedImage;
  
private void LayoutRoot_Loaded(object sender, RoutedEventArgs e)
{
  // Initialize the CaptureSource.
  InitWebcam();
}

public void InitWebcam()
{
   // Create the CaptureSource.
   this.captureSource = new CaptureSource();
   
   // async capture failed event handler
   captureSource.CaptureFailed +=
       new EventHandler<ExceptionRoutedEventArgs>
      (CaptureSource_CaptureFailed);

   // async capture completed event handler
   captureSource.CaptureImageCompleted +=
       new EventHandler<CaptureImageCompletedEventArgs>
      (CaptureSource_CaptureImageCompleted);
}

private void StartButton_Click(object sender, RoutedEventArgs e)
{
  if (captureSource.State != CaptureState.Started)
  {
    // Set the video capture source the WebCam.
    captureSource.VideoCaptureDevice = 
        CaptureDeviceConfiguration.GetDefaultVideoCaptureDevice();

    // set the source on the VideoBrush used to display the video
    webcamBrush = new VideoBrush();
    webcamBrush.SetSource(captureSource);

    // Set the Fill property of the Rectangle to the VideoBrush.
    webcamDisplay.Fill = webcamBrush;

    // the brush used to fill the display rectangle
    capturedImage = new ImageBrush();

    // set the Fill property of the Rectangle to the ImageBrush
    capturedDisplay.Fill = capturedImage;

    // Request access to device and verify the VideoCaptureDevice is not null.
    if (CaptureDeviceConfiguration.RequestDeviceAccess() &&
        captureSource.VideoCaptureDevice != null)
    {
       try
       {
          captureSource.Start();
       }
       catch (InvalidOperationException ex)
       {
          // Notify user that the webcam could not be started.
          MessageBox.Show("There was a problem starting the webcam " +
                          "If using a Mac, verify default device settings." +
                          "Right click app to access the Configuration settings.");
      }
    }
    else
    {
       MessageBox.Show("Could not start Webcam. Verify device is connected " +
                       "and privacy permission allow access to device.");
    }
  }
}

private void CaptureButton_Click(object sender, RoutedEventArgs e)
{
   // verify the VideoCaptureDevice is not null and the device is started
   if (captureSource.VideoCaptureDevice != null 
        && captureSource.State == CaptureState.Started)
   {
      captureSource.CaptureImageAsync();
   }
}

private void CaptureSource_CaptureImageCompleted
    (object sender, CaptureImageCompletedEventArgs e)
{
   // Set the ImageBrush to the WriteableBitmap 
   capturedImage.ImageSource = e.Result;
}

private void CaptureSource_CaptureFailed(
                object sender, 
                ExceptionRoutedEventArgs e)
{
   // Handle capture failure.
}

VB

'The main object for interacting with the audio/video devices
Dim captureSource As CaptureSource

'Brush for the video feed.
Dim webcamBrush As VideoBrush

'Brush for the captured video frame.
Dim capturedImage As ImageBrush

Private Sub LayoutRoot_Loaded(ByVal sender As System.Object,
                               ByVal e As System.Windows.RoutedEventArgs)
   InitWebcam()
End Sub

Private Sub InitWebcam()
   ' Create the CaptureSource.
   Me.captureSource = New CaptureSource

  ' Async capture failed event handler.
  AddHandler captureSource.CaptureFailed,
      AddressOf Me.CaptureSource_CaptureFailed

  ' Async capture completed event handler.
  AddHandler captureSource.CaptureImageCompleted,
      AddressOf Me.CaptureSource_CaptureImageCompleted
End Sub

Private Sub StartButton_Click(ByVal sender As Object,
                              ByVal e As RoutedEventArgs)

 If (captureSource.State <> CaptureState.Started) Then
    ' Set the video capture source the WebCam.
    captureSource.VideoCaptureDevice =
        CaptureDeviceConfiguration.GetDefaultVideoCaptureDevice

    ' set the source on the VideoBrush used to display the video
    webcamBrush = New VideoBrush
    webcamBrush.SetSource(captureSource)

    ' Set the Fill property of the Rectangle to the VideoBrush.
    webcamDisplay.Fill = webcamBrush

    ' the brush used to fill the display rectangle
    capturedImage = New ImageBrush

    ' set the Fill property of the Rectangle to the ImageBrush
    capturedDisplay.Fill = capturedImage

    ' Request access to device and verify the VideoCaptureDevice is not null.
    If (CaptureDeviceConfiguration.RequestDeviceAccess _
           AndAlso (Not (captureSource.VideoCaptureDevice) Is Nothing)) Then
      Try
         captureSource.Start()
      Catch ex As InvalidOperationException
         ' Notify user that the webcam could not be started.
         MessageBox.Show("There was a problem starting the webcam " +
                         "If using a Mac, verify default device settings." +
                         "Right click app to access the Configuration settings.")
      End Try
    Else
      MessageBox.Show("Could not start Webcam. Verify device is connected " +
                      "and privacy permission allow access to device.")
    End If
  End If
End Sub

Private Sub CaptureButton_Click(ByVal sender As Object,
                                ByVal e As RoutedEventArgs)

   ' verify the VideoCaptureDevice is not null and the device is started
   If ((Not (captureSource.VideoCaptureDevice) Is Nothing) _
             AndAlso (captureSource.State = CaptureState.Started)) Then

      captureSource.CaptureImageAsync()

   End If
End Sub

Private Sub CaptureSource_CaptureImageCompleted(
                                   ByVal sender As Object,
                                   ByVal e As CaptureImageCompletedEventArgs)

   ' Set the ImageBrush to the WriteableBitmap
   capturedImage.ImageSource = e.Result

End Sub

Private Sub CaptureSource_CaptureFailed(ByVal sender As Object,
                                        ByVal e As ExceptionRoutedEventArgs)
   ' Handle capture failure
End Sub

The following example shows a webcam application that starts and stops a camera and captures a frame of video.

Webcam Settings and Permissions

You can change the webcam configurations and permissions settings on your system by accessing the Silverlight Configuration options. Right click on a Silverlight application and choose the Silverlight options.

In the Webcam configuration settings, you can change the default audio and video device.

The following image shows the Webcam settings dialog.

In the Silverlight permission settings, you can modify which sites are allowed or denied access. When a user agrees to the permission dialog generated by a call to RequestDeviceAccess and selects "Remember my answer", an entry for the site and application is added to the list shown in the Silverlight permission settings dialog.

The following image shows the permission settings dialog.

See Also

• Webcam and Device Overview