Accueil > Silverlight, Silverlight 4 > [SL4] : Utilisation de la WebCam

[SL4] : Utilisation de la WebCam

Une des nouveautés de Silverlight 4 est sans conteste l’ajout de la possibilité d’utiliser une WebCam. Or on pouvais craindre que celà soit aussi compliqué qu’en WPF mais il n’en est rien ! L’utilisation de celle-ci se fait en quelques lignes.

Dans cet article nous allons voir comment afficher la WebCam, de l’arrêter ainsi que de prendre des capture d’image et les afficher à l’écran. Par ailleur afin de faciliter son utilisation nous allons réaliser un CustomControl se chargeant de faire les routines d’initialisation pour nous ainsi que de nous fournir un panel de fonctionnalités pour piloter la WebCam.

Création du controle


/// <summary>
	/// Controle facilitant l'utilisation de la WebCam
	/// </summary>
	public class WebCamControl : Control
	{
		#region Membres
		private CaptureSource _captureSource = null;
		#endregion

		#region Ctors
		/// <summary>
		/// Crée une instance du controle facilitant l'utilisation de la WebCam
		/// </summary>
		public WebCamControl()
		{
			this.DefaultStyleKey = typeof(WebCamControl);

			_captureSource = new CaptureSource();
VideoDevices = CaptureDeviceConfiguration.GetAvailableVideoCaptureDevices();
		}
		#endregion
	}

 
Puis nous allons rajouter des DependencyProperty nous permettant d’obtenir :

  • la liste des composants de capture vidéo
  • le composant vidéo actuellement sélectionné
  • si le controle est en cours de capture de vidéo
  • un brush contenant la video actuellement capturée

#region DPs
        /// <summary>
        /// Définit une DP de type ICollection contenant la liste des composant permettant de capturer de la vidéo
        /// </summary>
        public static readonly DependencyProperty VideoDevicesProperty = DependencyProperty.Register("VideoDevices", typeof(ICollection<VideoCaptureDevice>), typeof(WebCamControl), new PropertyMetadata(null));

 		/// <summary>
		/// Définit une DP de type Brush représendant la video actuellement capturée
		/// </summary>
		public static readonly DependencyProperty VideoProperty = DependencyProperty.Register("Video", typeof(VideoBrush), typeof(WebCamControl), new PropertyMetadata(new VideoBrush()));

		/// <summary>
		/// Définit une DP de type Brush représendant la video actuellement capturée
		/// </summary>
		public static readonly DependencyProperty IsCapturingProperty = DependencyProperty.Register("IsCapturing", typeof(Boolean), typeof(WebCamControl), new PropertyMetadata(false));

		/// <summary>
		/// Définit une DP de type VideoCaptureDevice représendant la source video actuellement sélectionnée
		/// </summary>
		public static readonly DependencyProperty CurrentVideoCaptureDeviceProperty = DependencyProperty.Register("CurrentVideoCaptureDevice", typeof(VideoCaptureDevice), typeof(WebCamControl), new PropertyMetadata(null, new PropertyChangedCallback(OnCurrentVideoCaptureDeviceChanged)));

		#endregion

#region Handlers
		private static void OnCurrentVideoCaptureDeviceChanged(object sender, DependencyPropertyChangedEventArgs e)
		{
			WebCamControl me = sender as WebCamControl;

			if (me != null)
			{
				if (me.IsCapturing)
				{
					me.StopCapture();

					if (me.CurrentVideoCaptureDevice != null)
					{
						me.StartCapture();
					}
				}
			}
		}
		#endregion
		#region Propriétées

		/// <summary>
        /// VideoDevices DependencyProperty. Obtient la liste des sources vidéo disponibles
		/// </summary>
        public ICollection<VideoCaptureDevice> VideoDevices
        {
            get
            {
                return (ICollection<VideoCaptureDevice>)GetValue(VideoDevicesProperty);
            }

            private set
            {
                SetValue(VideoDevicesProperty, value);
            }
        }

		/// <summary>
		/// Video DependencyProperty. Obtient le brush contenant la video actuellement capturée
		/// </summary>
		public VideoCaptureDevice CurrentVideoCaptureDevice
		{
			get
			{
				return (VideoCaptureDevice)GetValue(CurrentVideoCaptureDeviceProperty);
			}

			set
			{
				SetValue(CurrentVideoCaptureDeviceProperty, value);
			}
		}

		/// <summary>
		/// IsCapturing DependencyProperty. Détermine si on est en train de capturer la vidéo
		/// </summary>
		public Boolean IsCapturing
		{
			get
			{
				return (Boolean)GetValue(IsCapturingProperty);
			}

			private set
			{
				SetValue(IsCapturingProperty, value);
			}
		}

		/// <summary>
		/// Video DependencyProperty. Obtient le brush contenant la video actuellement capturée
		/// </summary>
		public VideoBrush Video
		{
			get
			{
				return (VideoBrush)GetValue(VideoProperty);
			}

			set
			{
				SetValue(VideoProperty, value);
			}
		}
		#endregion

 Une fois celà réalisé nous allons créer une fonction permettant de démarrer la capture vidéo si toutes les conditions sont remplies (un composant vidéo sélectionné).

Rien de bien compliqué la clé résidant dans le fait de penser de définir deux points :

  •  la source vidéo dans notre objet CaptureSource (_captureSource) par la source vidéo sélectionnée.
  • associé cette source au brush représentant la vidéo « Video.SetSource(_captureSource); »

Puis penser à débuter la capture vidéo via « _captureSource.Start(); » et la capture débute !

/// <summary>
		/// Démarre la capture de la vidéo sur la WebCam selectionnée
		/// </summary>
		public void StartCapture()
		{
			if ((_captureSource != null) && (CurrentVideoCaptureDevice != null) && (IsCapturing == false))
			{
				_captureSource.Stop();
				IsCapturing = false;

				_captureSource.VideoCaptureDevice = CurrentVideoCaptureDevice;

				if (Video == null)
					Video = new VideoBrush();

				//on définit la source de capture en tant que brush
				Video.SetSource(_captureSource);

				//si on a les droits on lance la capture
				if (CaptureDeviceConfiguration.AllowedDeviceAccess || CaptureDeviceConfiguration.RequestDeviceAccess())
				{
					_captureSource.Start();
					IsCapturing = true;
				}
			}
		}

A ce stade nous avons possibilité d’afficher la vidéo, nous allon faire une méthode permettant de stopper la dite capture


/// <summary>
		/// Arrete la capture de la video de la WebCam sélectionnée
		/// </summary>
		public void StopCapture()
		{
			if (_captureSource != null)
			{
				_captureSource.Stop();

				Video = null;

				IsCapturing = false;
			}
		}

Pour montrer comment faire pour prendre une capture d’image de la vidéo en cours :

/// <summary>
		/// Réalise une capture d'une image de la WebCam
		/// </summary>
		/// <param name="callback"></param>
		public void TakeSnapShot(Action<WriteableBitmap> callback)
		{
			if ((_captureSource != null) && IsCapturing)
			{
				_captureSource.AsyncCaptureImage(callback);
			}
		}

A présent nous avons tout ce qu’il nous faut pour afficher de la vidéo au sein d’une application Silverlight 4 ! Nous allons voir comment l’utiliser !

Utilisation

Il faut tout dabord créer un style par défaut pour le controle dans generic.xaml par exemple :

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:SL4HTML">
    <Style TargetType="local:WebCamControl">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="local:WebCamControl">
                    <Rectangle Fill="{TemplateBinding Video}"/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

 Et pour terminer créer une page permettant d’afficher la webcam ainsi que quelques boutons pour piloter celle-ci :

<UserControl x:Class="SL4HTML.MainPage"
			 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
			 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
			 xmlns:controls="clr-namespace:SL4HTML">

	<Grid x:Name="LayoutRoot"
		  Background="White">
		<Grid.RowDefinitions>
			<RowDefinition Height="Auto" />
			<RowDefinition />
		</Grid.RowDefinitions>

		<Grid.ColumnDefinitions>
			<ColumnDefinition Width="Auto" />
			<ColumnDefinition />
		</Grid.ColumnDefinitions>

		<!--ACTIONS-->
		<StackPanel Orientation="Horizontal"
					Grid.ColumnSpan="2"
					Margin="3">
			<Button x:Name="Start"
					Content="Start"
					Click="Start_Click" />
			<Button x:Name="Stop"
					Content="Stop"
					Click="Stop_Click" />
			<Button x:Name="SnapShot"
					Content="Photo !"
					Click="Photo_Click" />
			<ComboBox ItemsSource="{Binding ElementName=WebCamControl, Path=VideoDevices, Mode=OneTime}"
					  SelectedItem="{Binding ElementName=WebCamControl, Path=CurrentVideoCaptureDevice, Mode=TwoWay}"
					  DisplayMemberPath="FriendlyName"
					  Width="300" />

		</StackPanel>

		<!--WEBCAM VIEW-->
		<Border BorderBrush="White"
				Background="White"
				BorderThickness="5"
				Grid.Row="1"
				Grid.Column="1"
				Margin="3">
			<Border.Effect>
				<DropShadowEffect ShadowDepth="0"
								  Opacity="0.5" />
			</Border.Effect>
			<controls:WebCamControl x:Name="WebCamControl" />
		</Border>

		<!--SNAPSHOTS-->
		<ListBox x:Name="PictureList"
				 ItemsSource="{Binding SnapShots, Mode=OneWay}"
				 ScrollViewer.VerticalScrollBarVisibility="Auto"
				 Grid.Row="1"
				 Margin="3">
			<ListBox.ItemTemplate>
				<DataTemplate>
					<Border BorderBrush="White"
							Background="White"
							BorderThickness="5">
						<Border.Effect>
							<DropShadowEffect ShadowDepth="0"
											  Opacity="0.5" />
						</Border.Effect>
						<Image Source="{Binding}"
							   Width="100"
							   Stretch="Uniform"
							   HorizontalAlignment="Center"
							   VerticalAlignment="Center" />
					</Border>
				</DataTemplate>
			</ListBox.ItemTemplate>

			<ListBox.Style>
				<Style TargetType="ListBox">
					<Setter Property="Background"
							Value="Transparent" />
					<Setter Property="Padding"
							Value="0" />
					<Setter Property="Template">
						<Setter.Value>
							<ControlTemplate TargetType="ListBox">
								<Border>
									<ScrollViewer Padding="0"
												  Background="Transparent">
										<ItemsPresenter />
									</ScrollViewer>
								</Border>

							</ControlTemplate>
						</Setter.Value>
					</Setter>
				</Style>
			</ListBox.Style>

		</ListBox>
	</Grid>
</UserControl>

 Et voici le code behind

using System.Windows;
using System.Windows.Controls;
using System.Windows.Media.Imaging;
using System.Collections.ObjectModel;

namespace SL4HTML
{
    public partial class MainPage : UserControl
	{
		#region Membres
		private ObservableCollection<WriteableBitmap> _snapShots = new ObservableCollection<WriteableBitmap>();
		#endregion

		#region Ctors
		public MainPage()
        {
            InitializeComponent();

			DataContext = this;
        }
		#endregion

		#region Propriétées
		public ObservableCollection<WriteableBitmap> SnapShots
		{
			get
			{
				return _snapShots;
			}
		}
		#endregion

		#region Handlers
		private void Start_Click(object sender, RoutedEventArgs e)
		{
			WebCamControl.StartCapture();
		}

		private void Stop_Click(object sender, RoutedEventArgs e)
		{
			WebCamControl.StopCapture();
		}

		private void Photo_Click(object sender, RoutedEventArgs e)
		{
			WebCamControl.TakeSnapShot((picture) =>
			{
				_snapShots.Insert(0, picture);
			});
		}
		#endregion
	}
}

Silence… Action !

En lancant votre application vous devrez sélectionner une WebCam et cliquer sur « Start »

image

Un message de sécurité apparaitra vous indiquant que le site souhaite afficher votre webcam :

image

Ces informations sont disponibles si vous faites clic droit sur le site « Silverlight » et l’onglet « Webcam / Mic »

image

Voici le résultat final 🙂 :

image

Publicités
Catégories :Silverlight, Silverlight 4
  1. Aucun commentaire pour l’instant.
  1. No trackbacks yet.

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion /  Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion /  Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion /  Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion /  Changer )

w

Connexion à %s

%d blogueurs aiment cette page :