Blog

  • 19 Kas 2009

Silverlight 4 Beta ile WebCam ve Mikrofon Erişimi

Merhaba arkadaşlar bu makalemizde Silverlight 4 Beta ile birlikte gelen mikrofon ve webcam gibi capture aygıtlarına nasıl erişileceğine bakacağız.

Silverlight’ın ilk üç versiyonunda müthiş yenilikler geldi ve kullanım oranı her versiyon ile birlikte katlanarak arttı. Hala eksik olan birşeyler vardı, bunların başında WebCam ve Mikrofon erişimi geliyordu. Silverlight 4 Beta ile birlikte müjdeli haber geldi ve artık silverlight ile WebCam ve Mikrofon erişimi mümkün! Hemde kullanımı son derece basit. Uygulamaya geçmeden önce Silverlight 4 Beta için gerekli olan araçları indirip kuralım.

- Visual Studio 2010 Beta 2 yada Visual Web Developer Express 2010 Beta 2
- Silverlight 4 Beta Tools for Visual Studio 2010
- Windows Runtime yada Mac Runtime
- Microsoft Expression Blend for .NET 4 Preview

Araçları kurduktan sonra örneğimiz için Visual Studio 2010 ile yeni bir Silverlight projesi başlatalım. Formumuza Webcam’den gelen görüntüyü göstermek için Rectangle nesnesi, Ses ve kamera aygıtlarını listelemek için iki adet combobox nesnesi, camerayı başlatmak-durdurmak ve cameradaki görüntünün resmini almak için bir adet button ve image nesnesi ekleyelim. XAML kodumuz aşağıdaki gibi oldu.

[XAML]

<UserControl xmlns=" http://schemas.microsoft.com/winfx/2006/xaml/presentation" mlns: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" x:Class="WebCamMicrofon.MainPage" Height="340" Width="550">

<Grid x:Name="LayoutRoot" Background="White">
    <Rectangle Fill="White" Width="400" Height="300"Stroke="Black" Margin="10,20,130,20" x:Name="player"/>
    <ComboBox HorizontalAlignment="Right" VerticalAlignment="Top" Width="120" Margin="0,20,8,0" x:Name="cmbAudioSources"/>
    <ComboBox HorizontalAlignment="Right" Margin="0,54,8,0" VerticalAlignment="Top" Width="120" x:Name="cmbVideoSources"/>
    <Button Content="Fotoğraf Çek" Width="104" Margin="422,0,24,175" x:Name="btnTake" Height="22" erticalAlignment="Bottom" />
    <Button Content="Durdur" HorizontalAlignment="Right" VerticalAlignment="Top" Width="104" x:Name="btnStop" Margin="0,115,24,0"/>
    <Button Content="Oynat" HorizontalAlignment="Right" VerticalAlignment="Top" Width="104" x:Name="btnStart" Margin="0,89,24,0"/>
    <Image Height="90" HorizontalAlignment="Left" Margin="422,193,0,0" Stretch="Fill" x:Name="image" VerticalAlignment="Top" Width="120" />
</Grid>
</UserControl>

CaptureSource nesnesi, sistemdeki görüntü ve sesin istemcinin browserında yayınlanmasını sağlar. (Hatta yayın sırasında bir karenin yakalanmasını sağlıyor J).

CaptureSource nesnesinin Start metodunu kullanarak görüntünün capture edilmesini sağlıyoruz. Stop medodu ise capture işleminin durdurulmasını sağlıyor. State isimli enum ile CaptureSource nesnesinin capture durumunu kontrol edebiliriz. AudioCaptureDevice özelliği sistemde yer alan ilişkili bir ses aygıtını, VideoCaptureDevice özelliği de sistemde yer alan ilişkili bir görüntü aygıtını temsil eder.

CaptureDeviceConfiguration nesnesi, sistemde yer alan ses ve görüntü aygıtlarına erişmemizi sağlar. Ayrıca kullanıcının bu aygıtlara erişime izin verip vermediğini kontrol eden üyeleri vardır.

[C#]


public partial class MainPage : UserControl
{
    public CaptureSource CaptureSource { get; set; }

    public MainPage()
    {
        InitializeComponent();
        // Kontrolllerin eventlerini oluşturalım
        this.Loaded += new RoutedEventHandler(MainPage_Loaded);
        this.btnStart.Click += new RoutedEventHandler(btnStart_Click);
        this.btnStop.Click += new RoutedEventHandler(btnStop_Click);
        this.btnTake.Click += new RoutedEventHandler(btnTake_Click);
    } 

    void MainPage_Loaded(object sender, RoutedEventArgs e)
    {
        // İlk yükleme de sistem de yer alan aygıtları ilgili kontrollere yüklüyoruz.
        AygitlariYukle();
    }

    private void AygitlariYukle()
    {
        // CaptureSource Nesnesinin örneğini alalım.
        CaptureSource = new CaptureSource(); 
        
        // Ses aygıtlarını combobox'a yükleyelim. GetAvailableAudioCaptureDevices() Metodu sisteme yer alan ses aygıtlarını getiriyor.
        cmbAudioSources.ItemsSource = CaptureDeviceConfiguration.GetAvailableAudioCaptureDevices();
        cmbAudioSources.DisplayMemberPath = "FriendlyName"; 
        
        // Kamera aygıtlarını combobox'a yükleyelim. GetAvailableVideoCaptureDevices() Metodu sisteme yer alan kamera aygıtlarını getiriyor.
        cmbVideoSources.ItemsSource = CaptureDeviceConfiguration.GetAvailableVideoCaptureDevices();
        cmbVideoSources.DisplayMemberPath = "FriendlyName";
    }

    void btnStart_Click(object sender, RoutedEventArgs e)
    { 
        // CaptureSource nesnesi başlatılmadıysa... 
        if (CaptureSource.State != CaptureState.Started)
        {
            // Seçtiğimiz ses aygıtını CaptureSource nesnesinin AudioCaptureDevice özelliğine bağlayalım.
            CaptureSource.AudioCaptureDevice = (AudioCaptureDevice)cmbAudioSources.SelectedItem;
            // Seçtiğimiz kamera aygıtını CaptureSource nesnesinin VideoCaptureDevice özelliğine bağlayalım.
            CaptureSource.VideoCaptureDevice = (VideoCaptureDevice)cmbVideoSources.SelectedItem;

            // VideoBrush nesnesi oluşutralım ve SetSource metoduna CaptureSource'u parametre olarak geçelim.
            VideoBrush vb = new VideoBrush();
            vb.SetSource(CaptureSource);
            // Player isimli kontrol de kameradan gelen görüntüyü gösterelim...
            player.Fill = vb; 

            // İstemci aygıtlara erişimi izni verdiyse capture işlemini başlatalım.
            if (CaptureDeviceConfiguration.AllowedDeviceAccess || CaptureDeviceConfiguration.RequestDeviceAccess())
            { 
                CaptureSource.Start();
            }
        }
    } 
    
    void btnStop_Click(object sender, RoutedEventArgs e)
    {
        // Kamera görüntüsünü capture ediliyorsa.
        if (CaptureSource.State != CaptureState.Stopped)
        {
            // Capture işlemini durduralım.
            CaptureSource.Stop();
        }
    }

    void btnTake_Click(object sender, RoutedEventArgs e)
    { 
    // Kamera görüntüsü capture ediliyorsa.
        if (CaptureSource.State== CaptureState.Started)
        {
            CaptureSource.AsyncCaptureImage((rsm) =>
            {
                image.Source = rsm; // Yakalanan kamera görüntüsünü Image nesnesine bağlayalım
            });
        }
    }        
}

Uygulamamızı çalıştırdığımızda aşağıdaki gibi bir uyarı çıkacaktır. (Kamera ve Ses aygıtınıza erişime izin vermemizi istiyor) Evet diyerek devem edelim.

Sistemimizde yer alan ses ve kamera aygıtını seçerek kameradan görüntü almaya başlayalım.

Oynat dediğimizde:)

Birde resim yakalayalım :)

Bu makalenin de sonuna geldik başka bir makale de görüşmek üzere. Silverlight ile kalın ;)

Örnek uygulama için tıklayınız

Sem GÖKSU
www.semgoksu.com | www.yazilimgunlugu.com
sem.goksu@yazilimgunlugu.com

Kaynaklar
Silverlight 4 Beta SDK








Yorum (8)

  • Recep selli / 19.11.2009 17:52:34

    Vov :) süper bir uygulama ve makale eline sağlık hocam ayrıca gene karizman konuşuyor :P

  • Serkan Eren / 19.11.2009 17:53:09

    Ellerin dert görmesin hocam eline sağlık, birileri var biliyorum bu sistem için aylarca çalıştılar :D

  • ismi lazım değil / 20.12.2009 23:21:03

    doğuştan öğrenmedin herhalde bunları. kaynak yazsana kardeşim

  • Nezuk Kardes / 9.1.2010 14:21:57

    Güzel Makale :)

  • Hüseyin / 11.6.2010 03:23:04

    Elinize sağlık hocam. Birde kaydet butonu ile bir klasöre çektiğimiz fotoğrayı kaydetmeyi gösterebilirmisiniz

  • İlkay / 24.8.2010 08:33:54

    Hocam ben dediğiniz herşeyi yaptım ama olmadı malesef.. http://a.imageshack.us/img163/1891/adszoy.jpg burda g-hata var.Nedense Data.Media dan gelen hiçbirşeyi tanımıyor.Ne yapabilirim

  • muhammed / 6.10.2010 08:19:04

    merhaba benim bir sorum var webcam dan yakaladığımız goruntuyu servera nasıl gonderebilirim (exp. encoder kullanmadan)yardımcı olursanız sevinirim iyi çalışmalar

  • Fatih Parak / 24.1.2012 04:53:19

    CaptureSource.AsyncCaptureImage((rsm) => şekilde yazamıyorum sizin uygulamayı indirip çalıştırdığımda. Uygulamamın günü dolmuş lütfen tam sürümünü alın diyor. Ben yazmaya çalıştırığımda böyle yazmaya çalışıyorum ama hata alıyor captureSource.CaptureImageAsync((rsm) => bu sorunu nasıl çözebiliriz

Yorum Yaz