余分なものも、本当はあったら便利じゃない？ってモノも、何でも削ってシンプルにする方向のアップルのプロダクトデザインの中で、iMacやノートタイプの製品にiSightが付いてデザイン的にも主張しているのがちょっとアンバランスなんじゃないかとずっと思っていました。ビデオを使ったチャットなんかを頻繁に利用する日常を全くイメージ出来なくて、iSightを余計なモノにしか感じ無かったわけです。
しかし動画コンテンツ制作に関わる者として、日常のリッチメディアの利用にイマジネーションを働かせないのもどうかと言う事で、iSightを使って何か作ってみることにしました。
で、本当はAIRでiSight(あるいは普通にWEBcam)をつかってビデオを録画するアプリケーションを作成したかったのですが、Flvを保存する方法が全く解らなかったので、今回は普通に写真を撮って画像を保存するような機能に。
WEBカメラからJpegファイルを保存するactionscriptのソースは、ネット中に沢山あるとは思いますが、一応ソースを貼り付けておきます。
package
{
import flash.display.*;
import flash.events.*;
import flash.filesystem.*;
import flash.media.*;
import flash.net.*;
import flash.utils.ByteArray;
import mx.controls.*;
import mx.core.UIComponent;
import mx.graphics.codec.JPEGEncoder;
public class ISightViewer extends Sprite
{
private var cm:Camera;
private var ui:UIComponent;
private var vd:Video;
private var bd:BitmapData;
public function ISightViewer(){
cm = Camera.getCamera();
cm.setMode(640, 480, 12);
if(cm != null){
vd = new Video();
vd.attachCamera(cm)
}else{
trace("you have no camera")
}
}
public function goCamera():void{
vd.width = cm.width;
vd.height = cm.height;
addChild(vd);
}
public function removeCamera():void{
removeChild(vd);
}
public function fullScreen():void{
stage.displayState = StageDisplayState.FULL_SCREEN;
vd.width = stage.fullScreenWidth;
vd.height = stage.fullScreenHeight;
}
public function normalScreen():void{
vd.width = 640;
vd.height = 480;
stage.displayState = StageDisplayState.NORMAL;
}
public function savePhoto():void{
bd = new BitmapData(vd.width, vd.height);
bd.draw(vd);
var je:JPEGEncoder = new JPEGEncoder(70);
try{
var ba:ByteArray = je.encode(bd);
var file:File = new File();
var dt:Date = new Date();
var fs:FileStream = new FileStream();
file= File.documentsDirectory.resolvePath(dt.date+".jpg");
fs.open(file, FileMode.UPDATE);
fs.writeBytes(ba, 0, ba.length);
fs.close();
}
catch(e:Error){
trace(e.message);
}
}
}
}
このiSightViewerクラスを以下のようなmxmlアプリケーションから利用します。
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml"
creationComplete="init()"
layout="absolute" width="640" height="480">
<mx:Style>
Button {
cornerRadius: 4;
letterSpacing: 0;
highlightAlphas: 0.35, 0.15;
fillAlphas: 0.61, 0.64, 0.73, 0.61;
fillColors: #333333, #333333, #000000, #333333;
color: #dddddd;
textRollOverColor: #666666;
borderColor: #999999;
themeColor: #003399;
}
</mx:Style>
<mx:Script>
<![CDATA[
private var isv:ISightViewer = new ISightViewer();
private function init():void{
myUI.addChild(isv);
vs.selectedChild = cv1;
}
]]>
</mx:Script>
<mx:UIComponent id="myUI" width="100%" height="100%"/>
<mx:HBox height="30" width="100%"
bottom="20" horizontalAlign="center"
verticalAlign="middle" horizontalGap="10">
<mx:Button label="start" click="isv.goCamera()" x="252" y="3"/>
<mx:ViewStack width="100" height="25" id="vs" x="333" y="1">
<mx:Canvas id="cv1" width="100" height="25" >
<mx:Button width="100" height="25" label="full "
click="isv.fullScreen();vs.selectedChild=cv2"/>
</mx:Canvas>
<mx:Canvas id="cv2" width="100" height="25">
<mx:Button width="100" height="25" label="normal"
click="isv.normalScreen();vs.selectedChild=cv1" />
</mx:Canvas>
</mx:ViewStack>
<mx:Button label="stop" click="isv.removeCamera()"/>
<mx:Button fontSize="11"
width="28" height="28"
overSkin="@Embed(source='assets/btn_rec.png')"
upSkin="@Embed(source='assets/btn_rec_b.png')"
downSkin="@Embed(source='assets/btn_rec_b.png')"
click="isv.savePhoto()"/>
</mx:HBox>
</mx:WindowedApplication>
