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:

[code lang=”csharp”]
<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>
[/code]

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:

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

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

captureSource.VideoCaptureDevice = videoDevice;
}
[/code]

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:

[code lang=”csharp”]
private void FillCamera()
{
var videoBrush = new VideoBrush();

videoBrush.SetSource(captureSource);

WebCam.Fill = videoBrush;

}
[/code]

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:

[code lang=”csharp”]
private void StartCamera()
{

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

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

}
}
[/code]

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:

[code lang=”csharp”]
public MainPage()

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

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

FillCamera();
StartCamera();
}
[/code]

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.