Echtzeit User Tracking mit JavaScript, Flash und Red5

October 31st, 2007 by admin

Ich hab mir heute ueberlegt dass es doch cool waere wenn man in Echtzeit sehen koennte was ein User gerade auf einer Webseite so treibt.
Ich stell mir das so vor dass man als Webmaster im Backend seiner Webseite eine Auflistung der aktuellen Besucher bekommt. Nun waehlt man einfach einen Besucher aus und kann dann live beobachten was er gerade im Browser macht. Sowas wie robotreplay.com, nur eben in Echtzeit.
Ein paar Vorschlaege wie man sowas realisieren koennte:
Es geht zunaechsteinmal darum die Mauszeigerbewegungen, Klicks und Tastatureingaben der Besucher abzufangen und an einen Server zu senden. Erster Gedanke waere eine Realisierung mit Ajax. Das ist IMHO auch die Vorgehensweise von Robotreplay. Die Useraktivitaeten werden mittels JavaScript abgefangen und zwischengespeichert. Im Intervall von wenigen Sekunden werden dann die gesammelten Daten via Ajax an den Server gesendet. Ich denke um die Daten zu sammeln und sie zu einem spaeteren Zeitpunkt auszuwerten ist diese Loesung zufriedenstellend.
Wenn man allerdings dem Besucher quasi live ueber die Schulter schauen will die falsche Vorgehensweise. Hierzu sollten die Daten in Echtzeit auf dem Server landen.
Daher noch folgender Ansatz:
Grundsaetzlich ist eine Kommunikation zwischen JavaScript und einer Flashanswendung moeglich. D.h. man kann zum Beispiel Mauszeiger Koordinaten mit JS abfangen und diese an eine Flashanwendung übermitteln. Von der Flashanwendung aus koennte man die Daten dann direkt an einen Red5- oder Flash Media-Server senden. Der Webmaster holt sich dann die Daten, auch mit einer Flashanwendung, vom Server ab und bildet dann dann das Surfverhalten seiner Besucher nach. Das sieht dann so aus dass beim Webmaster automatisch immer die gleiche Seite geladen wird wie beim Besucher den er beobachtet. In einem kleinen Div koennte man das Symbol eines Mauszeigers anzeigen lassen und dieses dann immer genau gleich positionieren wie der Mauszeiger des Besuchers.
Wuerde mich ueber weitere Vorschlaege zu dem Thema freuen.

Live Screencast in Flash mit Red5 und Camtasia Studio

October 20th, 2007 by admin

Ergänzend zum letzten Posting über die Realisierung eines Live-Streams mit Red5 möcht ich jetzt kurz erläutern wie man einen Live-Screencast erzeugt. Ich gehe dabei davon aus dass die Schritte im letzte Posting ausgeführt wurden und man in der Lage ist seine Webcam auf der eigenen Internetseite zu publishen.
Um einen Live-Screencast zu erzeugen benötigt man zunächst die Software Camtasia Studio. Man kann eine 30 tägige Trial Version davon runterladen. Eine kostenlose alternative zu Camtasia kenn ich leider nicht.
Du installierst nun Camtasia Studio und startest anschließend den “Camtasia Recorder”. Dann auf Tools->Optionen gehen und in die Registerkarte “Video” wechseln. Hier dann die Manuelle Videokonfiguration auswählen und unten ein Häkchen bei “Liveausgabe-Aufzeichnung” setzen. Jetzt noch die Aufloesung hoeher stellen unter “Setup fuer Liveausgabe…”. Testweise mal auf 640*480.. kann spaeter noch angepasst werden. Dann die Einstellungen mit “Ok” bestaetigen und auf “Aufnehmen” klicken. Camtasia emuliert nun eine Webcam die den ausgewaehlten Bildschirmbereich abbildet. Die Camtasia Webcam kann man nun einfach im Flash Media Encoder als Video-Eingangs-Signal nehmen und an Red5 senden. Hat man Mikrofon am PC kann man das als Audio-Quelle nutzen.
Wie das ganze von Red5 zu den Flash-Playern auf den Clients gestreamt wird entnehmt ihr dem letzten Posting.

Nachtrag vom 1.11.2007:

Anstatt Camtasia-Studio kann man auch den VH Screen Capture Driver verwenden. Der Treiber ist frei verfuegbar und emuliert ebenfalls ein Videodevice. Ich wuerde diesen Treiber der Camtasia-Loesung bevorzugen.

Live Stream in Flash mit Red5 realisieren

September 29th, 2007 by admin

Ok, nach nem knappen Jahr der Inaktivitaet mal wieder ein Posting :-)

In letzter zeit hab ich mich etwas mit Red5 beschaeftigt und wie sich damit ein Livestream realisieren laesst. Red5 ist die Antwort der Open Source Gemeinde auf den Flash Media Server von Adobe. Nachfolgende Anleitung beschreibt wie man zum Beispiel seine Webcam oder ein Fernseherprogramm auf seiner Internetseite in einem Flashplayer einbinden kann. In der Beschreibung wird von einem Debian Server ausgegangen. Keine Angst, das ganze ist ruckzuck eingerichtet.

Zunaechst musst du Red5 auf deinem Server Installieren. Dazu loggst du dich mit SSH auf den Server und ziehst dir das aktuelleste Red5 Debian-Package (Befehl: “wget http://dl.fancycode.com/red5/0.6.3/debian/red5_0.6.3-1_all.deb“).
Danach Red5 installieren mit dem Befehl “dpkg -install http://dl.fancycode.com/red5/0.6.3/debian/red5_0.6.3-1_all.deb”. Und schon läuft Red5 (easy oder?).

Okay, nun wollen wir das Videosignal deiner Webcam (oder TV-Karte oder sonstwas) an den Red5 Server schicken damits von dort aus an die Clients verteilt werden kann. Dazu kann man den Flash Media Encoder (FME) verwenden, den man auf der Adobe Seite kostenlos downloaden kann. Es ist allerdings Lizenzrechtlich nicht ganz sicher ob der FME nur in zusammenhang mit dem Flash Media Server benutzt werden darf. In der Red5 Mailinglist gibts da regelmäßig dazu seitenlange Diskussionen. Ansonsten kann man zum Beispiel auch den Publisher verwenden der als Demo mitinstalliert wurde: http://<servername>.de:5080/demos/publisher.html. Der benutzt allerdings zum kodieren nicht das qualitativ hochwertigere on2 (der FME kodiert in on2). Egal welchen Publisher du jetzt verwendest, du startest ihn und waehlst die Video-Quelle aus die gestreamt werden soll. Als Server Adresse gibst du “rtmp://<servername>/oflaDemo” ein und gibst dem Stream einen Namen (z.B. “teststream”). Danach baust du eine Verbindung zum Red5-Server auf. Hat das geklappt kannst du dein Videosignal Publishen (Beim FME unten auf “Start” druecken oder beim Red5 Publisher auf “publish” im Server Fenster). Gratuliere, du sendest nun erfolgreich dein Videosignal zum Red5-Server. Man kann jetzt noch allerhand an der Übertragungsbandbreite und an der Qualitaet des Bildes rumtweaken. Ich wuerds allerdings vorerstmal zum testen so lassen und spaeter dann Feintuning machen.

Okay, Letzter Schritt. Das Signal muss jetzt auf den Flashplayer der Clients gestreamt werden. Ich habs mit dem äußerst beliebten “JW FLV Player” getestet. Lad dir diesen Player runter und binde ihn auf deiner Internetseite ein. Ich benutze dazu folgenden Code:

<p id=”player2″><a xhref=”http://www.macromedia.com/go/getflashplayer”>Get the Flash Player</a> to see this player.</p>
<script type=”text/javascript”>
var s2 = new SWFObject(”flvplayer.swf”,”playlist”,”320″,”260″,”7″);
s2.addParam(”allowfullscreen”,”true”);
s2.addVariable(”file”,”rtmp://<servename>/oflaDemo”);
s2.addVariable(”id”,”teststream”);
s2.addVariable(”type”,”rtmp”);
s2.addVariable(”displayheight”,”240″);
s2.addVariable(”autostart”,”true”);
s2.addVariable(”backcolor”,”0×000000″);
s2.addVariable(”frontcolor”,”0xCCCCCC”);
s2.addVariable(”lightcolor”,”0×557722″);
s2.addVariable(”width”,”320″);
s2.addVariable(”height”,”260″);
s2.write(”player2″);
</script>

Wie du vermutlich selber erkennst wird “file” einfach die Red5 Serveradresse zugewiesen und in dem Id Attribut steht der Name des Streams drin den wir vorhin beim FME bzw. beim Publisher definiert haben. Das wars auch schon. Schau dir das Resultat im Browser an und spiel an den Einstellungen solange rum bis du mit dem Ergebnis zufrieden bist.

Partner: DSL, PC Games

Monrose

November 22nd, 2006 by admin

Monrose - so heißen also nun Deutschlands neue “Engel”.
Seit der ersten Staffel im Jahr 2000 werden über das Format “Popstars” neue Bands gecastet. Bis auf den
ersten Wurf, die Girlgroup “No Angels”, allerdings mit mäßigem Erfolg. Von den darauf folgenden Bands Bro’Sis,
Overground, Preluders und Nu Pagadi hörte man schon nach kurzer Zeit nichts mehr. Die Popstars-Produzenten scheinen
daher auch alles was nach den No Angels kam unter den Teppich kehren zu wollen. Darauf schließt zumindest das Motto “neue Engel brauch das Land” der aktuellen Staffel. Aushängeschild der Show ist auch diesmal wieder Detlef D! Soost, der choreographisch von seinen Schützlingen alles abverlangt. Klar dass im Internet nun aus allen Ecken Fanseiten wuchern. So zum Beispiel der Blog Monrose Popstars. Ob Monrose allerdings tatsächlich an den Erfolg der No Angels anknüpfen kann wird sich erst ab dem 8. Dezember zeigen. Ab dann steht nämlich das erste Album der Girlgroup in den Regalen.

Spielereien mit Google Trends

September 12th, 2006 by admin

Was macht ein Blogger dem gerade kein sinnvoller Beitrag einfällt? Er schreibt einen Beitrag ohne Sinn. Dazu eignet sich Google Trends recht gut. Man vergleicht einfach mal ein paar Begriffe miteinander und klärt damit einige grundlegende Fragen. So liegt zum Beispiel Mann vor Frau, Tom vor Jerry, US5 vor Tokyo Hotel, Bart Simpson vor Lisa Simpson, Aalen vor Winnenden, Alkohol vor Zigaretten, EMail vor Brief, Yahoo vor Google(!), Punkt vor Komma, Links vor Rechts, Italien vor Frankreich, Windows vor Linux, Microsoft vor Apple, The Beatles vor The Rolling Stones, Leben vor Tod, Java vor PHP und Hund vor Katze.

The Dresden Dolls in München

September 2nd, 2006 by admin

Oha, was für einen grandiosen Abschluß haben uns die Dresden Dolls da am Mittwoch Abend im Münchner Backstage geboten. Eigentlich hatte ich ja schon garnicht mehr damit gerechnet… doch dann kams noch.. als letzter Song. Ein Cover der Besten Band der Welt. Nein, natürlich nicht Die Ärzte. Es geht um Neutral Milk Hotels “Two Headed Boy”. Doch jetzt nochmal zurück zum Anfang. Meine bessere Hälfte und ich sind in Aalen gegen 18.30 losgefahren und waren dann um 20.30 beim Backstage. Pünktlich zum Beginn der Veranstaltung. Als erste Vorgruppe spielten Porsches on The Autobahn die musikalisch etwas an Mediengruppe Telekommander erinnern. Danach gab es noch einen Auftritt des Künstlers Thomas Truax der mit seinem Hornicator seltsame Töne von sich gab.
Um 22.00 war dann endlich “Dresden Dolls”-Time. Die komplette Setlist bekomm ich nicht mehr zusammen… auf jedenfall waren alle bekannten Hits wie “Coin Operated Boy”, “Backstabber” und “Girl Anachronism” dabei. Grauzones “Eisbär” welches sie bereits bei Rock im Park gespielt hatten wurde auch an diesem Abend wieder gespielt. Und hier gibts Bilder von dem ganzen.

Sehr Toll: Windows Live Writer

August 28th, 2006 by admin

Viel Lob bekommen die Jungs von Microsoft ja in der Regel nicht aus der Netzwelt. Deshalb bekommen sie von mir nun Lob für das Blog-Tool Windows Live Writer das jetzt in der ersten Beta erschienen ist. Das Tool lässt sich auf Windows Rechner installieren. Anschließend lassen sich damit Blog-Einträge Verwalten. Erschtaunlicherweise
funktioniert das nicht nur mit dem Microsoft eigenem Blog-Service Spaces sondern auch hervorragend mit Wordpress.

Crazyegg

August 23rd, 2006 by admin

Crazyegg.com bietet ihre innovative Trackingsoftware jetzt in einer Live Version an. Das muss wohl auf recht großes interesse stoßen, zumindest scheint der Server ziemlich ausgelastet zu sein.
Das Innovative an Crazyegg ist, dass sich darüber für jede getrackte Webseite eine Heatmap anzeigen lässt aus der hervorgeht wohin die Benutzer klicken. Wer nicht ganz versteht was eine Heatmap ist soll sich doch einfach mal die Demo auf der Crazyegg Seite anschauen.
Der Unterschied zwischen Crazyegg und der meisten anderer Trackingsoftware besteht also darin dass nicht nur protokolliert wird welche Links angeklickt werden sondern zusätzlich noch die Position des Mauszeigers gespeichert wird (mit JavaScript recht einfach auslesbar). Die Möglichkeit zur Erzeugung einer Heatmap wäre sicherlich auch eine nette Ergänzung für Google Analytics.

xatScrobbler Version 0.1 erschienen

August 16th, 2006 by admin

Wie man ja rechts im Menü sehen kann ist ein neuer Eintrag mit dem Titel “xatScrobbler” hinzugekommen. Bei xatScrobbler handelt es sich um eine kleine PHP Klassen-Bibliothek zur Abfrage der XML-Schnittstelle von Last.fm (bzw. Audioscrobbler) für ähnliche Interpreten.
Welche Interpreten sich ähneln stellt Last.fm nach dem Motto “Benutzer X hoert Interpret Y und Interpret Z, deswegen müssen Y und Z ähnlich sein” fest.
Was diese Bibliothek überhaupt soll und was ich damit vorhab wird zu einem späteren Zeitpunkt verraten.

Neutral Milk Hotel

August 13th, 2006 by admin

Heute gibts eine Link Sammlung zur großartigen Band Neutral Milk Hotel. Neutral Milk Hotel wurden in den 90ern von Jeff Mangum gegründet und haben sich nach zwei Alben und zwei EPs wieder aufgelöst. Das letzte Konzert fand am 04.02.2001 in Neu Zeeland statt. Bekannt wurde die Gruppe mit ihrem Album In the Airoplane Over the Sea das 1998 erschien. Neutral Milk Hotel gehören dem Elephant Six-Clan an indem noch so andere großartige Bands wie The Gerbils, Olivia Tremor Control, The Apples in Stereo und Of Montreal sind.

Hier nun die Linkliste: