Chụp ảnh từ webcam với Silverlight

Bài viết gốc được đăng trên trang d.jou.vn

Bài viết này nhằm giới thiệu với các bạn về cách chụp ảnh từ webcam trong Silverlight 4.0+ thông qua lớp CaptureSource của namespace System.Windows.Media.
Một số phương thức và thuộc tính của lớp CaptureSource mà bạn cần quan tâm:
1. RequestDeviceAccess(): Phương thức này trả về giá trị Boolean cho biết thiết bị (webcam & microphone) có được phép truy cập hay không. Nếu không được phép truy cập, nó sẽ hiển thị hộp thoại yêu cầu người dùng cho phép truy cập.



2. AllowedDeviceAccess: Trả về true nếu người dùng cho phép ứng dụng truy cập vào thiết bị media.
3. GetDefaultVideoCaptureDevice(): Trả về đối tượng VideoCaptureDevice đại diện cho thiết bị Video capture mặc định
4. GetDefaultAudioCaptureDevice(): Trả về đối tượng AudioCaptureDevice đại diện cho thiết bị Audio capture mặc định.
Để bắt đầu viết ứng dụng, bạn cần phải cài đặt Visual Studio 2010 hoặc Visual Web Developer 2010 Expresss và Silverlight SDK 4.0.
Chúng ta sẽ xây dựng một dự án Silverlight sử dụng lớp CaptureSource để chụp hình trực tiếp từ webcam. Các bước thực hiện như sau:

Bước 1 – Tạo dự án

Đầu tiên, bạn mở Visual Studio 2010, chọn File->New Project

Trong phần Install Templates, bạn chọn Silverlight -> Silverlight Application ->…-> Ok

Sẽ có một hộp thoại xuất hiện yêu cầu bạn chọn Project website để test. Bạn nên để nguyên theo mặc định và click Ok.

Bước 2 – Thiết kế giao diện cho trang MainPage.xaml

Trong trang MainPage.xaml, bạn thiết kế như sau:

Code

        <Rectangle Stroke="Black" x:Name="rectWebCamView" Width="480" Height="360" Grid.Column="0" Grid.Row="0" Margin="0,10,0,0">
            <Rectangle.Fill>
                <VideoBrush Stretch="Uniform"
                        x:Name="cameraBrush" />
            </Rectangle.Fill>
        </Rectangle>
        <StackPanel Grid.Column="0" Grid.Row="1" Orientation="Horizontal" HorizontalAlignment="Center">
            <Button x:Name="btnCaptureDevice" 
             Content="Capture Device" Margin="5"/>
            <Button x:Name="btnPlayCapture" 
             Content="Start Capture" Margin="5"/>
            <Button x:Name="btnStopCapture" 
             Content="Stop Capture" Margin="5"/>
            <Button x:Name="btnSaveCapture" 
             Content="Save Image" Margin="5" Click="BtnSaveCaptureClick" />            
        </StackPanel>
 

 Trong đoạn code trên, tôi dùng đối tượng Rectagle để chứa Video thu được từ Webcam và các nút xử lý khi chụp ảnh.

Code behind

private readonly CaptureSource _captureSource = new CaptureSource();
private WriteableBitmap _lastSnapshot;
 

Bước 3 – Cài đặt chức năng chụp ảnh và lưu lại hình ảnh đã được chụp

CaptureSource cung cấp các phương thức làm việc với audio hoặc video từ các thiết bị capture.
LastSnapShot dùng để giữ khung hình chụp cuối cùng

_captureSource.CaptureImageCompleted += (s, a) =>
{
     _lastSnapshot = a.Result;
     snapshot.Visibility = Visibility.Visible;
     snapshot.Source = _lastSnapshot;
     _captureSource.Stop();
 };
 _captureSource.CaptureImageAsync();
 

_captureSource.CaptureImageCompleted += (s, a) =>
{
     _lastSnapshot = a.Result;
     snapshot.Visibility = Visibility.Visible;
     snapshot.Source = _lastSnapshot;
     _captureSource.Stop();
 };
 _captureSource.CaptureImageAsync();
 

CaptureSource.CaptureImageCompleted: Sự kiện này xảy ra khi có 1 tấm ảnh được chụp hoàn tất)
CaptureSource.CaptureImageAsync(): Bắt đầu thực hiện yêu cầu chụp ảnh không đồng bộ. Để nhận tấm ảnh trả về, bạn phải gọi sự kiện CaptureImageCompleted (của đối tượng CaptureSource)
Lưu ảnh đã được chụp

Trong Silverlight chưa hỗ trợ hàm lưu ảnh nên ở đây, tôi sử dụng thư viện .NET Image Tools để thực hiện việc lưu. Các định dạng hỗ trợ là PNG, BMP và JPEG.
Để làm việc với .NET Image Tools, bạn cần add 2 file assemblies sau:

• ImageTools
• ImageTools.IO.Jpeg (Ở đây mình lưu ảnh ở dạng JPEG)

Mã cài đặt như sau:

private void BtnSaveCaptureClick(object sender, RoutedEventArgs e)
        {
            if (_lastSnapshot != null)
            {
                var dlg = new SaveFileDialog
                {
                    DefaultExt = ".png",
                    Filter = "JPEG File|*.jpeg"
                };
                if (dlg.ShowDialog() == true)
                {
                    using (var stream = dlg.OpenFile())
                    {
                        // Convert raw captured bitmap to the image that Image Tools understand with the extension method
                        var image = _lastSnapshot.ToImage();
                        // Declare jpeg encoder
                        var encoder = new JpegEncoder();
                        // Set the image quality
                        //encoder.Quality = 90;
                        // Finally encode raw bitmap and save it as a jpg image
                        encoder.Encode(image, stream);
                        // Close the stream
                        stream.Close();
                    }
                }
            }
        }
 

Kết luận

Như vậy tôi đã hướng dẫn về cách sử dụng tính năng mới của Silverlight để chụp ảnh từ webcam.
Chúc các bạn thực hiện thành công!
Link download: http://www.mediafire.com/download.php?zzj1joxjxzmsjd4

Án Bình Trọng
Được sửa chữa bởi anh Lê Hoàng Dũng