Flash Webcam Fotokabine

[stevus]

Hallo zusammen,

ich würde gerne über die webcam eine art fotokabine erstellen.

der user soll sich sehen auf einen button klicken und dann werden im hintergrund alle 2 sekunden 4 bilder erstellt, aneinander gereit und als jpg ausgegeben.

ich habe dieses tutorial dazu gefunden
Live JPEG Encoder 0.4 - AMFPHP support
ich kann schon ganz gut mit flash umgehen nur as3 ist mir neu ein wenig php versteh ich auch. Nur wie bekomme ich es nun hin, dass die bilder im hintergrund gespeichert werden und als ein großes ausgegeben werden.

so eine ausgabe stelle ich mir vor
photocabine(4) on Flickr - Photo Sharing!

hier die source zu dem beispiel


schönen gruß
stevus

[Lukas78]

Von der herangehensweise eigentlich relativ simpel:

PHP-Code:

//1. Camera holen 
var myCam:Camera = Camera.getCamera();
//2. An ein Video hängen
var myVideo:Video = new Video();
myVideo.attachCamera( myCam);
//3. Camera Daten in BitmapData zeichen
var myBitmap:BitmapData = new BitmapData(640,480);
myBitmap.draw(myVideo); 


Den draw prozess musst du halt in einen IntervallTimer setzten, der sich 4 mal alle zwei Sekunden wiederholt. Und die BitmapData jeweils in einem Array speichern.

Dann die vier Bilder zusammensetzten, encodieren speichern fertig.

Zum encodieren gibt es zumindest in flex fertige Klassen, ob es die auch für Flash gibt, kann ich dir nicht sagen.

import mx.graphics.codec.JPEGEncoder;
import mx.graphics.codec.PNGEncoder;

Das speichern ist seit der 10er Version des FlashPlayers auch ein Klacks, über FileReference.save(); einfach das ByteArray, das der Encoder ausgespuckt hat lokal speichern. Fertig!

Gibt hier sonst auch n schon n paar Threads zu de Thema such mal "AS3-Fotoapparat", "Bild speichern", etc.

[stevus]

hier ein update ...

Wie bekomme ich die einzelnen Bilder nun zusammengefügt und zu einem Großen ausgegeben? Würde auf die Bilder auch noch gerne eine Maske legen...

hier klicken für die fla

danke für eure Hilfe

Gruß
Stevus

[Lukas78]

Aus der BitmapData jeweils ein Bitmap erstellen die zusammen an ein Sprite hängen, und das Sprite dann wieder in BitmapData speichern und dies Encodieren und speichern.

PHP-Code:

var canvas:Sprite = new Sprite();

for each( var bData:BitmapData in myBitmapDataArray)
{
   var myBitmap:Bitmap = new Bitmap();
   myBitmap.bitmapData = bData;
   canvas.addChild(myBitmap);
}
var output:BitmapData = new BitmapData(640,480);
output.draw(canvas); 


Hab hier grad kein Flash installiert, kann von daher mir dein File nicht anschauen.

[stevus]

hier mal das skript:

// IMPORTS
import asfiles.encoding.JPEGEncoder;
import fl.transitions.Tween;
import fl.transitions.easing.*;


/////////////////////////// WEBCAM ////////////////////////

// Webcam Bild einfügen
var myVideo:Video = new Video();

var myCamera:Camera=Camera.getCamera();

// Qualität und Auflösung
myCamera.setMode(400, 340, 12);

// Kamera vorhanden????
if (myCamera!=null) {
	// dem video wird die kamera zugewiesen
	myVideo.attachCamera( myCamera );
	//platzierung
	addChild(myVideo);
	myVideo.x=100;
	myVideo.y=80;

	myVideo.width=320;
	myVideo.height=240;

}

///////////////////////////// BLITZ /////////////////////////////////////////////

var square:Sprite = new Sprite();
addChild(square);
square.graphics.beginFill(0xFFFFFF);
// Parameter 3+4 Größe des Blitz
square.graphics.drawRect(800,800,351.7,264.5);
square.graphics.endFill();
//square.x = stage.stageWidth/2-square.width/2;
//square.y = stage.stageHeight/2-square.height/2;
//swapChildren(square,myVideo);

///////////////////////// FOTO TIMER ///////////////////////////////////////////

//neuer Timer (alle 1000ms, 4 mal wiederholen)
var myTimer:Timer=new Timer(2000,4);
// Timer wird mit der Funktion "fotoSchiessen" verknüpft, 
myTimer.addEventListener("timer", fotoSchiessen);

// button zurück setzen ist unsichtbar
zuruecksetzen.visible=false;

// counter
var zaehler=0;
var linkanzeige=0;

// Funktion, die vom Timer alle 1000ms aufgerufen wird

////////////////// FOTO SCHIESSEN ////////////////////////////////////////////

function fotoSchiessen(event:TimerEvent):void {
	zaehler++;

	//alle variablen die sich NICHT ändern außerhalb der ifs schreiben, sonst compiler fehler
	status_txt.text=url_txt.text="";
	var qualityValue:Number=100;
	var resizeMat:Matrix = new Matrix();
	var myEncoder:JPEGEncoder=new JPEGEncoder(qualityValue);


if (zaehler==1) {

		addChild( myPreviewLoader1 );
		
		if (server_mc.selected) {

			var myBitmapSource:BitmapData=new BitmapData(screenHolder.width,screenHolder.height);
		}
		// skalierung des abgespeicherten Bildes (vorschau)
		resizeMat.scale( 0.5, 0.5);

		// render the player as a bitmapdata
		myBitmapSource.draw( myVideo, resizeMat );

		// generate a JPG binary stream to have a preview
		var myCapStream1:ByteArray=myEncoder.encode(myBitmapSource);

		// show a preview of the stream with loadBytes
		myPreviewLoader1.loadBytes( myCapStream1 );

		// we store JPEG stream, to send it to distant service
		var streamObject1:Object={jpegstream:myCapStream1};

		myService.call("jpegencoder.JPEGEncoder.saveToServer", server_mc.selected ? myResponder : myResponderHD, streamObject1 );
		
		// Blitz-einstellungen
		var myTweenAlpha:Tween=new Tween(square,"alpha",Strong.easeOut,2,0,1,true);
		var myTweenX:Tween = new Tween(square, "x", Strong.easeOut, -800+84.1, -800+84.1, 1, true);
		var myTweeny:Tween = new Tween(square, "y", Strong.easeOut, -800+67.9, -800+67.9, 1, true);


} else if (zaehler==2) {

		addChild( myPreviewLoader2 );
		

		if (server_mc.selected) {

			var myBitmapSource2:BitmapData=new BitmapData(screenHolder.width,screenHolder.height);
		}

		// skalierung des abgespeicherten Bildes (vorschau)
		resizeMat.scale( 0.5, 0.5);

		// render the player as a bitmapdata

		myBitmapSource2.draw( myVideo, resizeMat );

		// generate a JPG binary stream to have a preview

		var myCapStream2:ByteArray=myEncoder.encode(myBitmapSource2);

		// show a preview of the stream with loadBytes

		myPreviewLoader2.loadBytes( myCapStream2 );

		// we store JPEG stream, to send it to distant service

		var streamObject2:Object={jpegstream:myCapStream2};
		myService.call("jpegencoder.JPEGEncoder.saveToServer", server_mc.selected ? myResponder : myResponderHD, streamObject2 );

		var myTweenAlpha2:Tween=new Tween(square,"alpha",Strong.easeOut,2,0,1,true);

} else if (zaehler==3) {

		addChild( myPreviewLoader3 );
		
		if (server_mc.selected) {


			var myBitmapSource3:BitmapData=new BitmapData(screenHolder.width,screenHolder.height);
		}

		// skalierung des abgespeicherten Bildes (vorschau)
		resizeMat.scale( 0.5, 0.5);

		// render the player as a bitmapdata

		myBitmapSource3.draw( myVideo, resizeMat );

		// generate a JPG binary stream to have a preview

		var myCapStream3:ByteArray=myEncoder.encode(myBitmapSource3);

		// show a preview of the stream with loadBytes

		myPreviewLoader3.loadBytes( myCapStream3 );


		// we store JPEG stream, to send it to distant service

		var streamObject3:Object={jpegstream:myCapStream3};



		myService.call("jpegencoder.JPEGEncoder.saveToServer", server_mc.selected ? myResponder : myResponderHD, streamObject3 );

		var myTweenAlpha3:Tween=new Tween(square,"alpha",Strong.easeOut,2,0,1,true);

} else if (zaehler==4) {

		linkanzeige=1;

		addChild( myPreviewLoader4 );
		
		if (server_mc.selected) {

			var myBitmapSource4:BitmapData=new BitmapData(screenHolder.width,screenHolder.height);
		}

		// skalierung des abgespeicherten Bildes (vorschau)

		resizeMat.scale( 0.5, 0.5);

		// render the player as a bitmapdata

		myBitmapSource4.draw( myVideo, resizeMat );

		// generate a JPG binary stream to have a preview

		var myCapStream4:ByteArray=myEncoder.encode(myBitmapSource4);


		// show a preview of the stream with loadBytes

		myPreviewLoader4.loadBytes( myCapStream4 );

		// we store JPEG stream, to send it to distant service

		var streamObject4:Object={jpegstream:myCapStream4};


		myService.call("jpegencoder.JPEGEncoder.saveToServer", server_mc.selected ? myResponder : myResponderHD, streamObject4 );

		var myTweenAlpha4:Tween=new Tween(square,"alpha",Strong.easeOut,2,0,1,true);

}

////////////////////// FOTOS LÖSCHEN ///////////////////////////////////////////////////

	// button sichtbar machen
	zuruecksetzen.visible=true;

	zuruecksetzen.addEventListener( MouseEvent.CLICK, bilderweg );

	function bilderweg( pEvt:MouseEvent ):void {
		zaehler=0;
		linkanzeige=0;

		myTimer.reset();

		capture_btn.visible=true;
		zuruecksetzen.visible=false;

		//anzeige bilder werden entfernt
		removeChild( myPreviewLoader1 );
		removeChild( myPreviewLoader2 );
		removeChild( myPreviewLoader3 );
		removeChild( myPreviewLoader4 );
		
		url_txt.htmlText="<a>Bilder wurden zurück gesetzt<br> Fotoreihe erneut starten</a>";
	}



}


/////////////////////// PREVIEW LOADER ////////////////////////////////////////////////

// a Loader object to have a preview of the compression
var myPreviewLoader1:Loader = new Loader();
var myPreviewLoader2:Loader = new Loader();
var myPreviewLoader3:Loader = new Loader();
var myPreviewLoader4:Loader = new Loader();
// position des vorschau bildes
myPreviewLoader1.x=500,myPreviewLoader1.y=20;
myPreviewLoader2.x = 500, myPreviewLoader2.y = 20+(screenHolder.height+10);
myPreviewLoader3.x = 500, myPreviewLoader3.y = 20+(screenHolder.height+10)*2;
myPreviewLoader4.x = 500, myPreviewLoader4.y = 20+(screenHolder.height+10)*3;

[stevus]

Lukas könntest du dein Skript mal beschreiben? oder jemand anders?
Wäre echt nett

[Lukas78]

Du musst deine einzelBilder ja nicht schon Encodieren, so wie in deinem Script.

Wenn du in dem Script einfach deine über draw erzeugten BitmapData in einem Array speicherst, kannst du diesen halt nach dem letzten Bild über die Schleife von mir in ein Sprite packen, dieses Sprite kannst du wieder als BitmapData zeichnen, encodieren und dann Speichern.

So müsste dann deine fotoSchiessen Funktion aussehen:

PHP-Code:


var myBitmapDataArray:Array = new Array();

function fotoSchiessen(event:TimerEvent):void 
{
    var myBitmapSource:BitmapData=new BitmapData( myVideo.width, myVideo.height);

    // draw video to BitmapData
    myBitmapSource.draw( myVideo);

    // add BitmapData to Array
    myBitmapDataArray.push( myBitmapSource);
    
    if( myBitmapDataArray.length ==4) //check if 4 BitmapDatas are stored in Array
    {    
        //create canvas for composed Pictures
        var canvas:Sprite = new Sprite();
        var xPos:int = 10;
        var yPos:int = 10;

        for each( var bData:BitmapData in myBitmapDataArray)
        {
            // create new Bitmap
            var myBitmap:Bitmap = new Bitmap();
            //assign BitmapData to Bitmap
            myBitmap.bitmapData = bData;
            //set BitmapPosition
            myBitmap.x = xPos;
            myBitmap.y = yPos;
            //add Bitmap to Canvas            
            canvas.addChild(myBitmap);
            //increase Position value for next Bitmap (x or y)
            xPos += 100; 
        }
        //create BitmapData for output
        var output:BitmapData = new BitmapData(640,480);
        // draw canvas to BitmapData
        output.draw(canvas);
        
        //add your encoding and saving code here;
    }
} 


Bei den Zahlenwerten muss du natürlich schauen, dass du da für dich passede werte einträgst. Ich hab jetzt das Ganze auch nochmal bewußt vereinfacht, sprich Skalierung, Tweens etc. rausgenommen. Würd erstmal dafür sorgen, dass alles klappt und dann das fine tuning einbauen.

Was du da mit den Streams und Server machst, versteh ich nicht ganz. Viele frühere Threads und Tutorials im Netz speichern immer erst auf dem Server und bieten dann den Download an, das ist mittlerweile aber überflüssig, da du den ByteArray aus dem Encoder auch direkt lokal als jpg speichern kannst.
(FileReference.save())

[stevus]

erstmal danke!

wo übergibst du denn dem arrey die 4 verschiedenen bilder?

habe grade festgestellt, dass bei mir nur Bild4 auf dem server ausgegeben wird. wenn ich mir andere anzeigen lassen will kommt immer ein fehler^^ das macht kein sinn...

[Lukas78]

Deine Funktion fotoSchiessen wird ja 4 mal aufgerufen, in der Funktion wird jeweils neue BitmapData erstellt und über push an den Array angehangen.

Wichtig ist halt, dass der Array ausserhalb der Funktion deklariert wird, sonst würde er ja bei jedem aufruf neu erstellt.

[stevus]

super danke habs