Vinicius Quaiato

Tecnologia e algo mais…

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:

Criando projeto Silverlight Blend 4 (ampliar)

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:

Resultado da pagina XAML (ampliar)

<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:

Abrir projeto Silverlight no Visual Studio (ampliar)

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:

Silverlight pedindo permissao para usar webcam (ampliar)

Resultado Webcam com silverlight 4 (ampliar)

É isso aê pessoal, qualquer dúvida é só entrar em contato.
Em breve postarei mais informações sobre a nova versão do silverlight.

Att,
Vinicius Quaiato.

Related posts:

1. Silverlight 4 beta – Novas Features – Acessando Arquivos Fala galera, beleza? Silverlight 4 – Capturando WebCam – http://viniciusquaiato.com/blog/index.php/silverlight-4-capturando-webcam/...
2. Visual Studio 2010 – Novas Features – Generate from usage Fala galera! Aqui vai mais uma feature incrível no VS2010:...
3. Visual Studio 2010 – Novas Features – Docking Janelas Fala galera! Há uma semana estou testando o Visual Studio...
4. Visual Studio 2010 – Novas Features – Parallel For Fala Galera! Alguns de vocês já conheciam os as Parallels...
5. Visual Studio 2010 RC lançado Fala galera! Dia 10 de fevereiro, se não me engano,...