Profissionais TI – Pra quem respira informação

Fala galera, beleza?

Dia 18 a Microsoft anunciou o Silverlight 4 beta, no PDC09. De fato existem muitas features novas nesta versão do Silverlight e uma destas novas features é a captura de Webcam (todas as informações podem ser vistas aqui), e vamos realizar aqui um exemplo básico, baseado no vídeo do Tim Heuer que pode ser visto aqui.

Antes de começarmos vamos instalar as ferramentas necessárias:

Visual Studio 2010 beta 2 - http://msdn.microsoft.com/en-us/vstudio/dd582936.aspx

ou

Visual Web Developer Express beta 2 – http://go.microsoft.com/fwlink/?LinkID=167874

Microsoft Expression Blend para .NET 4 – http://go.microsoft.com/fwlink/?LinkId=169446

Silverlight Beta Tools para Visual Studio 2010 – http://go.microsoft.com/fwlink/?LinkID=177508

Vamos lá pessoal, vamos começar.

Primeiro vou abrir o Blend e então criar um novo projeto silverlight, como mostra a figura abaixo:

Agora vamos criar uma página bem simples, o resultado pode ser visto na imagem abaixo e logo em seguida o código XAML necessário:

<UserControl
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	x:Class="Teste_com_webcam.MainPage"

	Width="640" Height="480">

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

		<Grid.RowDefinitions>
			<RowDefinition  Height="1*" />
			<RowDefinition Height="7*" />

			<RowDefinition Height="1*" />
		</Grid.RowDefinitions>

		<TextBlock Grid.Row="0" FontSize="40" HorizontalAlignment="Center">Webcam</TextBlock>

		<Border Background="Black" Grid.Row="1" Width="500" Height="350" CornerRadius="20">

			<Rectangle x:Name="WebCam" Grid.Row="1" Width="480" Height="330"></Rectangle>

		</Border>

		<Button x:Name="btnStart"
				Content="Iniciar"

				Grid.Row="2"
				Width="100"
				FontSize="20" />

	</Grid>
</UserControl>

Agora podemos abrir o projeto silverlight no Visual Studio 2010 para que possamos editar o código, conforme mostra a figura abaixo:

Agora vamos adicionar o código necessário para que nossa webcam seja capturada. Vamos abrir o arquivo MainPage.xaml.cs e então criar o seguinte código:

CaptureSource captureSource = null;
private void Initialize()
{
    var videoDevice = CaptureDeviceConfiguration.GetAvailableVideoCaptureDevices()[0];

    if (captureSource == null)
        captureSource = new CaptureSource();

    captureSource.VideoCaptureDevice = videoDevice;
}

Neste código estamos criando um objeto CaptureSource que será responsável por realizar a nossa captura da webcam.

Na linha 4 pegamos o device de captura de vídeo disponível. Como eu só tenho uma webcam, eu vou pegar o primeiro device.

Na linha 9 eu atribuo o meu device para a propriedade de video device do objeto CaptureSource.

Agora precisamos “pintar” nossa webcam dentro da área onde ela será exibida, no nosso caso um simples retângulo no nosso XAML:

private void FillCamera()
{
    var videoBrush = new VideoBrush();

    videoBrush.SetSource(captureSource);

    WebCam.Fill = videoBrush;

}

O que fazemos no código acima é criar um VideoBrush que irá utilizar nosso CaptureSource. Então preenchemos nosso rectangle com o videoBrush. Bem simples.

Até agora se rodarmos nosso código nada acontecerá, pois a mágica acontece neste método:

private void StartCamera()
{

    if (CaptureDeviceConfiguration.AllowedDeviceAccess || CaptureDeviceConfiguration.RequestDeviceAccess())
    {

        if (captureSource.State != CaptureState.Started)
            captureSource.Start();

    }
}

Tudo o que fazemos aqui é dizer ao Silverlight para pedir permissão para usar a câmera com o RequestDeviceAccess().

Depois executamos o comando Start() dentro do nosso captureSource, e neste momento o Silverlight irá pedir permissão para o usuário do site e então irá iniciar a exibição do vídeo.

Agora precisamos apenas fazer a chamada para os nossos métodos.

Vamos criar um evento para nosso botão iniciar, para isso faremos uma alteração no contrutor da nossa página e criaremos um método para responder ao evento click do botão, conforme mostrado abaixo:

public MainPage()

{
    InitializeComponent();
    btnStart.Click += new RoutedEventHandler(btnStart_Click);

}
void btnStart_Click(object sender, RoutedEventArgs e)
{
    Initialize();

    FillCamera();
    StartCamera();
}

E podemos ver o resultado nas imagens abaixo:

É isso aê pessoal, qualquer dúvida é só entrar em contato.

Em breve postarei mais informações sobre a nova versão do silverlight.