Flex 的 MXML 專案 開發 WebCam 應用

之前，我都用 Flex Builder 2.01 的 ActionScript 專案在練習 ActionScript3 與 PV3D，今天突然想要做與 WebCam 相關的應用時，想說把 Flash CS3 裝起來看看，結果從官網下載的檔案一直裝不起來，所以只好克難來學學 Flex 的 MXML 專案。

這個基本應用，是將 WebCam 的內容，載入到 Video 物件上，並將 Video 再加到畫面左邊。當按下按鈕後，會用 BitmapData 擷取畫面，加到 Bitmap 物件上，再加到畫面右邊。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="onAppInit()">
 <mx:Script>
  <![CDATA[
   import mx.core.UIComponent;
  
   private var camera:Camera;
   private var video:Video;
   
   private function onAppInit():void{
    camera = Camera.getCamera();
    video = new Video(320, 240);
    video.attachCamera(camera);
    
    var holder:UIComponent = new UIComponent();
    holder.addChild(video);
    panelCamera.addChild(holder);    
   }
   
   private function takePhoto():void{
    var bd:BitmapData = new BitmapData(320, 240);
    var bmp:Bitmap = new Bitmap(bd);
    
    var holder:UIComponent = new UIComponent();
    holder.addChild(bmp);
    panelPhoto.addChild(holder);
    
    bd.draw(video);
   }
  ]]>
 </mx:Script>
 <mx:Panel width="340" height="280" layout="absolute" id="panelCamera" left="10" top="10" title="Camera">
 </mx:Panel>
 <mx:Panel width="340" height="280" layout="absolute" id="panelPhoto" top="10" left="360" title="Photo">
 </mx:Panel>
 <mx:Button label="Take Photo" id="btnTakePhoto" left="360" top="300" click="takePhoto()"/>
</mx:Application>