1. 首頁
  2. »
  3. 網頁開發
  4. »
  5. Flex
  6. »
  7. Flex教學-截取webCam的影像並儲存上傳到主機中

Flex教學-截取webCam的影像並儲存上傳到主機中

2009/01/23

  最近因工作需求,需從webCam取得影像,再將影像存儲上傳到主機中,之前分別在奶綠邦邦身為IT人的網站中看到相關教學,便開始依照自已需求,各從中取得各取所需部分再加以組合,就這樣拼拼湊湊,總算成功的完成,從webCam中取得影像,並將影像儲存上傳到主機中,而在上傳的部分,特地找來了好友山羊男丁的相助,因此在上傳的部分共有三種版本,分別有cfmphpaspx,應該包含了大部分的程式語言了,當然在這也祝各位新年快樂啦!

感謝各位一年來的支持。


範例操作流程:


webCam_take_upload.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:net="flash.net.*"
layout="vertical" fontSize="12" viewSourceURL="srcview/index.html">

<mx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.utils.XMLUtil;
import mx.utils.ObjectProxy;
import mx.collections.XMLListCollection;

import mx.core.UIComponent;
import com.jooce.net.uploadFile;
import com.adobe.images.JPGEncoder;
import mx.rpc.events.AbstractEvent;

private var file:FileReference = new FileReference();
private var bitmapData:BitmapData;

/啟用並偵測sWebcam/
private function videoDisplay_creationComplete():void {
var camera:Camera = Camera.getCamera();
if (camera) {
videoDisplay.attachCamera(camera);
} else {
Alert.show("偵測不到webCam");
}
}

/快照/
private function takePhoto():void{
bitmapData = new BitmapData(320, 240);
var bmp:Bitmap = new Bitmap(bitmapData);
var holder:UIComponent = new UIComponent();
holder.addChild(bmp);

//若要拍整個場景就改用bitmapData.draw(stage)
bitmapData.draw(videoDisplay);
swfLoader.source = new Bitmap(bitmapData);
}

/*上傳儲存 */
private function savejpg():void{
//若要拍整個場景就改用bitmapData.draw(stage)
bitmapData.draw(videoDisplay);
var loader: URLLoader = new URLLoader();
loader.addEventListener( Event.COMPLETE, onURLLoaderComplete );
loader.addEventListener( IOErrorEvent.IO_ERROR, onURLLoaderFailure );

//把bitmapdata用JPGEncoder轉為JPG格式,JPGEncoder(圖片品質),再丟到ByteArray
var byteArray:ByteArray = new JPGEncoder(85).encode(bitmapData);

//產生流水號檔名
var filename:String=(Math.floor(Math.random()*10000000*10)>>0).toString();
filename=filename+".jpg";

//把byteArray用uploadFile()上傳到後端並產生實體檔案
uploadFile(loader, ‘http://localhost:1625/src/savefile.aspx&#8217;, byteArray, filename);
}

private function onURLLoaderComplete(evt:Event):void{
Alert.show("上傳成功");
}
private function onURLLoaderFailure(evt:Event):void{
Alert.show("上傳失敗");
}

]]>
</mx:Script>
<mx:ApplicationControlBar width="691">
<mx:Button id="button"
label="重新偵測webCam"
click="videoDisplay_creationComplete();" />
<mx:Button label="快照" click="takePhoto()"/>
<mx:Button label="儲存" click="savejpg()"/>
<mx:Spacer width="100%"/>
<mx:Label text="Flex Webcam快照【//photo.minwt.com】"/>
</mx:ApplicationControlBar>

<mx:HBox>
<mx:Panel title="webCam" width="340" height="280"
verticalScrollPolicy="off" horizontalScrollPolicy="off">
<mx:VideoDisplay id="videoDisplay"
creationComplete="videoDisplay_creationComplete();"
width="320"
height="240" />
</mx:Panel>
<mx:Panel title="快照結果" width="340" height="280"
verticalScrollPolicy="off" horizontalScrollPolicy="off">
<mx:SWFLoader id="swfLoader"/>
</mx:Panel>
</mx:HBox>

</mx:Application>


上傳程式:savefile.php
<?php
$uploaddir = ‘tmp/’;
$uploadfile = $uploaddir . basename($_FILES[‘Filedata’][‘name’]);
$temploadfile = $_FILES[‘Filedata’][‘tmp_name’];
move_uploaded_file($temploadfile , $uploadfile);
?>


上傳程式:savefile.aspx.cs
if (Request.Files["Filedata"] != null)
{
//string filename = "123.jpg";
//Request.Files["Filedata"].SaveAs(Server.MapPath("~") + @"logo.jpg");
Request.Files["Filedata"].SaveAs(Server.MapPath("~") + @"&quot; + Request.Params["filename"]);
Response.Write(Request.Params["filename"]);
}


上傳程式:savefile.cfm
<cfprocessingdirective pageencoding="UTF-8">
<cfcontent type="text/html; charset=UTF-8">
<cfset setEncoding("URL", "UTF-8")>
<cfset setEncoding("Form", "UTF-8")>
<cffile action="upload" destination="c:files" filefield="FORM.filedata" nameconflict="makeunique"/>
<status>OK</status>


範例預覽:(由於展示用,因此只提供快照功能,不提供上傳服務)


[範例下載]