2012年12月1日 星期六

Android QR code 條碼掃描 ANE

小弟最近有一個案子需要使用到QR Code來進行一些使用者的互動
為了省去一些麻煩,所以還是選用了Flex為開發的平台

一開始在尋找barcode 相關資料時就有發現到原來zxing的library有AS3的版本
優點是Android以及IOS一次通吃
但經我我的實測之後發現效率實在不行,不但不能及時掃描(需要用按鈕去觸發不然會LAG到死),且辨識率也與原生的zxing barcode程式相差甚遠

為了解決辨識率的問題,我開始傾向使用ANE的方式並呼叫原生的zxing barcode程式
一開始找到了
http://www.ubekar.com/project-barcodereaderANE.html
ubekar寫的Barcode Reader ANE
使用起來相當的簡單(比用AS3的zxing還簡單)
但這個ANE經過我的測試之後發現有個致命的缺點,
那就是在我的x10i上面執行後,相機擷取出來的畫面有上下左右相反的問題,
且在橫向模式會有掃描框超出範圍的問題
對此我想除了等到ubekar更新之前應該都別無他法

正當我想要開始著手寫一個zxing的ane時
我在一個中國的論壇找到了另一個ane
同樣也是基於zxing所寫的
http://bbs.9ria.com/thread-106240-1-1.html
沒錯他的連結就只有一個論壇的網址
http://www.littlesix.com.cn/air/android/barcodereader.zip
(↑此連結可以直接下載ANE檔)
在姑且一試的情況下
沒想到居然就這樣被我找到了
在我的x10i上攝影機畫面擷取正確,手機翻轉時也不會有異常發生
不過這個ANE有個問題
就是她只能在AS3文件下使用
在Flex文件下使用會無法抓到他的Event
(不知道是不是因為他的package為default的關係,還請高手多多指教)
為了解決這個問題,
小弟寫了兩個class來進行橋接的動作
以下分享給各位有需要的朋友

-------------------------------------------------------------------------------------------------------
BarcodeBridge.as
package
{
 import flash.events.EventDispatcher;

 public class BarcodeBridge extends EventDispatcher
 {
  private var bc:BarCodeReader=new BarCodeReader();
 
  public function BarcodeBridge()
  {
   bc.addEventListener(BarCodeEvent.DATA_RECEIVED,onDataRec);
  
  }
  private function onDataRec(e:BarCodeEvent):void{
   var type:String =e.codeType;
   var value:String=e.codeValue;
   this.dispatchEvent(new BarcodeEventBridge(e.type,e.codeType,e.codeValue));
  }
 
  public function startAnalysis():void{
   bc.startAnalysis();
  }

 }
}


-------------------------------------------------------------------------------------------------------
BarcodeEventBridge.as
package
{
 public class BarcodeEventBridge extends BarCodeEvent
 {
 
  public static const DATA_RECEIVED:String=BarCodeEvent.DATA_RECEIVED;
  public function BarcodeEventBridge(arg0:*,arg1:*,arg2:*)
  {
   super(arg0);
   codeType=arg1;
   codeValue=arg2;
  }
 
 }
}
----------------------------------------------------------------------------------------------------
 使用方式基本上跟原本的ANE使用方式一模一樣,記得要在app.xml裡面加入原本ANE所需要的權限跟行為

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
  xmlns:s="library://ns.adobe.com/flex/spark"
  creationComplete="view1_creationCompleteHandler(event)" title="HomeView">
 <fx:Script>
  <![CDATA[
   import mx.events.FlexEvent;
  
   import spark.effects.CallAction;
  
   private var bc:BarcodeBridge=new BarcodeBridge();
  
   protected function view1_creationCompleteHandler(event:FlexEvent):void
   {
   
    bc.addEventListener(BarcodeEventBridge.DATA_RECEIVED,onDataRec);
   
   }
  
 
   protected function startActivity(event:MouseEvent):void
   {
      bc.startAnalysis();
   }
   private function onDataRec(e:BarcodeEventBridge):void{
    var type:String =e.codeType;
    var value:String=e.codeValue;
    this.console.appendText(type+" : "+value);
   }
  
  
  ]]>
 </fx:Script>
 <fx:Declarations>
  <!-- Place non-visual elements (e.g., services, value objects) here -->
 </fx:Declarations>
 <s:Button x="10" y="10" label="call activity" click="startActivity(event)"/>
 <s:TextArea id="console" x="13" y="86" width="457" height="667"/>
</s:View>



----------------------------------------------------------------------------------------------------

另外關於ISO的Barcode ANE其實相對來說好找許多
在此也附上相關連結給需要的人參考
http://www.nativext.com/ane-by-os/ios/qr-reader-native-extension/
http://code.google.com/p/qr-zbar-ane/