FlashCAM - Fotografieren mit Webcam und Bild speichern

[Quasimondo]

Das war mir dann auch irgendwann aufgefallen. Und die Grafiken könnte man dann ja auch gleich in Java machen ;-)

Im Augeblick baue ich gerade einen JPEG Encoder ins Applet ein.

[Alienhunter]

Compression klasse von meychi ..einfach aber gut
Habe ich schon ein paar mal gebraucht.

/**
* LZW Class v1.1
* Author  : Mika Palmu
* Licence : Use freely, giving credit when you can.
* Website : [url="http://www.meychi.com/"]http://www.meychi.com/[/url]
*
* Original Flash port by:
* Ash & Lalek & Shoebox and others.
* See: [url="http://www.razorberry.com/blog/archives/2004/08/22/lzw-compression-methods-in-as2/"]http://www.razorberry.com/blog/archives/2004/08/22/lzw-compression-methods-in-as2/[/url]
* See: [url="http://www.lalex.com/blog/comments/200405/164-compression-lzw-actionscript-2.html"]http://www.lalex.com/blog/comments/200405/164-compression-lzw-actionscript-2.html[/url]
*/
 
class LZW {
 
    /*
    * Compresses the specified text.
    */
    public static function compress(str:String):String {
        var chars:Number = 256;
        var original:String = str;
        var dict:Array = new Array();
        for(var i:Number = 0; i<chars; i++) dict[String(i)] = i;
        var result:String = new String("");
        var splitted:Array = original.split("");
        var buffer:Array = new Array();
        for(var i:Number = 0; i<=splitted.length; i++){
            var current:String = splitted[i];
            if(buffer.length == 0) var xstr:String = String(current.charCodeAt(0));
            else var xstr:String = buffer.join("-")+"-"+String(current.charCodeAt(0));
            if(dict[xstr] !== undefined){
                buffer.push(current.charCodeAt(0));
            } else {
                result += String.fromCharCode(dict[buffer.join("-")]);
                dict[xstr] = chars;
                chars++;
                delete buffer;
                buffer = new Array();
                buffer.push(current.charCodeAt(0));
            }
        }
        return result;
    }
 
    /*
    * Decompresses the specified text.
    */
    public static function decompress(str:String):String {
        var chars:Number = 256;
        var dict:Array = new Array();
        for(var i:Number = 0; i<chars; i++){
            var c:String = String.fromCharCode(i);
            dict[i] = c;
        }
        var original:String = str;
        var splitted:Array = original.split("");
        var buffer:String = new String("");
        var chain:String = new String("");
        var result:String = new String("");
        for(var i:Number = 0; i<splitted.length; i++){
            var code:Number = original.charCodeAt(i);
            var current:String = dict[code];
            if(buffer == ""){
                buffer = current;
                result += current;
            } else {
                if(code<=255){
                    result += current;
                    chain = buffer+current;
                    dict[chars] = chain;
                    chars++;
                    buffer = current;
                } else {
                    chain = dict[code];
                    if (chain == undefined) chain = buffer+buffer.slice(0,1);
                    result += chain;
                    dict[chars] = buffer+chain.slice(0,1);
                    chars++;
                    buffer = chain;
                }
            }
        }
        return result;
    }
 
} 

auf dem Server

PHP-Code:

function compress($str, $extended)
 {
       $skipnum = $extended ? 2 : 0;
       for ($i = 0; $i < 256; $i++)
       {
          $dico[chr($i)] = $i;
       }
       if ($extended)
       {
          $dico["“"] = 256;
          $dico["”"] = 257;
       }
       $res = "";
       $txt2encode = $str;
       $splitStr = preg_split('//', $txt2encode);
       $len = count($splitStr);
       $nbChar = 256 + $skipnum;
       $buffer = "";
       for ($i = 0; $i <= $len; $i++)
       {
          $current = $splitStr[$i];
          if (isset($dico[$buffer . $current]))
          {
             $buffer .= $current;
          }
          else
          {
             echo $dico[$buffer];
             $res .= chr($dico[$buffer]);
             $dico[$buffer . $current] = $nbChar;
             $nbChar++;
             $buffer = $current;
          }
       }
 
       return $res;
 }
 
 function decompress($str, $extended)
 {
       $skipnum = $extended ? 2 : 0;
       for ($i = 0; $i < 256; $i++)
       {
          $c = chr($i);
          $dico[$i] = $c;
       }
       if ($extended)
       {
          $dico[256] = "“";
          $dico[257] = "”";
       }
       $txt2encode = $str;
       $splitStr = preg_split('//', $txt2encode);
       $length = count($splitStr);
       $nbChar = 256 + $skipnum;
       $buffer = "";
       $chaine = "";
       $result = "";
       for ($i = 0; $i < $length; $i++)
       {
          $code = ord(substr($txt2encode, $i, 1));
          $current = $dico[$code];
          if ($buffer == "")
          {
             $buffer = $current;
             $result .= $current;
          }
          else
          {
             if ($code <= 255 + $skipnum)
             {
                $result .= $current;
                $chaine = $buffer . $current;
                $dico[$nbChar] = $chaine;
                $nbChar++;
                $buffer = $current;
             }
             else
             {
                $chaine = $dico[$code];
             if ($chaine == "") $chaine = $buffer . substr($buffer, 0, 1);
                $result .= $chaine;
                $dico[$nbChar] = $buffer . substr($chaine, 0, 1);
                $nbChar++;
                $buffer = $chaine;
                
             }
          }
       }
       
       return $result;
 } 


Gruss @all
alien..

[Alienhunter]

Mein Low Level Kompression Lösung:

import flash.display.BitmapData;
 
var linkageId:String = "ImagePNG";
var bitmap_1:BitmapData = BitmapData.loadBitmap(linkageId);
trace(bitmap_1 instanceof BitmapData); // true
 
var Acount:Number = 0
    var Bcount:Number = 0
    var alpha:String;
    var red:String;
    var green:String;
    var blue:String
    var colorCounter:Number = 0;
    var pixelColor:String = "";
    var imageInfo:String = "";
 
 
imageInfo = "w"+nx.toString()+"h"+ny.toString()+ "p";
    for(Acount = 0 ; Acount < ny; Acount++){
        for(Bcount = 0;Bcount <nx;Bcount++){
            alpha = (bitmap_1.getPixel32(Bcount, Acount) >> 24 & 0xFF).toString(16);
        
            red = (bitmap_1.getPixel32(Bcount, Acount) >> 16 & 0xFF).toString(16);
           
            green = (bitmap_1.getPixel32(Bcount, Acount) >> 8 & 0xFF).toString(16);
           
            blue = (bitmap_1.getPixel32(Bcount, Acount) & 0xFF).toString(16);
           
            if ((Acount+Bcount) == 0){
                pixelColor = alpha + red + green + blue;
                colorCounter = 0;
            }else{
                if(pixelColor  == alpha + red + green + blue){
                    colorCounter += 1;
                }else{
                    imageInfo += colorCounter+"x"+pixelColor;
                    pixelColor = alpha + red + green + blue
                    colorCounter = 0;
                }
            }
        }
    }
    imageInfo += colorCounter+"x"+pixelColor;
 
trace(imageInfo); 

Ist nicht gross getested, hat sicher auch noch kleine Fehler.
Ich verwende hier nur einen string denn ich dann auf dem server auswerte.

Ist bei einem 160x120 Bild relativ schnell. Für was kleines wird es sicher reichen.

Gruss @all
alien.....

[Quasimondo]

Zitat von Alienhunter

Mein Low Level Kompression Lösung:

alpha = (bitmap_1.getPixel32(Bcount, Acount) >> 24 & 0xFF).toString(16);
        
            red = (bitmap_1.getPixel32(Bcount, Acount) >> 16 & 0xFF).toString(16);
           
            green = (bitmap_1.getPixel32(Bcount, Acount) >> 8 & 0xFF).toString(16);
           
            blue = (bitmap_1.getPixel32(Bcount, Acount) & 0xFF).toString(16);
           
            if ((Acount+Bcount) == 0){
                pixelColor = alpha + red + green + blue;
                colorCounter = 0;
            }else{
                if(pixelColor  == alpha + red + green + blue){
                    colorCounter += 1;
                }else{
                    imageInfo += colorCounter+"x"+pixelColor;
                    pixelColor = alpha + red + green + blue
                    colorCounter = 0;
                } 

Äähmm gibt's einen besonderen Grund, daß Du den Pixel erst in seine Einzelkomponenten zerlegst und sie dann wieder zusammensetzt? Wäre es nicht einfacher und schneller:

bitmap_1.getPixel32(Bcount, Acount).toString(16);

zu sagen?

Es gibt auch ein Problem und zwar liefert toString(16) keine führende 0 zurück, bei Werten kleiner als 16 bekommst Du dann 0 1 2 3 4...d e f. Wenn Du dann dann so zusammenzählst:

pixelColor = alpha + red + green + blue

kann es zu doppeldeutigen ergebnissen führen:

Denn 12 + a + 66 + d ist dann z.B. derselbe string wie 1 + 2a + 6 + 6d

[Alienhunter]

Äähmm gibt's einen besonderen Grund, daß Du den Pixel erst in seine Einzelkomponenten zerlegst und sie dann wieder zusammensetzt? Wäre es nicht einfacher und schneller:

bitmap_1.getPixel32(Bcount, Acount).toString(16);

zu sagen?

Es gibt auch ein Problem und zwar liefert toString(16) keine führende 0 zurück, bei Werten kleiner als 16 bekommst Du dann 0 1 2 3 4...d e f. Wenn Du dann dann so zusammenzählst:

pixelColor = alpha + red + green + blue

kann es zu doppeldeutigen ergebnissen führen:

Denn 12 + a + 66 + d ist dann z.B. derselbe string wie 1 + 2a + 6 + 6d

Yups stimmt...super danke für die Info. Ich muss so oder so nochwas daran rumschrauben.

Gruss und danke

alien...

[YellowSky]

Zitat von Quasimondo

Es gibt auch ein Problem und zwar liefert toString(16) keine führende 0 zurück, bei Werten kleiner als 16 bekommst Du dann 0 1 2 3 4...d e f.

also was du da wohl gemeint hast, könnte so aussehen:

var bmpData = new flash.display.BitmapData(160,120); bmpData.draw(img);
  var w:          Number = img._width;
  var h:          Number = img._height;
  var lastColor:  Number  = -1;
  var count:      Number  = 0;
  var x:          Number  = 0;
  var y:          Number  = 0;
  var a:          Array    = [];
  // compressed hex
  while( y<h ) {
    var t = bmpData.getPixel32(x,y) & 0x00ffffff;
    if( ++x>=w ) { x=0; y++ }
    if( ++count<0xff && y<h && t==lastColor ) continue;
    if( y>=h ) lastColor = t;
    if( lastColor>=0 ) {
      var tmp  = ( ( count << 24 ) | lastColor ).toString(16);
      if( tmp.length<8 ) tmp = "0"+tmp;
      a.push(tmp);
    }
    lastColor = t; count = 0;
  } 

letzendlich werden die daten per s = a.join(""); als string zusammengefasst und auf den server geschoben. der unterschied zu deiner prozedur ist, dass ich hier mit 8-stelligen hex arbeite. die ersten zwei geben die anzahl der aufeinanderfolgenden gleichen werte an (max 255=0xff) und dann folgt der farbwert. dadurch brauch ich kein trennzeichen, wenn ich immer mit festem format sende. das ganze macht bei einem webcam-bild aber überhaupt keinen sinn, weil nur sehr wenige aufeinanderfolgende gleiche farben auftauchen (durch das rauschen). für "gemalte" bilder mit grösseren gleichfarbigen flächen ist es natürlich schonmal ein enormer gewinn ... aber noch nicht alles

download
testen

wenn man links auf das bild klickt, kann man ein paar flächen mit gleicher farbe erzeugen


grüsse

[Hugo1of2]

ich versuche den huffman code für bilder zu optimieren

ich schaffe ein 120x80px bild in 6sec, und kompression von ca 60-80%

das finde ich gut (bisauf zeit)...aber dadurch das flash kein bytecode an flash schicken kann (ein großes danke an den utf8 zwang... ) kann man höchstens 6bit an informationen pro gesendetem byte schicken.

damit sinkt das ganze schonmal auf gut 40-60% kompression ...geht eigendlich noch 8)

_ich_ würde dan noch die farben auf 12 bit beschrenken und lande bei 70-80% kompression...das verlockt doch schon fast zu konferenz schaltungen ohne com server ^^ (*6sec zum berechnen ignoriert*)

ok, ich laber zu viel....aba daoben wollen gedanken raus...ich werde das huffman experiment morgen mal etwas verfeinern und dan hier reinsetzen in der hoffnung das ihr mit optimiert^^

[Alienhunter]

@YellowSky

Super, das sieht klasse aus !

Da hast du vollkommen recht mit dem Webcam rauschen.
Aber für eine Low Level kompremierung Übung ist es schon einmal ein guter Ansatz. Hoffe ich ..


@Hugo1of2

ich laber zu viel

Stimmt doch nicht ...finde ich.
Bin gespannt auf dein Beispiel. Deine Werte sind schon jetzt sehr gut.


@all
Das ganze wird immer spannender.


Gruss @all und danke für die Hilfe
alien...

[Seedianer]

@Alienhunter benutz mal

while (-- i > -1){
} 

statt for(). Ist soviel ich weiß ein ganzen zacken schneller.

mfg

[Quasimondo]

Da gab es doch neulich so nen großen Benchmark, ich glaube die schnellste Schleife war eine do/while Geschichte.

Ansonsten stimmen mich Eure Ergebnisse hoffnungsfroh, daß man das tatsächlich ohne externe Hilfe machen kann.

[Quasimondo]

So, ich hab das mit dem externen Komprimieren mal wieder sein lassen und mich jetzt auch mal an die Komprimierung innerhalb von Flash gewagt. Und ich würde sagen, das geht ziemlich gut.

Nochmal zur Erinnerung der Link: http://www.quasimondo.com/biggerthanlife.php (Webcam empfohlen)

Ich hatte mich übrigens in ursprünglichen Version bei der Größe verrechnet - eine Bitmap von 300 x 435 Pixeln ist nicht 127K groß, sondern 300 x 435 x 4 Bytes = 522000 = 509K - deshalb hat das auch beim Upload so lange gedauert. Übrigens als String verschickt wären das 1019K weil man ja zwei Chars braucht um auf diese Weise ein Byte übertragen zu können. Deshalb halte ich Remoting in diesem Fall für die erste Wahl.

Die Komprimierung funktioniert folgendermaßen:

- In einem Array wird eine Palette erstellt, die alle unterschiedlichen Farbwerte des zu sendenden Blocks enthält

- In einem zweiten Array werden die Index-Offsets jeder Farbe zu nächstfolgenden gespeichert. Dadurch daß ich nicht die Indexe selber sondern die Offsets speichere, kann ich später nicht nur Folgen gleicher Werte komprimieren, sondern auch Folgen ungleicher Werte, da z.B. 1,2,3,4,5,4,3,2,1 als Offsets geschrieben so aussieht: 0,1,1,1,1,-1,-1,-1,-1.
Die maximal erlaubten Offsets liegen zwischen -0x7fff und 0x7fff. Dadurch bekomme ich schon mal zwei Offsets in eine Number (32 bit). Damit das in eine 16 Bit Zahl paßt, wird zu den negativen Offsets 0x10000 addiert und die liegen somit zwischen 0x8001 und 0xFFFF. (Das muß jetzt keiner verstehen)

- Dieses Offset Array komprimiere ich in einem zweiten Schritt mit der klassischen Run-Length Methode, allerdings mit einem - wie ich finde - ziemlich netten Kniff: ich verwende nämlich den unbenutzen Offset 0x8000 als Marker, daß es sich beim folgenden Wert um eine Wiederholfarbe handelt. Auf die Weise halte ich den Overhead sehr klein: Werte, die nur einmal vorkommen haben gar keinen Marker und der Marker für Wiederwerte enthält gleichzeitig die Anzahl der Wiederholungen.

Mal ein Beispiel mit Buchstaben:

ABCAADDDDDDDAE

Ergibt in der Palette:

0 A
1 B
2 C
3 D
4 E

Die Offset Tabelle sieht dann so aus:

0,1,1,-2,0,3,0,0,0,0,0,0,-3,4

bzw:

0x00000001,0x0001fffe,0x00000003,0x00000000,0x0000 0000,0x00000000,0xfffd0004

komprimiert kommt dann sowas raus:

0x00000001,0x0001fffe,0x00000003,0x80000003,0x0000 0000,0xfffd0004

Das sieht jetzt natürlich relativ unspannend aus. Lustig wird es eher bei sowas:

ABCDEFGHIJKL -> 011111111111 -> 0x00000001,0x800000A,0x00010001

AAAAAAAAAA -> 0000000000 -> 0x8000000A,0x00010001
AAAAAAAAAAAA -> 000000000000 -> 0x8000000C,0x00010001

Aber:
AAAAAAAAAAA -> 00000000000 -> 0x8000000B,0x00010001,0x00010000

Damit das Komprimieren den Computer nicht einschläfert, bzw. PHP mir keinen Zeitüberschreitungsfehler liefert, laß ich das in Portionen erledigen und schicke das Bild blockweise an den Server. Die meiste Zeit braucht anscheinend sowieso GD um die Bilder wieder zusammenzusetzen. Das nette bei Flash Remoting ist aber, daß ich bereits während Flash noch die Daten an den Server schickt und der bastelt schon den nächsten Block komprimieren kann. Multitasking quasi.

Hier ist ein Demo, das besser zeigt wie effektiv (oder auch nicht) die Komprimierung ist: http://www.quasimondo.com/archives/000572.php

Und den Sourcecode gibt's dann auch in Bälde.

[YellowSky]

hi,

bin ja stolz auf mich, dass ich trotz später stunde meine, das ganze verstanden zu haben. eine sache ist mir nur unklar:

Zitat von Quasimondo

Übrigens als String verschickt wären das 1019K weil man ja zwei Chars braucht um auf diese Weise ein Byte übertragen zu können.

wieso 2 chars??

schade ist, dass man deine methode mit dem verteilten senden nicht so recht vergleichen kann mit anderen (meinen) ansätzen. könntest du vielleicht "auf die schnelle" eine kleine demo basteln, die ein standard-webcambild 160x120 im ganzen auf den server schiebt und nen kleinen timer einbauen? würde mich brennend interessieren, ob dein verfahren wirklich so viel bringt, wie es theoretisch aussieht.

ansonsten finde ich die idee, mit den farbdifferenzen, statt direkter farbwerte zu arbeiten ja grandios. muss man erstmal drauf kommen )


grüsse

[Quasimondo]

Zitat von YellowSky

hi,

wieso 2 chars??


grüsse

Nehmen wir mal ein Pixel 0x11223344, das verbraucht als Nummer 32 Bit, also 4 Byte. Wenn ich das mit Remoting schicke, geht das meines Wissens nach auch als 4 Byte über die Leitung. Wandele ich es in den String "11223344" um, habe ich 8 Zeichen, also 8 Byte -> doppelte Größe.

Das Problem ist, daß ich zwar rein theoretisch das hier machen könnte und dann auch nur 4 Byte bräuchte:

String.fromCharCode(0x11) + String.fromCharCode(0x22) + String.fromCharCode(0x33) + String.fromCharCode(0x44) 

Leider geht das aber nicht denn sobald ich das hier mache:

String.fromCharCode(0x11) + String.fromCharCode(0x00) + String.fromCharCode(0x33) + String.fromCharCode(0x44) 

bekomme ich wie schon mal geschireben in Flash einen kaputten String. Und so ganz ohne die 0 kann man nur schlecht Bilder machen. Obwohl - das müßte man sich direkt mal überlegen. Vielleicht fällt das gar nicht auf, einfach alle 0x00 durch 0x01 zu ersetzen...

[YellowSky]

Zitat von Quasimondo

Nehmen wir mal ein Pixel 0x11223344

achsoooo ... du arbeitest mit getPixel32(). das ist doch aber gar nicht nötig bei jpg-ausgabe. vielleicht bei png interessant, aber png zu exportieren halte ich für eine wenig sinnvolle einrichtung aus flash heraus. von daher kann man den alpha-wert ignorieren und macht das ganze erheblich schlanker.

Zitat von Quasimondo

Und so ganz ohne die 0 kann man nur schlecht Bilder machen. Obwohl - das müßte man sich direkt mal überlegen. Vielleicht fällt das gar nicht auf, einfach alle 0x00 durch 0x01 zu ersetzen...

das wäre auf jeden fall ne überlegung wert. ich versuche mich gerade daran, die bildwerte zu runden, um das rauschen der kamera etwas zu unterdrücken (bin hauptsächlich noch auf dem webcam-trip ... alles andere bringt meiner meinung nach wenig sinn). und wenn ich dann 01 als wert schicke und im php weiss, dass 0x01=0x00 ist, dann hab ich das problem schon abgefangen. nicht schön, aber gangbar.


grüsse

[Quasimondo]

Zitat von YellowSky

hi,

schade ist, dass man deine methode mit dem verteilten senden nicht so recht vergleichen kann mit anderen (meinen) ansätzen. könntest du vielleicht "auf die schnelle" eine kleine demo basteln, die ein standard-webcambild 160x120 im ganzen auf den server schiebt und nen kleinen timer einbauen? würde mich brennend interessieren, ob dein verfahren wirklich so viel bringt, wie es theoretisch aussieht.

Da hast Du recht. Hier ist mal ein Minidemo zum 160x120 Schnappschüsse machen: http://www.quasimondo.com/schnappschuss1.php

Verdammt ich bin natürlich wieder voll auf die Breite 200 reingefallen. Das blöde Ding wollte mir die Kamera einfach nicht anzeigen, bis ich kapiert habe, daß das ja daran liegt, daß bei zu kleiner Bühnenbreite die Sicherheitswarnung nicht angezeigt werden kann und dann die Kamera einfach aus bleibt.

Zitat von YellowSky

achsoooo ... du arbeitest mit getPixel32(). das ist doch aber gar nicht nötig bei jpg-ausgabe. vielleicht bei png interessant, aber png zu exportieren halte ich für eine wenig sinnvolle einrichtung aus flash heraus. von daher kann man den alpha-wert ignorieren und macht das ganze erheblich schlanker.

Ich mache beides, aber wenn man mit Numbers arbeitet, verbrät man das obere Byte halt automatisch mit. Aber stimmt, eigentlich dürften transparente Bitmaps eher selten verlangt werden. Da könnte ich mir sicher auch noch was sparen.