CGI and Perl

Server Push Animation Techniques

Server push, which is a mechanism developed by Netscape, allows a server to maintain an open connection with the client. The technique I describe here concerns the use of the x-multi-replace MIME type. Document content defined by this MIME type can be automatically refreshed on a specific interval. This capability enables you to draw a sequence of images in the same frame to construct a "poor man's animation." This animation can either be continuous or finite.

To draw a finite animation sequence, you include in your Perl script a finite loop that completes on the last image frame. A continuous animation sequence does not stop until the user clicks Stop in the browser or leaves the page entirely. You must consider that, while a user is connected to a page that has a continuous animation sequence, the TCP port connection remains open for the duration of that user's visit. Keeping this connection open can prove expensive, depending on the capacity of your Web server. You need to consider several points if you decide to use a server push animation technique. The following URL points to some good documentation on this subject:

  http://home.netscape.com/assist/net_sites/pushpull.html

The following is an example of how to write a server push CGI script. Assume that you have a sequence of images, frame1.gif through frame10.gif. The important point is to declare the document as multipart/x-mixed-replace; and to specify a random string as the boundary.

#!/usr/local/bin/Perl
 use GD;
 $frmLoc="/user/bdeng/Web/docs/images";
 $header="Content-type: multipart/x-mixed-replace;" .
         "boundary=***Boundary_String***\n";
 $boundary="\n--***Boundary_String***\n";
 $giftype="Content-type: image/gif\n\n";
 print $header;
 print $boundary;
 $i=1;
 while (1) {
    sleep 1;
    print $giftype;
    open(GIFH,"< ${frmLoc}/frame${i}.gif");
    $img = newFromGif GD::Image(GIFH);
    close(GIFH);
    print $img->gif;
    print $boundary;
    if ($i == 10) {
       $i=1;
    } else {
       $i++
    }
 }

To view this animation on a Web page, simply point the SRC attribute of your <IMG> tag to the CGI script, like this:

<HTML>
 <BODY>
 <H1>Animated GIF using Server-push</H1>
 <IMG SRC=/cgi-bin/frames.pl>
 <P>This is a poor man's animation that downloads the next frame continuously
 until you leave the page.
 </BODY>
 </HTML>

Figure 12.4 shows the resulting animation.

Figure 12.4. One frame of the server push animation page.

Embedding AVI, QuickTime, WAV, and GIF89a within HTML

QuickTime, which is a movie format developed by Apple Computer, Inc., is available on many platforms. AVI is a similar format available on the Windows platform. WAV is an audio format available for use on the Windows platform. Most of these formats are registered MIME types known by browsers. The Web author's role is to simply include these types of files within the HTML file. Some browsers can view or play these files directly within the browser window. Netscape's plug-in technology for Netscape Navigator and Microsoft's ActiveX technology in the Internet Explorer are examples. Using these technologies, you can directly embed these multimedia formats within Web pages. Refer to Chapter 4, "HTML Forms--The Foundation of an Interactive Web," for a discussion of the <EMBED> HTML tag.

Previously in this chapter, you learned how to implement a "poor man's animation" using the Netscape server push technique. You also can author a GIF file in such a way that server push is not required for an animation effect. A new developing standard called GIF89a is now available; it defines an extension to the GIF format, allowing for multiple frames to be stored and played back in a single GIF file. Netscape Navigator 2.0 and higher support GIF89a to some extent. To find more information about the GIF89a standard, you can visit http://www.reiworld.com/royalef/gifabout.htm.

Summary

Hopefully, this chapter has given you a few ideas on how to implement some multimedia techniques on your Web page. Again, I cannot stress enough the importance of minimizing the size of your media files. Some techniques on how to reduce the size of your image are discussed in Chapter 7, "Simple Pleasures--Examples.".