Laurent Kempé
Silverlight 4 Beta, Webcam
Utilisation de la nouvelle fonctionnalité permettant d’exploiter une webcam depuis Silverlight 4 Beta.
Par Laurent Kempé publié le 01/12/2009 à 16:30, lu 4773 fois,
commentaire(s) 0 commentaire(s) tag(s)Tags: Silverlight
Silverlight 4 lancé par Microsoft lors de la PDC 09 apporte son lot de nouveautés dont le support des webcams et des micros.
Nous allons donc voir comment utiliser la webcam dans vos application Silverlight 4 à l’aide du ‘pattern’ Model View ViewModel (MVVM) et du framework MVVM Light Toolkit.
Pour commencer nous créons une classe qui va nous servir de ViewModel ; MainPageViewModel.
Cette classe est associée au DataContext de la MainPage de notre projet :

namespace WebcamSL4

{

    public partial class MainPage : UserControl

    {

        public MainPage()

        {

            InitializeComponent();

 

            DataContext = new MainPageViewModel();

        }

    }

}
Nous définissons deux commandes dans notre ViewModel qui vont nous servir à démarrer et à stopper notre webcam, ces commandes utilisent le RelayCommand du framework MVVM Light Toolkit. Enfin nous définissons une VideoBrush qui sera utilisée pour afficher notre vidéo.

namespace WebcamSL4.ViewModel

{

    public class MainPageViewModel : ViewModelBase

    {

        public MainPageViewModel()

        {

            StartWebcamCommand = new RelayCommand(StartWebcam);

            StopWebcamCommand = new RelayCommand(StopWebcam);

            Video = new VideoBrush();

            Video.Stretch = Stretch.UniformToFill;

        }

 

        private CaptureSource _captureSource = new CaptureSource();

 

        public RelayCommand StartWebcamCommand { get; private set; }

        public RelayCommand StopWebcamCommand { get; private set; }

 

        public VideoBrush Video { get; private set; }

 
Finalement nous implémentons les deux méthodes StartWebcam et StopWebcam :

private void StartWebcam()

{

    if (CaptureDeviceConfiguration.RequestDeviceAccess())

    {

        _captureSource.VideoCaptureDevice = CaptureDeviceConfiguration.GetDefaultVideoCaptureDevice();

 

        Video.SetSource(_captureSource);

 

        _captureSource.Start();

    }

}

 

private void StopWebcam()

{

    if (_captureSource.State == CaptureState.Started)

    {

        _captureSource.Stop();

    }

}

 
Après avoir demandé l’autorisation d’utiliser la webcam à l’utilisateur, on associe la webcam par défaut à la VideoBrush définie par notre ViewModel en utilisant la méthode SetSource. Et on lance la webcam à l’aide de la méthode Start.
Lorsque le command StartWebcamCommand est lancé Silverlight 4 va demander à l’utilisateur s’il peut accéder à la webcam et au microphone en affichant le dialogue suivant :
 
/content/f4a3ee56-ae18-485b-a635-bf84c0dae1bc/image1.jpeg
 
Vous pouvez configurer votre webcam et microphone par défaut en utilisant la configuration de Silverlight en utilisant le bouton droit sur une application Silverlight et choisissant le tab Webcam / Mic :
 
/content/f4a3ee56-ae18-485b-a635-bf84c0dae1bc/image2.jpeg
 
Il nous reste à écrire le XAML de notre application MainPage.xaml, qui contiendra un Rectangle utilisé pour afficher la vidéo et deux boutons pour démarrer et stopper la vidéo :

< UserControl x : Class ="WebcamSL4.MainPage"

   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

   xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

   xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

   mc:Ignorable="d"

   d:DesignHeight="300" d:DesignWidth="400">

 

    < Grid x : Name ="LayoutRoot" Background ="White">

        < Button

           Content="Start"

           Height="23"

           HorizontalAlignment="Left"

           Margin="12,265,0,0"

           Name="button1"

           VerticalAlignment="Top"

           Width="75"

           Command="{Binding Path=StartWebcamCommand}"/>

        < Rectangle

           Height="238"

           HorizontalAlignment="Left"

           Margin="12,12,0,0"

           Name="rectangle1"

           Stroke="Black"

           StrokeThickness="1"

           VerticalAlignment="Top"

           Width="376"

           Fill="{Binding Path=Video}">

        </ Rectangle >

        < Button

           Command="{Binding Path=StopWebcamCommand}"

           Content="Stop"

           Height="23"

           HorizontalAlignment="Left"

           Margin="93,265,0,0"

           Name="button2"

           VerticalAlignment="Top"

           Width="75" />

    </ Grid >

</ UserControl >

Les deux commandes des buttons sont rattachées aux RelayCommands de notre ViewModel. Et enfin la propriété Fill du Rectangle est rattachée à la VideoBrush définit dans notre ViewModel.
Voilà le résultat final !
 
/content/f4a3ee56-ae18-485b-a635-bf84c0dae1bc/image3.jpeg
 
 
» Démarrer une discussion