//
you're reading...
C#, Pemrograman

Aplikasi WebCam Sederhana dengan Silverlight 4


Ada yang quotes sih katanya, “Ikatlah ilmu dengan menuliskannya”. Tertarik dengan fitur baru yang ada di Silverlight 4, yaitu kita dapat mengakses webcam secara langsung. Info ini saya dapatkan ketika mengikuti sharing
technology update di ITB hari Minggu (21/11/2010). Saya menggunakan Visual Studio 2010 untuk mendemokan aplikasi ini. Silverlight 4 ini berkembang beriringan dengan munculnya .NET Framework 4.

Pertama kita mulai dengan membaca Bismillahirrahmanirrahim sebelum memulai aktivias ini J. Lalu, buatlah sebuah project Silverlight Application dengan nama SimpleWebcam di Visual Studio 2010. Saya menggunakan bahasa pemrograman C# dalam contoh ini. Secara otomatis akan dibuatkan 2 buah project: project Silverlight dan project Web. Terlihat seperti gambar berikut.


Terdapat MainPage.xaml yang di dalamnya terdapat anak MainPage.xaml.cs, apakah itu? File yang berekstensi .xaml adalah file dimana kita mendesain UI (untuk desainer) dan .xaml.cs adalah untuk kita membuat untaian algoritma sebagai control dari aplikasi yang kita buat (untuk developer). Meskipun file .xaml
ditujukan untuk mendesain UI dari aplikasi kita, didalamnya akan menghasilkan kode-kode yang nantinya dapat dimengerti oleh developer saat akan mengembangkan aplikasi kita. Jadi, XAML ini berfungsi sebagai perantara/jembatan antara developer dan desainer.

Selanjutnya, buatlah kode program berikut pada file MainPage.xaml.

<UserControl x:Class=”SimpleWebcam.MainPage”


xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation&#8221;


xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml&#8221;


xmlns:d=”http://schemas.microsoft.com/expression/blend/2008&#8243;


xmlns:mc=”http://schemas.openxmlformats.org/markup-compatibility/2006&#8243;


mc:Ignorable=”d”


d:DesignHeight=”429″ d:DesignWidth=”798″>


<Grid x:Name=”LayoutRoot” Background=”White” Height=”406″ Width=”730″>


<Rectangle Height=”229″ HorizontalAlignment=”Left” Name=”viewCam” Stroke=”#FFFF1717″ StrokeThickness=”1″ VerticalAlignment=”Top” Width=”346″ />


<Button Content=”Start” Height=”37″ HorizontalAlignment=”Left” Margin=”231,250,0,0″ Name=”btnStart” VerticalAlignment=”Top” Width=”75″ Click=”btnStart_Click” />


<Button Content=”Stop” Height=”37″ HorizontalAlignment=”Left” Margin=”324,250,0,0″ Name=”btnStop” VerticalAlignment=”Top” Width=”75″ Click=”btnStop_Click” />


<Rectangle Height=”229″ HorizontalAlignment=”Left” Margin=”373,1,0,0″ Name=”viewFoto” Stroke=”#FFEF0909″ StrokeThickness=”1″ VerticalAlignment=”Top” Width=”357″ />


<Button Content=”Capture” Height=”37″ HorizontalAlignment=”Left” Margin=”416,250,0,0″ Name=”btnCapture” VerticalAlignment=”Top” Width=”75″ Click=”btnCapture_Click” />


</Grid>

</UserControl>

Syair diatas akan menghasilkan tampilan seperti gambar berikut.

Nah, sekarang kita masuk ke halaman MainPage.xaml.cs. Tuliskan isikan halaman tersebut dengan kode berikut.

using System;

using System.Collections.Generic;

using System.Linq;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

namespace SimpleWebcam

{


public
partial
class
MainPage : UserControl

{


public
VideoBrush webcamBrush;


public
ImageBrush capturedImage;


public
CaptureSource captureSource = new
CaptureSource();


public MainPage()

{

InitializeComponent();


VideoCaptureDevice webcam;

webcam = CaptureDeviceConfiguration.GetDefaultVideoCaptureDevice();

capturedImage = new
ImageBrush();


if (webcam != null)

{

captureSource.VideoCaptureDevice = webcam;

webcamBrush = new
VideoBrush();

webcamBrush.SetSource(captureSource);

viewCam.Fill = webcamBrush;

viewFoto.Fill = capturedImage;

captureSource.CaptureFailed += new
EventHandler<ExceptionRoutedEventArgs>(CaptureSource_CaptureFailed);

captureSource.CaptureImageCompleted += new
EventHandler<CaptureImageCompletedEventArgs>(CaptureSource_CaptureImageCompleted);

}

}


private
void btnStart_Click(object sender, RoutedEventArgs e)

{


if (CaptureDeviceConfiguration.RequestDeviceAccess() && captureSource.VideoCaptureDevice != null)

{

captureSource.Start();

}

}


private
void btnStop_Click(object sender, RoutedEventArgs e)

{


if (captureSource.VideoCaptureDevice != null)

{

captureSource.Stop();

}

}


private
void CaptureSource_CaptureImageCompleted(object sender, CaptureImageCompletedEventArgs e)

{

capturedImage.ImageSource = e.Result;

}


private
void CaptureSource_CaptureFailed(object sender, ExceptionRoutedEventArgs e)

{


MessageBox.Show(string.Format(“Failed to capture image: {0}”, e.ErrorException.Message));

}


private
void btnCapture_Click(object sender, RoutedEventArgs e)

{


if (captureSource.VideoCaptureDevice != null && captureSource.State == CaptureState.Started)

{

captureSource.CaptureImageAsync();

}

}

}

}

Setelah semua selesai simpan project. Lalu Run dengan menekan tombol F5 pada keyboard Anda, atau tekan tombol . Dan hasilnya akan seperti gambar berikut.

Selamat mencoba.

CMIIW.

J

Iklan

About Rendy Faqot

Adalah Sarjana Komputer dari jurusan Ilmu Komputer Universitas Pendidikan Indonesia 2008. Menyelesaikan studi selama 5 tahun yang penuh dengan lika-liku kehidupan mahasiswa sebagaimana mahasiswa normal pada umumnya. Tertarik dengan bidang Data Mining, Natural Language Processing, dan Mobile Development. InsyaAllah, mohon doa-nya agar bisa melanjutkan studi master untuk bidang tersebut. Pernah mencicipi dunia industri sebagai Analyst Programmer di Fujitsu Indonesia dan PT. BSP. Saat ini berdomisili di Bandung dan akan melanjutkan kehidupan di Bandung (untuk sementara).

Diskusi

Belum ada komentar.

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: