Membuat Aplikasi Webcam Sederhan Dengan Silverlight4

Pertama kita mulai dengan membaca Bismillahirrahmanirrahim sebelum memulai aktivias ini . 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"
    xmlns: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"
    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.