Niklas Bivald: August 2007 Archives
Portfolio.com is running a story named Google's Secret Formula with a good flash animation explaining how Google works. It's an interesting story, especially since Google now serves more queries then Microsoft and Yahoo combined...
I am rather allergic to screensavers myself, but if you are into them, check out PolarClock:
Available at pixelbreaker for both Mac and PC.
Available at pixelbreaker for both Mac and PC.
The web chat I am running has support for four public webcams, visible to everyone. The idea is that a user can occupy one slot for a maximum of five minutes. Unfortunately, as with any public system, there will always be those who misbehave. Therefore, when making the new webcam system, one of the new key features will be improved ban handling as well as user reporting abilities. This articles covers the latter.
What we came up with is a powerful, yet simple to use report system. This includes one-click reporting, data gathering and automatic snapshots of the webcam in question. After all, we want to see what the user saw when he pressed the report button.
In short, when a user sees any suspicious activity, he or she can simply click the report button. A snapshot is then generated and information such as nicknames and IPs of both reporter and the user being reported is collected.
Server setup
I am using two servers, one for the chat itself and one for the Flash Media Server. Flash Media Server, or FMS, is the software which makes it possible for us to broadcast webcams and streaming video in Flash. Both servers are running a web server with PHP installed and thanks to AmfPHP we can call PHP scripts on the chat server straight from FMS.
Requirements
Everything must be made server-side, for security reasons the client itself cannot generate the snapshot. The reports will be stored in the mySQL database on the main server, Chat.
Known problems
Flash Media Server cannot generate snapshots, only record video into Flash Live Video (.flv). This means we have to run FFMPEG (a free media encoder) from shell to convert FLV to Snapshots (.jpg).
Key players, or the system in short
The system consists of three major players. On the cam server we've got Flash Media Server and the PHP script generateJPG.php. generateJPG.phps sole mission is to do on-the-fly conversions between the Flash Live Video (.flv) and JPEG. On the chat server we've got the PHP function continueReport() which stores everything in the database. continueReport() is reachable from FMS thanks to AmfPHP.
The report life cycle simplified
When a user presses "Report" a function is executed in our Flash Media Server application. FMS records a one second long video clip which it stores locally for generateJPG.php. It then gathers the needed information (IP numbers, nicknames etc.) which it passes onto continueReport() on the chat server. continueReport() then downloads the snapshot in question using generateJPG.php and stores the JPG on disk, and the rest in our mySQL database.
In reality
However, the simplified version does not show connections and request replies between the scripts. In reality, this is what happens:
1. The user clicks on the report button, thus making a call to FMS.
2. FMS starts recording and stops, by timer, after 1 second.
3. FMS (using AmfPHP) sends a request to continueReport() and waits for a "OK" reply.
1. continueReport() receives the request and
makes a call to PHP on server Cam for a snapshot.
1. Cam's PHP run the shell program FFMPEG, thus
generating a .jpg snapshot which is echos back to Chat.
2. continueReport(), still running, now has the image as a
string and starts by saving the report data (IPs etc) in the
mySQL database. After that, it then stores the image on the disk.
3. continueReport(), which now is done with its operations,
send the "OK" reply to FMS.
4. FMS removes the temporary stream saved in step 2
To be continued...
And there you have it, connections and request replies included. I haven't had the time to explain and comment the source code yet, but when I do I will add another articles with at least the FMS source and a FFMPEG guide. If you are really interested, contact me and I'll hook you up.
What we came up with is a powerful, yet simple to use report system. This includes one-click reporting, data gathering and automatic snapshots of the webcam in question. After all, we want to see what the user saw when he pressed the report button.
In short, when a user sees any suspicious activity, he or she can simply click the report button. A snapshot is then generated and information such as nicknames and IPs of both reporter and the user being reported is collected.
Server setup
I am using two servers, one for the chat itself and one for the Flash Media Server. Flash Media Server, or FMS, is the software which makes it possible for us to broadcast webcams and streaming video in Flash. Both servers are running a web server with PHP installed and thanks to AmfPHP we can call PHP scripts on the chat server straight from FMS.
Requirements
Everything must be made server-side, for security reasons the client itself cannot generate the snapshot. The reports will be stored in the mySQL database on the main server, Chat.
Known problems
Flash Media Server cannot generate snapshots, only record video into Flash Live Video (.flv). This means we have to run FFMPEG (a free media encoder) from shell to convert FLV to Snapshots (.jpg).
Key players, or the system in short
The system consists of three major players. On the cam server we've got Flash Media Server and the PHP script generateJPG.php. generateJPG.phps sole mission is to do on-the-fly conversions between the Flash Live Video (.flv) and JPEG. On the chat server we've got the PHP function continueReport() which stores everything in the database. continueReport() is reachable from FMS thanks to AmfPHP.
The report life cycle simplified
When a user presses "Report" a function is executed in our Flash Media Server application. FMS records a one second long video clip which it stores locally for generateJPG.php. It then gathers the needed information (IP numbers, nicknames etc.) which it passes onto continueReport() on the chat server. continueReport() then downloads the snapshot in question using generateJPG.php and stores the JPG on disk, and the rest in our mySQL database.
In reality
However, the simplified version does not show connections and request replies between the scripts. In reality, this is what happens:
1. The user clicks on the report button, thus making a call to FMS.
2. FMS starts recording and stops, by timer, after 1 second.
3. FMS (using AmfPHP) sends a request to continueReport() and waits for a "OK" reply.
1. continueReport() receives the request and
makes a call to PHP on server Cam for a snapshot.
1. Cam's PHP run the shell program FFMPEG, thus
generating a .jpg snapshot which is echos back to Chat.
2. continueReport(), still running, now has the image as a
string and starts by saving the report data (IPs etc) in the
mySQL database. After that, it then stores the image on the disk.
3. continueReport(), which now is done with its operations,
send the "OK" reply to FMS.
4. FMS removes the temporary stream saved in step 2
To be continued...
And there you have it, connections and request replies included. I haven't had the time to explain and comment the source code yet, but when I do I will add another articles with at least the FMS source and a FFMPEG guide. If you are really interested, contact me and I'll hook you up.
Here is something I didn't know: Amfphp - the flash remoting class for PHP - version 1.9 is in beta 2 since a while back. According to this blog post it's ridiculously faster. From 50 to 200 times.
If you are using Amfphp, read more on http://www.5etdemi.com/ or download it straight away.
If you are using Amfphp, read more on http://www.5etdemi.com/ or download it straight away.
Darren Lee of fczone.com recently released a Flash Media Server IDE for eclipse/Flex builder. The plugin enables you to "build Flash Media Server applications alongside flex or just on its own in eclipse.". Amongst other things, the plugin includes:
If you are an FMS developer, make sure you watch the ScreenCast and download it.
- Code Completion
- Output Console (no more need for flash media server admin console)
- Automatic error checking on save, much eliminating the need to dig through logfiles to find simply type errors.
- Auto inserts
- Import and converts AS2 Classes
If you are an FMS developer, make sure you watch the ScreenCast and download it.
Generally Movable Type 4 has nice URLs. However this is not the case for trackbacks and tag-clouds. This article describes how you clean them up, step by step using htaccess and mod_rewrite. I will not explain either htaccess or mod_rewrite but rather assume that you are familiar with them. If you are not, google them.
By default, the URLs look like this:
Trackback: http://bivald.com/cgi-bin/movabletype/mt-tb.cgi/<entry id>
Tag cloud: http://bivald.com/cgi-bin/movabletype/mt-search.cgi?tag=<tag>&blog_id=<blog id>
This is not beautiful. The idea of this article is to transform them into this:
Trackback: http://bivald.com/lessons-learned/trackback/13/
Tag cloud: http://bivald.com/lessons-learned/tag/<blog id>/<tag>
Getting started: HT Access and mod_rewrite
If you haven't got one already, create a .htaccess file in the parent folder of movable type. That is, if movable type is in:
> http://bivald.com/lessons-learned/ (public_html/lessons-learned)
The .htaccess should go into http://bivald.com/ (public_html/). If you are unfamiliar with htacces google it. Place the following two lines in it:
Make sure you copy them as three lines, starting with RewriteEngine, RewriteRule and RewriteRule. These lines assume two things, that your base url for movable type is lessons-learned and that your CGI files are in cgi-bin/movabletype. The first line enables mod_rewrite, google it if you aren't familiar with it, the two latter tells Apache to forward matches on URL lessons-learned/trackback and lessons-learned/tag to the matching .cgi-files.
What it does is to invisible convert lessons-learned/trackback/<entry-id> to cgi-bin/movabletype/mt-tb.cgi/<entry-id>
Save your file, and test it by going to:
http://www.yourdomain/your-mt/trackback/1 (replace 1 with a existing entry id). If you get a 500 Interal Server Error, you probably haven't got access to mod_rewrite. You should get the same page you would get for:
http://www.yourdomain/cgi-bin/movabletype/mt-tb.cgi/1
Getting Movable Type to print the new urls in templates.
We've now done half the work. The new URLs work, but if Movable Type doesn't print them they are of no use. Log in on Movable Type and choose Design -> Templates.
Open the Trackback template (Click "Template Modules" then "TrackBacks")
Replace "<$MTEntryTrackbackLink$>" with "http://bivald.com/lessons-learned/trackback/<$MTEntryID$>"
Edit template "Tags", change: "<$MTTagSearchLink$>&IncludeBlogs=<$MTBlogID$>" to "http://www.bivald.com/lessons-learned/tags/<$MTBlogID$>/<$MTTagName$>".
Then edit template "Sidebar - X Column Layout" (which ever you use), change: "<$MTTagSearchLink$>&IncludeBlogs=<$MTBlogID$>" to "http://www.bivald.com/lessons-learned/tags/<$MTBlogID$>/<$MTTagName$>".
Then republish your site. All in all, your trackback/tag links should be cleaner. Those a little more high-tech might want to edit lib/MT/Template/ContextHandlers.pm (and the corresponding functions) to make sure MT reports the correct URLs from the start, not just in the templates. But we'll save that for a rainy day..
By default, the URLs look like this:
Trackback: http://bivald.com/cgi-bin/movabletype/mt-tb.cgi/<entry id>
Tag cloud: http://bivald.com/cgi-bin/movabletype/mt-search.cgi?tag=<tag>&blog_id=<blog id>
This is not beautiful. The idea of this article is to transform them into this:
Trackback: http://bivald.com/lessons-learned/trackback/13/
Tag cloud: http://bivald.com/lessons-learned/tag/<blog id>/<tag>
Getting started: HT Access and mod_rewrite
If you haven't got one already, create a .htaccess file in the parent folder of movable type. That is, if movable type is in:
> http://bivald.com/lessons-learned/ (public_html/lessons-learned)
The .htaccess should go into http://bivald.com/ (public_html/). If you are unfamiliar with htacces google it. Place the following two lines in it:
RewriteEngine on
RewriteRule ^lessons-learned/trackback/([0-9]+)[\/]?$ cgi-bin/movabletype/mt-tb.cgi/$1 [L]
RewriteRule ^lessons-learned/tag/([0-9]+)/(.*) cgi-bin/movabletype/mt-search.cgi?tag=$2&IncludeBlogs=$1 [L]
Make sure you copy them as three lines, starting with RewriteEngine, RewriteRule and RewriteRule. These lines assume two things, that your base url for movable type is lessons-learned and that your CGI files are in cgi-bin/movabletype. The first line enables mod_rewrite, google it if you aren't familiar with it, the two latter tells Apache to forward matches on URL lessons-learned/trackback and lessons-learned/tag to the matching .cgi-files.
What it does is to invisible convert lessons-learned/trackback/<entry-id> to cgi-bin/movabletype/mt-tb.cgi/<entry-id>
Save your file, and test it by going to:
http://www.yourdomain/your-mt/trackback/1 (replace 1 with a existing entry id). If you get a 500 Interal Server Error, you probably haven't got access to mod_rewrite. You should get the same page you would get for:
http://www.yourdomain/cgi-bin/movabletype/mt-tb.cgi/1
Getting Movable Type to print the new urls in templates.
We've now done half the work. The new URLs work, but if Movable Type doesn't print them they are of no use. Log in on Movable Type and choose Design -> Templates.
Open the Trackback template (Click "Template Modules" then "TrackBacks")
Replace "<$MTEntryTrackbackLink$>" with "http://bivald.com/lessons-learned/trackback/<$MTEntryID$>"
Edit template "Tags", change: "<$MTTagSearchLink$>&IncludeBlogs=<$MTBlogID$>" to "http://www.bivald.com/lessons-learned/tags/<$MTBlogID$>/<$MTTagName$>".
Then edit template "Sidebar - X Column Layout" (which ever you use), change: "<$MTTagSearchLink$>&IncludeBlogs=<$MTBlogID$>" to "http://www.bivald.com/lessons-learned/tags/<$MTBlogID$>/<$MTTagName$>".
Then republish your site. All in all, your trackback/tag links should be cleaner. Those a little more high-tech might want to edit lib/MT/Template/ContextHandlers.pm (and the corresponding functions) to make sure MT reports the correct URLs from the start, not just in the templates. But we'll save that for a rainy day..
