Menggunakan Webcam pada Flash dengan ActionScript 3.0

Cara menggunakan webcam untuk mengambil foto, sebenarnya saya dapat dari sini. Tapi karena disitu masih menggunakan AS 2.0, jadi mesti saya konversi secara manual ke AS 3.0. Setelah cari-cari aturan perubahan AS 2.0 ke AS 3.0 dan coba-coba, akhirnya berhasil juga ngubahnya.

Disini saya ngasih contoh untuk mengambil foto dengan webcam, menyimpan hasil foto ke dalam file .jpg, dan mencetaknya. Silakan klik ini untuk download file tutorial.fla. Oke langsung aja ya..

Jadi, disitu ada 6 objek: 1 video, 1 dynamic text, dan 4 button. Objek video untuk menampilkan gambar hasil tangkapan webcam, text untuk menampilkan scaleX dan scaleY dari video. Sedangkan fungsi masing-masing button adalah :

  1. takeBtn : untuk mengambil foto
  2. discardBtn : menghilangkan gambar hasil foto sebelumnya dan bersiap untuk tampilan pengambilan foto
  3. saveBtn : menyimpan foto ke file
  4. printBtn : mencetak foto

Saya sudah menyusun objek-objek tersebut sehingga tampilannya seperti ini :

Nama instans untuk videoObj adalah video_vobj, untuk takeBtn adalah take, untuk discardBtn adalah discard, untuk saveBtn adalah saveB, untuk printBtn adalah printB, dan untuk dynamic textnya adalah txtScale. Posisi takeBtn berada di bawah discardBtn. Nah, untuk tampilan awalnya saya hanya menampilkan video_vobj, take, dan txtScale. Jadi kita set visibility masing-masing objek menjadi seperti ini :

video_vobj.visible = true;
take.visible = true;
discard.visible = false;
saveB.visible = false;
printB.visible = false;

Sekarang kita mempersiapkan kameranya dengan mengambil camera reference. Instans cam kita berikan event listener statusHandler.

var cam:Camera = Camera.getCamera();
cam.addEventListener(StatusEvent.STATUS, statusHandler);
cam.setQuality(0,30);
cam.setMode(400, 450, 30);

var videoX:Number = video_vobj.x;
var videoY:Number = video_vobj.y;
var videoW:Number = video_vobj.width;
var videoH:Number = video_vobj.height;

Ini untuk meminta izin penggunaan kamera ke user. Pada statusHandler jika kamera dalam kondisi unmuted, maka kamera diletakkan pada instans video.

if(cam.muted == true){
Security.showSettings(SecurityPanel.PRIVACY);
}else{
video_vobj.attachCamera(cam);
}

function statusHandler(event:StatusEvent):void {
switch (event.code) {
case 'Camera.Muted' :
break;
case 'Camera.Unmuted' :
video_vobj.attachCamera(cam);
cam.removeEventListener(StatusEvent.STATUS, statusHandler);
cam.addEventListener(ActivityEvent.ACTIVITY, activityHandler);
break;
}
}

Ambil invers dari scaleX untuk melakukan pencerminan gambar.

video_vobj.x = video_vobj.width + videoX;
video_vobj.scaleX = -video_vobj.scaleX;
txtScale.text = "ScaleX = "+video_vobj.scaleX+"\nScaleY = "+video_vobj.scaleY;

Nah, katanya sih kadang-kadang pas kita nge-reload, webcam nampilin scrambled image *saya bingung cari terjemahan bahasa indonesianya, gambar acak-acakan?* atau frame terakhir yang ditampilkan. Karena itu, ada activityHandler yang meng-clear video_vobj.

var firstone:Boolean = true;
function activityHandler(event:ActivityEvent):void {
if(firstone){
video_vobj.clear();
firstone = false;
video_vobj.visible = true;
take.visible = true;
}
};

Sekarang kita kasih event listener di masing-masing button.

take.addEventListener(MouseEvent.MOUSE_UP,takePict);
discard.addEventListener(MouseEvent.MOUSE_UP,takeNewPict);
saveB.addEventListener(MouseEvent.MOUSE_UP,savePict);
printB.addEventListener(MouseEvent.MOUSE_UP,printPict);

Ini fungsi takePict-nya. Hasil foto akan kita tampilkan dalam objek MovieClip, nama variabelnya holder. Nah, saya bingung nih ngejelasin bagian ini, jadi ikutin aja ya :p. Pokoknya misalnya ukuran video_vobj diubah, tinggal ubah aja angka 1.25 di bawah jadi scaleX yang saya tampilin di txtScale dan 1.875 jadi scaleY-nya. Sampe 3 angka di belakang koma aja. Intinya sih, hasil foto disimpan ke BitmapData, terus karena mau diubah ke MovieClip dan nggak bisa langsung gitu aja, jadi saya ubah ke Bitmap dulu. Setelah itu holder yang MovieClip tadi dikasih addChild(bitmap). Setelah itu addChild holder-nya supaya hasil foto tampil di layar dan menampilkan button discard, saveB, dan printB.

var holder:MovieClip = new MovieClip();
function takePict(event:MouseEvent):void {
var matriks:Matrix = new Matrix();
if(matriks.a>0){
matriks.a=-1.25*matriks.a;
matriks.d= 1.875*matriks.d;
matriks.tx= video_vobj.width;
var screen:BitmapData = new BitmapData(video_vobj.width, video_vobj.height, true, 0xff0000);
screen.draw(video_vobj,matriks);
var bitmap:Bitmap = new Bitmap(screen);
holder.addChild(bitmap);
holder.x = videoX;
holder.y = videoY;
addChild(holder);
discard.visible = true;
saveB.visible = true;
printB.visible = true;
}
}

Ini fungsi takeNewPict. Jadi, dia ngilangin holder dengan removeChild(holder). Selain itu, button take ditampilin lagi. Sedangkan button lain visibility-nya diubah jadi false.

function takeNewPict(event:MouseEvent):void {
removeChild(holder);
take.visible = true;
discard.visible = false;
saveB.visible = false;
printB.visible = false;
}

Ini fungsi untuk nyimpen gambarnya. Untuk bisa menggunakan ini, tambahkan import com.adobe.images.JPGEncoder; di bagian paling atas. Tapi, sebelumnya dowload dulu AS3 Core Library disini. Setelah di-donlot, di un-zip ya. Setelah itu, pilih menu Edit -> Preferences. Pilih category ActionScript. Di language, pilih ActionScript 3.0 Settings. Di source path, klik button yang ada icon foldernya, terus cari posisi folder library tadi. Di library path, pilih button yang icon-nya warna merah, terus cari di folder library tadi, masuk ke lib, pilih yang as3corelib.swc. Nah, sekarang library-nya udah bisa dipake.

function savePict(e:MouseEvent):void {
var curMatriks:Matrix = new Matrix();
var jpgSource:BitmapData = new BitmapData(holder.width, holder.height);
jpgSource.draw(holder,curMatriks);
var jpgEncoder:JPGEncoder = new JPGEncoder(85);
var jpgStream:ByteArray = jpgEncoder.encode(jpgSource);
var file:FileReference = new FileReference();
file.save(jpgStream,"foto.jpg");
}

Ini fungsi untuk mencetak gambarnya, karena saya males ngubah fungsi yang saya dapet untuk mencetak MovieClip jadinya saya cuma manggil printMovieClip(holder) aja deh. :p

function printPict(event:MouseEvent):void {
printMovieClip(holder);
}

Ini fungsi untuk nge-print MovieClip, pake PrintJob. Penjelasannya udah ada di bawah lah ya… Hahaha, males nih saya..
function printMovieClip(clip:MovieClip) {
var printJob:PrintJob = new PrintJob();
var numPages:int=0;
var printArea:Rectangle;
var printHeight:Number;
var printY:int=0;
if (printJob.start()) {
/* Resize movie clip to fit within page width */
if (clip.width>printJob.pageWidth) {
clip.width=printJob.pageWidth;
clip.scaleY=clip.scaleX;
}
/* Store reference to print area in a new variable! Will save on scaling calculations later... */
printArea=new Rectangle(0,0,printJob.pageWidth/clip.scaleX,printJob.pageHeight/clip.scaleY);
numPages=Math.ceil(clip.height/printJob.pageHeight);
/* Add pages to print job */
for (var i:int = 0; i < numPages; i++) {
printJob.addPage(clip, printArea);
printArea.y+=printArea.height;
}
/* Send print job to printer */
printJob.send();
/* Delete job from memory */
printJob=null;
}
}

12 thoughts on “Menggunakan Webcam pada Flash dengan ActionScript 3.0

    • sengaja pake bahasa indonesia sih, soalnya yang bahasa indonesia lebih susah nyarinya. ntar deh kalo sempet aku terjemahin :p

  1. Saya kesulitan pada langkah nyimpen gambar, terutama pada bagian “Di source path, klik button yang ada icon foldernya, terus cari posisi folder library tadi. Di library path, pilih button yang icon-nya warna merah, terus cari di folder library tadi, masuk ke lib, pilih yang as3corelib.swc.”
    Saya bingung dan mencari2 dimana letak “klik button yang ada icon foldernya”, “button yang icon-nya warna merah”.mohon lebih diperjelas lagi.
    Terimakasih

  2. gan, mau nanya, kalo milih kameranya, gmn codingnya gan? misalkan di androidnya ada kamera depan sama belakang, saya sudah coba, sukses gan, tapi hanya kamera depan yang berfungsi di android, mungkin bisa di tambahin coding buat pilih kamera belakang gan.
    Makasi

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s