Wednesday, September 19, 2012

Aplikasi Webcam menggunakan Javascript

Categories:

Pada Sistem Operasi Windows 8 kita dapat membuat aplikasi dengan 2 tipe, yaitu Metro Apps dan Desktop Apps dimana masing2 memiliki arsitektur yang berbeda (dapat dilihat disini). Dan sekarang kita akan mencoba membuat sebuah aplikasi metro (Metro Apps) sederhana menggunakan bahasa pemrograman Javascript. Aplikasi ini nanti akan memanfaatkan webcam yang terdapat pada laptop. Oke langsung saja pada tahap-tahap pembuatannya.
  1. Buka Microsoft Visual Studio 2012, buat project baru > Pilih JavaScript > Windows Store > Blank App > [Beri nama] > Klik OK. js1
  2. Double Click pada package.appxmanifest. Dari package.manifest inilah kita dapat mengatur apps yang akan kita buat. Mulai dari tab Application UI, kita dapat mengedit nama aplikasi kita pada Display name, deskripsi dari aplikasi kita pada Description, logo dari aplikasi kita dan sebagainya. Nah, karena pada kali ini kita akan membuat aplikasi yang memanfaatkan hardware Webcam maka sekarang klik tab Capabilities kemudian ceklist Webcame. Dan jangan lupa ceklist juga Pictures Library, karena kita akan menyimpan hasil jepretan webcam kedalam folder Pictures yang ada di laptop kita.
  3. Selanjutnya buka file default.html. Pada tag body, tambahkan sebuah button
    <button id="btnTest">Test</button>

     
  4. Untuk memberikan event handler agar ketika button ini di klik melakukan sesuatu, sekarang bukalah file default.js dan tambahkan kode berikut:
       
    app.onloaded = function (args) {
            btnTest.onclick = function (e) {
                var dlg = new Windows.Media.Capture.CameraCaptureUI();
                dlg.captureFileAsync(Windows.Media.Capture.CameraCaptureUIMode.photo).done(function(arg){
                    arg.moveAsync(Windows.Storage.KnownFolders.picturesLibrary);
                });
            };
        };

    Penjelasan sedikit mengenai kode diatas, disini kita membuat fungsi baru yakni onloaded. Pada fungsi onloaded inilah kita buat event handler untuk button ketika button tersebut di klik –> btnTest.onclick. Didalam fungsi ini kita buat inisialisasi dari Windows.Media.Capture.CameraCaptureUI() kedalam variabel var dlg. Windows.Media.Capture.CameraCaptureUI ini kita gunakan ketika kita ingin menggunakan webcam pada aplikasi kita. Kemudian karena kita hanya menggunakan webcam untuk foto, maka kita set mode-nya menjadi foto –> captureFileAsync(Windows.Media.Capture.CameraCaptureUIMode.photo). Lalu hasil jepretannya kita simpan kedalam folder Pictures –> moveAsync(Windows.Storage.KnownFolders.picturesLibrary).
     
  5. Sekarang coba jalankan (tekan F5).
    js3

    Klik Allow
       
    js4
Sekian.

Terimakasih atas kunjungannya, semoga bermanfaat dan ditunggu kritik dan sarannya. ^^

Spread The Love, Share Our Article

Related Posts

No Response to "Aplikasi Webcam menggunakan Javascript"

Post a Comment