アーカイブ : 2011年 1月

手書きメモアプリを作る。

手書きしたBitmapDataをカメラロールに保存するシンプルなメモアプリケーションです。

今回、Kevin HoytさんのAndroid UI 風コンポーネントを利用して作ってみました。

http://www.appforandroid.info/app/memo.apk

Kevinさんのコンポーネントを利用する際の注意点として、
http://www.himco.jp/articles/pdf/kevinHoytComponents.pdf
に記載されている注意点の他に、固定解像度(縦向き)での利用に制限されています。
よってマルチ解像度で利用する際にはコンポーネントの位置や大きさを自分で調整してあげる必要があります。

以下ソースになります。

package  
{
	import flash.display.Bitmap;
	import flash.display.BitmapData;
	import flash.display.MovieClip;
	import flash.display.Sprite;
	import flash.events.TimerEvent;
	import flash.geom.Point;
	import flash.geom.Rectangle;
	import flash.media.CameraRoll;
	import flash.events.MouseEvent;
	import flash.utils.Timer;
	import Menu;
	import MenuEvent;

	public class Main extends MovieClip
	{
		var canvs:Bitmap = new Bitmap();
		var pointer:Point = new Point();
		var timer:Timer;
		
		public function Main() 
		{
			
			var sp:Sprite = new Sprite();
			canvs.bitmapData = new BitmapData(stage.stageWidth, stage.stageHeight, false, 0xFFFFFF);
			sp.addChild(canvs);
			addChild(sp);
			
			timer = new Timer(10);
			timer.addEventListener(TimerEvent.TIMER, onDrawingHandler);
			
			sp.addEventListener(MouseEvent.MOUSE_DOWN, function(e:MouseEvent) {
				pointer.x = canvs.mouseX;
				pointer.y = canvs.mouseY;
				timer.start();
			});
			sp.addEventListener(MouseEvent.MOUSE_UP, function(e:MouseEvent) {
				timer.stop();
			});
			
			//メニューの生成
			
			var menu:Menu = new Menu( new Array( 
				{ path:"file.png", label:"RESET" }, 
				{ path:"save.png", label:"SAVE" } 
			) );
			menu.addEventListener(MenuEvent.CLICK, onMenuClickHandler);
			addChild(menu);
	
		}
		
		//メニューのボタンがクリックされたときのアクション
		private function onMenuClickHandler(e:MenuEvent):void 
		{
			switch(e.label) {
				case "RESET":
					resetCanvas();
				break;
				case "SAVE":
					imgSave();
				break;
				default:
				break;
			}
		}
		
		//bitmapdataに線を描く
		private function onDrawingHandler(e:TimerEvent):void 
		{
			var temp:Sprite = new Sprite();
			temp.graphics.lineStyle(4, 0x000000);
			temp.graphics.moveTo(pointer.x, pointer.y);
			temp.graphics.lineTo(canvs.mouseX, canvs.mouseY);
			var bmpd:BitmapData = canvs.bitmapData;
			bmpd.draw(temp);
			
			pointer.x = canvs.mouseX;
			pointer.y = canvs.mouseY;
		}
		//キャンバスを白く塗り直す。
		private function resetCanvas():void {
			var bmpd:BitmapData = canvs.bitmapData;
			bmpd.fillRect(
				new Rectangle(0, 0, bmpd.width, bmpd.height),
				0xFFFFFF
			);
		}
		//画像をカメラロールに保存する
		public function imgSave():void {
			var cmrl:CameraRoll = new CameraRoll();
			if (CameraRoll.supportsAddBitmapData) {
				cmrl.addBitmapData(canvs.bitmapData);
			}
		}
	}
}

LCCSでP2Pマルチキャストのビデオ配信を行うサンプル

Adobe Live Cycle Collaboration Serviceを使ってP2Pマルチキャスト配信サンプルを作ります。

下のビデオはLCCS(LiveCycle Collaboration Service)を使ったP2Pビデオ配信サンプルです。
androidのカメラで撮影されている動画をリアルタイムに複数のデバイスに配信できます。
フォーラムではまだ接続数に限界があると書き込みがありましたが、5同時接続程度ならきちんと配信されていました。

作り方
まずアカウントを登録など、各種準備を行います。
あとは下のコードでコンパイルすればOK

配信側AS3

package
{
	import com.adobe.rtc.authentication.AdobeHSAuthenticator;
	import com.adobe.rtc.collaboration.WebcamPublisher;
	import com.adobe.rtc.collaboration.WebcamSubscriber;
	import com.adobe.rtc.events.SessionEvent;
	import com.adobe.rtc.session.ConnectSession;

	import flash.display.Sprite;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;


	public class Main extends Sprite
	{
		protected var _cSession:ConnectSession =  new ConnectSession();
		protected var _webCamSubscriber:WebcamSubscriber;
		protected var _webCamPublisher:WebcamPublisher;
		
		private var _username:String = "LCCSログイン時のユーザー名(メルアド)";
		private var _pass:String = "LCCSログイン時のパスワード";
		private var _roomname:String = "LCCSで作成したルーム名";	
		
		public function Main()
		{
			stage.align = StageAlign.TOP_LEFT;
			stage.scaleMode = StageScaleMode.NO_SCALE;
			var authenticator:AdobeHSAuthenticator = new AdobeHSAuthenticator();
			authenticator.userName = _username;
			authenticator.password = _pass;
			_cSession.roomURL = _roomname;
			_cSession.authenticator = authenticator;
			_cSession.login();
			_cSession.addEventListener(SessionEvent.SYNCHRONIZATION_CHANGE, onLogin);
		}
		
		
		protected function onLogin(p_evt:SessionEvent):void
		{
			
			//プレビュー用ビデオ受信
			_webCamSubscriber = new WebcamSubscriber();
			_webCamSubscriber.subscribe();			
			
			//配信設定
			_webCamPublisher = new WebcamPublisher();
			_webCamPublisher.publish();
			_webCamSubscriber.webcamPublisher = _webCamPublisher;
			addChild(_webCamSubscriber);
		}
	}
}

受信側AS3

package
{
	import com.adobe.rtc.authentication.AdobeHSAuthenticator;
	import com.adobe.rtc.collaboration.WebcamSubscriber;
	import com.adobe.rtc.events.SessionEvent;
	import com.adobe.rtc.session.ConnectSession;

	import flash.display.Sprite;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	
	public class Main extends Sprite
	{
		protected var _cSession:ConnectSession =  new ConnectSession();
		protected var _webCamSubscriber:WebcamSubscriber;
		
		//ID,PASSをほんとのソースに埋め込むとまずいので、
		//管理画面で表示されているトークンを埋め込む方法がおすすめです。
		private var _username:String = "LCCSログイン時のユーザー名(メルアド)";
		private var _pass:String = "LCCSログイン時のパスワード";
		private var _roomname:String = "LCCSで作成したルーム名";
		
		public function Main()
		{
			stage.align = StageAlign.TOP_LEFT;
			stage.scaleMode = StageScaleMode.NO_SCALE;

			var authenticator:AdobeHSAuthenticator = new AdobeHSAuthenticator();
			authenticator.userName = _username;
			authenticator.password = _pass;
			_cSession.roomURL = _roomname;
			_cSession.authenticator = authenticator;
			_cSession.login();
			_cSession.addEventListener(SessionEvent.SYNCHRONIZATION_CHANGE, onLogin);
			
		}
		
		protected function onLogin(p_evt:SessionEvent):void
		{
			//受信側
			_webCamSubscriber = new WebcamSubscriber();
			_webCamSubscriber.subscribe();
			addChild(_webCamSubscriber);
		}
	}
}

※Packager for iPhoneではカメラをサポートしてないので今のところ配信はできません。
※動作確認できたのは、
・android2.2
・winXP,win7のAIR
・MacOSX AIR
・iPad,iPodTouch4G

Adobe LiveCycle Collaboration Service の使い方

Adobe LiveCycle Collaboration Serviceを使ってみました。

このサービスはチャット、WEBカメラ、ホワイトボード、VoIP、複数ユーザー、セッションの管理などが利用出来るとあります。

LCCSを利用するための手順を順番に説明します。

1,アカウントの登録

LCCSを利用するためのアカウントの登録を行います。登録フォームはこちら
※ここで登録したメアド、パスワードはコード上でも利用しますのでメモを忘れずに!

2,SDKをダウンロード。

アカウントの登録後、ログインすると下のような画面に遷移します。
画面の(3)からLCCSのライブラリをダウンロードします。
このライブラリの中には色々なサンプルが入っているのでとても重要です。

3,ROOMの作成

アカウントの登録後すでに何らかのROOMが作成済みかもしれません。
作成したROOMのURLは上記の画像の(2)+(1)のような表記になります。
https://collaboration.adobelivecycle.com/[youraccount]/[roomname]

4,完了

完了です。あとはなにかサンプルを作って動作確認できます。
※FlashファイルからダウンロードしたSDK内にあるswcファイルにライブラリ登録する必要があります。