[HELP] Flash webcam application: problems with resolution of snapshots and flash cam

[celestale]

Hi guys, I'm a beginner in Flash AS3 and I want to ask some questions in this community. I have been having some troubles in taking a snapshot using a webcam in my flash application. My webcam flash application is supposed to take a snapshot and save it in mysql server.

I have a small space in my flash application to put the camera so I have set my camera to show up in my flash application at (160,120) resolution size so that the camera preview will not take up much space in my application. I have a button_takepicture that allows the user to take picture with it and it will be saved in the server. However, the picture is saved at (160,120) resolution, which is a super small picture when I view it in the server.

Is there any way to set the size of the camera showing up in flash but will not affect the resolution of the saved picture? I want my resolution of the saved picture to be 300x400 and the camera box in flash to be a small size but not a 300x400 size because my stage size is only 550x400.



figure 1a.

as u can see in my flash application, the black box is 160x120 in size, it is the size of the camera preview that I want in my flash application. But in my server, the picture resolution size is also 160x120 (I want a 300x400 instead)

figure 1b.

if i set it to a higher resolution, the camera preview will fill up my flash application. (shown as a red box. 300x400 size) (this is not I want because it takes up huge space)

What should I do if I want my camera size in my flash to look like figure 1a but in my snapshot saved picture in server to be a 300x400 size?

Please help.
Thanks alot man!

//setup my camera
setupCamera(160,120);
function setupCamera(w:int,h:int):void {
    try {
        camera = Camera.getCamera();
    } catch(e:Error) {
        trace("No Camera detected!");
    }
   
    camera.addEventListener(StatusEvent.STATUS, camStatusHandler);
    camera.setMode(w,h,stage.frameRate);  
    video = new Video(w,h);
    video.attachCamera(camera);
    video.x = 350;
    video.y = 20;
    addChild(video);
}

//cam function takephoto
function takephoto(e:MouseEvent):void
{ 
        imgBD = new BitmapData(video.width,video.height);
        imgBD.draw(video);
   
	imgBitmap = new Bitmap(imgBD);
	
	imgBitmap.x = 350;
	imgBitmap.y = 20;
	
        addChild(imgBitmap);
	screenSActive = true;
 
        but_capture.removeEventListener(MouseEvent.CLICK, takephoto);

}

[5TonsOfFlax]

Set your camera mode to the resolution you actually want to capture at, and your video to the resolution you want it to appear on stage.

Also, you mean 400x300, not 300x400. The aspect ratio has to be the same.

[celestale]

hi 5TonsOfFlax, thanks for your reply. but how do i set the resolution of my camera mode and the video to the resolution in stage?

[5TonsOfFlax]

This line sets the resolution of the camera

 camera.setMode(w,h,stage.frameRate);

So use 400 for w and 300 for h there.

This line sets the size of the video:

video = new Video(w,h);

So use 160 for w and 120 for h there.

[celestale]

Thanks Ton! You did a great help for me Another thing I'm stuck at is to instead of saving the picture to server, I want it to save it in the desktop of the computer. Which code should I modify?

var video:Video;
var camera:Camera;
 
var imgBA:ByteArray;
var imgBD:BitmapData;
var imgBitmap:Bitmap;
 
var phpPath:String;
var jpgEncoder:JPGEncoder;
var sendHeader:URLRequestHeader;
var sendReq:URLRequest;
var sendLoader:URLLoader;
 
var imagePath:String;
 
setupCamera(300,400);
setupApplication();

//camera codes
function setupCamera(w:int,h:int):void {
    try {
        camera = Camera.getCamera();
    } catch(e:Error) {
        trace("No Camera detected!");
    }
   
    camera.addEventListener(StatusEvent.STATUS, camStatusHandler);
    camera.setMode(w,h,stage.frameRate);
    video = new Video(120,160);
    video.attachCamera(camera);
    video.x = 350;
    video.y = 20;
    addChild(video);
}
				   

function setupApplication():void {
    but_capture.addEventListener(MouseEvent.CLICK, takephoto);
    but_retake.addEventListener(MouseEvent.CLICK, clearphoto);
    sendBtn.addEventListener(MouseEvent.CLICK, sendImage);
	
   
    //phpPath = "myserverpath";
    //well instead of puting my server path inside, i went to change it to
    phpPath = "Desktop"; //wondering if im doing it right

    jpgEncoder = new JPGEncoder(100);
 
    sendHeader = new URLRequestHeader("Content-type","application/octet-    stream");
    sendReq = new URLRequest(phpPath);
    sendReq.requestHeaders.push(sendHeader);
    sendReq.method = URLRequestMethod.POST;
   
    sendLoader = new URLLoader();
    sendLoader.addEventListener(Event.COMPLETE,imageSentHandler);
}
  
function sendImage(event:MouseEvent):void {
    imgBA = jpgEncoder.encode(imgBD);
 
    sendReq.data = imgBA;
    sendLoader.load(sendReq);
}

function imageSentHandler(event:Event):void {
    var dataStr:String = event.currentTarget.data.toString();
    var resultVars:URLVariables = new URLVariables();
    resultVars.decode(dataStr);
   
    imagePath = "http://" + resultVars.base + "/" + resultVars.filename;
    trace("Uploaded to: " + imagePath);
}

[5TonsOfFlax]

All your stuff with php and sendImage is related to sending the image to the server. To save locally, you'll need to get rid of that and use the save method of FileReference.

See the livedocs: http://help.adobe.com/en_US/FlashPla...Reference.html

[celestale]

Thanks Ton! I have read up the link you gave and I also I found this website. Is this website useful?
http://http://cookbooks.adobe.com/po...imag-8406.html

[5TonsOfFlax]

That page is for AIR, so the File and FileStream stuff does not apply if you are not using AIR. But the first part about getting your ByteArray still applies.

Once you have your ByteArray with image data in it, you will need to use FileReference.

var fileref:FileReference = new FileReference();
fileref.save(imageByteArray);

Make sure you are publishing for flash 10 or higher.

[celestale]

This line sets the resolution of the camera

 camera.setMode(w,h,stage.frameRate);

So use 400 for w and 300 for h there.

This line sets the size of the video:

video = new Video(w,h);

So use 160 for w and 120 for h there.

umm I have set the followings but the picture saved is still a 160x120 size.

function setupCamera():void {
    try {
        camera = Camera.getCamera();
    } catch(e:Error) {
        trace("No Camera detected!");
		output_txt.text = "No Camera detected!";
    }
   
    camera.addEventListener(StatusEvent.STATUS, camStatusHandler);
    camera.setMode(400,300,stage.frameRate);
   
    video = new Video(160,120);
    video.attachCamera(camera);
    video.x = 350;
    video.y = 20;
    addChild(video);	
}

[celestale]

Sorry, I can't edit the post after you approved, so I created a new post with more information.

//button pressed : Capture (capture a snapshot from the webcam)

function takephoto(e:MouseEvent):void
{ 
	imgBD = new BitmapData(video.width,video.height);
    imgBD.draw(video);
	
	/*imgBD1 = new BitmapData(video1.width,video1.height);
    imgBD.draw(video1);*/
   
	imgBitmap = new Bitmap(imgBD);
	imgBitmap.x = 350;
	imgBitmap.y = 20;
	
    addChild(imgBitmap);
	screenSActive = true;
 
    but_capture.removeEventListener(MouseEvent.CLICK, takephoto);
}

//button pressed : Send (send the snapshot to server)

function sendImage(event:MouseEvent):void {
    imgBA = jpgEncoder.encode(imgBD);
 
    sendReq.data = imgBA;
    sendLoader.load(sendReq);
}

[5TonsOfFlax]

Oh, duh. You need your bitmap to be 400x300, which means you need your video to be that size too. But instead of putting your video directly on the stage, you can put a 160x120 bitmap (a second bitmap) on the stage and draw the video into it on each frame. You'll have to use the matrix argument of draw to resize the video.

[celestale]

Oh, duh. You need your bitmap to be 400x300, which means you need your video to be that size too. But instead of putting your video directly on the stage, you can put a 160x120 bitmap (a second bitmap) on the stage and draw the video into it on each frame. You'll have to use the matrix argument of draw to resize the video.

thank you. my problem has been solved, thanks!

[celestale]

Ahh yes 5TonsOfFlax,

in my database I have a few fields. They are 'name', 'age' and 'photo'. In the photo section, it contains the name of the person. For example, the person 'name' is Jack, the 'photo' name will be Jack too.
The problem is, how do I show the photo in flash? I'm already able to retrieve the 'name', 'age' and 'photo' from the database server and post it in flash but I'm still not able to post up the actual image, I only know how to retrieve the photo name, but not the photo image.

I'm kind of new to these stuffs and hope that you could guide me along >_<

Thanks in advanced.

[5TonsOfFlax]

Where do you store the image? If you've stored it in the database as a binary blob, then I would expect that to be the content of 'photo'. If you've stored it somewhere on the server filesystem, I'd expect 'photo' to tell you the filename so that you can open it or request it from the server.

[celestale]

I store the photo name in the server data list. Photo Image in the server photo folder.

How do I call the photo name from the server to PHP then to Flash and show it in flash?

I saw some script for flash saying LoadMovie() but sadly that is for AS2. What about AS3?

[5TonsOfFlax]

In AS3, use a Loader. So the "photo name" is actually the url or enough of an identifier to build the url to get the photo?