| [ Pipeline ] |
|
PIPELINE ARTICLE 19990201
Title: Putting Video and Snapshots on a Web Page
Revision: 1.1
Every day the World Wide Web hosts more and more users. And every day more
and more users are putting information on the Web. Whether it is a personal
home page or commercial site, the Web pages share information with others.
In most cases, text and standard graphics work well to communicate the
message; however, sometimes the best way to convey the information may be
through a video clip or through a "live" snapshot.
This article introduces some simple techniques for putting video clips and
snapshots on a Web page. Specifically, the article:
* Explores one of the key tools that you can use to capture the video or
snapshot
* Examines tools that let you convert movies into still images
* Briefly examines the HTML markup behind Web images and movies
* Provides some simple scripts that let you automatically update
snapshots for Web use
* Presents techniques for automatically updating Web pages after users
load them in their browsers
Capturing Snapshots and Video with Media Recorder
If you plan to capture screen snapshots, camera snaps, or movies, the best
tool is Media Recorder. Media Recorder is an easy-to-use, bundled tool that
records movies, images, and sounds on Silicon Graphics® workstations such as
the O2 and Indy® . A simple user interface lets you quickly set up most
recording tasks, with optional custom settings for more advanced use. Media
Recorder is part of the Digital Media Tools subsystem (subsystem dmedia_eoe
).
If you do not need to customize the settings, you can use the Media Recorder
preset tasks to automatically set options such as image quality and
compression scheme to match your target medium. For example, Media Recorder
lets you easily capture files for use on the Web by choosing the Web
Document presetting, which is optimized for Web delivery of movie, audio,
and image files. If you use the Movie -> Web Document task, Media Recorder
uses a small frame size, a low frame rate, and the Cinepak compression
scheme (see Figure 1). These settings are appropriate for movies that are
downloaded in low-bandwidth environments and played back without dedicated
hardware. If these default settings do not meet your needs, though, you can
customize the settings.
After you capture a file with Media Recorder, it is ready for publication or
for editing in an application such as Movie Maker or Image View. The new
file appears in Media Recorder's clip bin as an icon labeled with the file
name. If you do not need to edit the file, you can publish it directly by
dragging and dropping it onto your desktop's OutBox icon, if available. You
can also drag the icon into a publishing tool such as WebMagic or
CosmoCreate to add it to a Web page, or you can drag it into IRIS® Showcase
to add it to an online presentation.
[Figure 1 image not available in ASCII]
[See the printed or Supportfolio versions of Pipeline for the image]
Figure 1. Web Document Movie Task in Media Recorder
What Can I Capture?
Media Recorder lets you record a variety of activities from a variety of
input sources:
* Record from your desktop screen. Use Media Recorder's screen recording
capabilities to create a movie while you manipulate a 3D model or to
demonstrate a software program. Alternatively, you can simply take a
snapshot of an area or window on your screen.
* Record movies, images, and sounds from input devices. Connect any video
device, such as a VCR or camera, to your workstation's video-input port
and use Media Recorder to save the input as movie files or static
images. Or use Media Recorder to record music, voice, or any other
sound from a microphone or VCR connected to your desktop.
Capturing a Screen Session
The following procedure provides an outline for using Media Recorder to
capture a desktop session as a movie file for publishing on the Web.
1. Open the application that you want to record.
2. Start Media Recorder. You can start it by double-clicking the icon on
the MediaTools page of the Icon Catalog or by entering mediarecorder in
a winterm window (UNIX® shell).
3. Position the Media Recorder and application windows as desired.
4. In Media Recorder, press the movie button and select the desired Movie
from Screen selection.
Depending on your selection, you may need to reposition or resize the
selection frame. Remember that a smaller frame size results in a
smaller file size.
5. Select Tasks -> Movie -> Web Document (see Figure 1). The associated
settings help reduce file size.
6. From the Edit menu, select a desired delay period (for example, Set
Delay to Record -> 3 Seconds).
7. Make sure that the subject is ready for recording.
8. To begin recording, click the Record button.
9. Perform the actions that you would like recorded. Media Recorder can
capture audio as it records from the screen, so you can include
narration.
10. To stop recording, click the Stop button.
Media Recorder will take several seconds to process the movie. When
processed, the movie file appears as an icon in the clip bin. To check
the results, select the icon and click on the Play button.
11. If necessary, edit the file with Movie Maker.
To add the movie to a Web page, see the "Putting Images and Video on a Web
Page" section of this article.
Converting Movie Frames to Images
Suppose that the best way to capture some action is via a movie, but that --
due to the large size of movie files -- you would rather use static images
(or an animated GIF image) to convey this information on your Web site. Two
tools let you quickly convert movie frames to static images: Movie Maker and
Media Convert. Both of these tools convert video frames to a numbered
sequence of images.
To add the images to a Web page, see the "Putting Images and Video on a Web
Page" section of this article.
Using Movie Maker to Convert Video Frames
Movie Maker lets you convert selected frames; therefore, use Movie Maker
when you want to convert only part of a video. To do so, perform the
following procedure:
1. Open the movie file in Movie Maker.
2. If desired, trim the movie:
3. Drag your mouse over the video track to select the frame or frames that
you want to convert.
4. Select Edit -> Trim to Selection to remove the frames that you do not
want to convert. (If you do not save the file, these frames will not be
deleted from the source file.)
5. Export the frames as a collection of images:
6. Select File -> Export As.
7. When the Export window appears, select Collection of Images as the
Format.
8. Enter an appropriate new directory name in the pathname field and click
the OK button.
Movie Maker then creates the new directory and writes the image files to it.
By default, the image files are in JFIF (JPEG) format, which you can include
in Web pages. Movie Maker also lets you export TIFF or RGB files.
Using Media Convert to Convert Video Frames
Use Media Convert when you want to convert the entire video to a series of
numbered images. To do so, perform the following procedure:
1. Open the movie with Media Convert.
2. Select Image File(s) as the output media.
3. Select an appropriate file format, such as GIF or JFIF (JPEG).
4. In the Output File Name or Template field, specify the pathname for the
images you are creating, add # to the end of the filename (for example,
images#.jpg), and then press the Start button.
Media Convert will create an image file from each frame of the movie,
numbering them sequentially. For example, the first frame may be named
images0.jpg and the last images9.jpg .
Putting Images and Video on a Web Page
Because of easy-to-use Web development applications such as CosmoCreate, you
can easily add images and videos to your Web pages. In fact, it is becoming
so simple that the average page developer only needs to be concerned about a
few things:
* Offering files with formats that users can view and parameters that
meet their needs
* Providing appropriate ways for users to find and access the files
The following subsections discuss these items. This discussion does not
address page layout and design or how to use a development package to
incorporate images and movies. Instead, it discusses formats and HTML markup
that supports the images and movies.
Formats and Parameters
For better or worse, no "official" standards exist for images or movies used
on the Web. However, some formats are commonly used for displaying images
and movies on the Web; these are discussed in the following subsections.
Static Images
Images used on the Web are primarily in two formats, GIF and JFIF (JPEG).
The GIF format is limited to an 8-bit color palette to maintain a small file
size, and it uses a lossless compression scheme that does not distort the
image (no data is lost). The characteristics of the GIF format make it most
efficient at compressing images that have harsh contrast, sharp edges,
lettering, and large areas of the same color.
JFIF is a 24-bit, or true color, graphic format that uses lossy compression.
The lossy compression lets you significantly decrease the file size by
giving up some level of quality. JFIF is usually a good choice for
low-contrast images such as scanned photos and workstation snapshots.
Parameters such as file size, image size, and image quality should be
determined according to function. As a general guideline, try to use the
smallest file size and lowest quality level at which you can maintain
acceptable viewing.
Movies
Movies offered on the Web are primarily in Apple® QuickTime movie format or
in MPEG format. Silicon Graphics recording and editing tools support both
formats.
Aside from format, the most important considerations for Web movies are file
size and movie quality. Movie files are very large by Web standards, so you
should try to reduce file size while maintaining the minimal quality
required to satisfy user needs. Remember that, in many cases, users prefer
to sacrifice some quality for faster downloading.
For Web movies, you should control the bit rate (data rate, bandwidth) so
that they display properly on many types of computers. Factors that affect
video bit rate include frame size, frame rate, pixel depth, pixel packing,
subsampling, and compression scheme. In addition, using a solid background
for your video enhances compression, which reduces the file size and
improves the bit rate. Following are some general guidelines:
* Frame size. Base your frame size on your viewing requirement. Remember
that many Web-based videos are between 320 and 604 pixels wide and many
movies are also made using television parameters (NTSC and PAL sizes
and rates are popular).
* Frame rate. Anything faster than approximately 10 frames/second (fps)
provides a strong illusion of motion, and 12.5 or 15 fps is usually a
good choice for video delivered over the Web. Higher rates look
smoother, can be viewed in brighter ambient light, and work better for
slow-motion; however, higher frame rates lead to an increased file size
and bit rate.
* Compression. The most common compression schemes are JPEG and Cinepak,
with MPEG a distant third. Media Recorder provides several compression
choices, including JPEG and Cinepak, and Media Convert can convert to
MPEG.
* Audio. If the movie does not need audio, you can save bits by not using
it. If you require audio, use monophonic audio at a sample rate between
8 kHz for simple voiceover and 44.1 kHz for CD quality. A sample rate
of 22.05 kHz is a common choice, providing excellent voice quality and
good music quality. Additional factors that affect audio bit rates
include channels, compression, sample rate, and sample size.
It is easy enough to decrease the quality and bit rate of a movie but
virtually impossible to increase them. Therefore, you should capture at the
highest quality level, frame size, and frame rate that you think you might
use. For example, if you are creating a movie for more than one kind of
output, such as for the Web and for videotape, capture and edit the movie at
the higher quality level and frame size (for videotape), then use Movie
Maker's Export As function to create a copy of the movie in a smaller,
compressed form for the Web.
Creating a Link
The simplest way to provide access to an image or movie is to provide a
direct link to it, instead of including it within a Web page. Most Web
browsers support this functionality and, when a user clicks on the link,
will either load the file within the browser or launch another application
to display it. (The user's browser either must support the functionality or
be configured correctly.) These links use the following basic format:
<A HREF="URL">Image</A>
The HREF tag tells the browser that this is a referenced link. The URL is
either the full or relative URL of the file, such as
http://www.sgi.com/fun/gallery/images/flowers.jpg or ../movie.mov.
Such links can be especially useful when the image or movie file is of
secondary interest to people who view your Web page, when the file is large,
or when you have multiple image or movie files available. If the files are
large (10 KBs or larger), you may also want to indicate the file size next
to the link or, for images, include a thumbnail image. Such additional
information can help users decide whether or not to load the file.
Adding an Image to a Web Page
You can also include the image within the Web page. For static images and
animated GIFs, the IMG markup is used (for example, <IMG SRC="URL"> ). The
URL may be a full or a relative URL. In most browsers, the image will load
within the browser window. As a result, you can embed the image between
lines of text and control the position on the page.
Adding a Movie to a Web Page
You can easily embed a movie in a Web page or provide a direct link to the
movie file. The EMBED tag functions similarly to an IMG tag; it lets you
incorporate the specified source file (SRC) within the Web page. For
example, HTML markup of the following form embeds a movie in a Web page:
<EMBED SRC="filename.mov">
You can also place parameters in the HTML markup, as follows:
<EMBED SRC="filename.mov" HEIGHT=240 WIDTH=320 SHOWCONTROLS=true AUTOSTART=true>
You can set the HEIGHT and WIDTH parameters; however, if you do so, the
image may become more grainy when enlarged. These parameters are optional.
The SHOWCONTROLS parameter specifies whether or not video controls are
viewable (for Microsoft® Internet Explorer). Use true to provide controls.
This parameter is optional.
The AUTOSTART parameter specifies whether the video clip begins when the
page loads or whether the user must click on the image to start the clip.
Use true to activate the clip automatically. This parameter is optional; if
you do not use it, the default is manual start.
If some of your users's systems or browsers are not configured to view your
movie files, you may want to provide a link to the required viewer and/or
provide instructions for configuring their browser helper applications. For
more information on file formats and for links to viewer applications, see
the following Web page:
http://www.matisse.net/files/formats.html
Note: If you need to make several movies available via the Web, consider
Silicon Graphic's WebFORCE® MediaBase server. For more information about
MediaBase, see http://www.sgi.com/software/mediabase/ .
Putting a "Live" Camera Image on the Web
If you need to provide live images on your Web page, such as the latest snow
or traffic conditions, consider converting video input to static images that
you can display on a Web page. This is often referred to as Web-cam. Many
ways exist to put a live camera image on the Web; this section describes
some of the easier ways. In brief, the following tasks are involved:
* Creating a script that captures the camera image and converts it to a
format usable on the Web.
* Focusing your camera (such as IndyCam, O2Cam, or a video camera plugged
into your system) on the desired subject.
* Creating a Web page that includes the video image or a link to it. To
ensure that the users see the updated images, provide a means to
refresh the page. For example, include text asking users to reload the
page or force the page to reload automatically, as described later.
Creating a Script
The first step is to create a script that converts your camera image to a
static image. You can do this in several ways, as follows:
* You can write a simple shell script.
* You can write a common gateway interface (CGI) script that is called by
the parent Web page.
* You can simply modify an OutBox script.
Using a Simple Shell Script
You can use a shell script to capture and convert single frames from your
system camera to JFIF (JPEG) images that can be displayed in a Web page. See
Figure 2 for a sample script (line numbers have been added to help explain
the script). This script updates the image every 5 minutes (300 seconds).
+---------------------------------------------------------------------+
1. #!/bin/sh
2. # converts images from system camera to .jpg snapshots (for web use)
3. outdir=/data/video
4. while (true)
5. do
6. /usr/sbin/vidtomem -f webcam 1> /dev/null 2> /dev/null
7. /usr/sbin/dmconvert -f jfif webcam-00000.rgb $outdir/snap.jpg 1> /dev/null 2> /dev/null
8. chmod 644 $outdir/snap.jpg
9. rm webcam-00000.rgb
10. sleep 300
11. done
+---------------------------------------------------------------------+
Figure 2. Simple Shell Script to Capture Video
+---------------------------------------------------------------------+
The following explains the lines in the script:
* Line 3 specifies the directory in which the script writes the final
image file.
* Line 6 uses the IRIX® vidtomem(1) application to capture camera input,
convert it to an SGI (RGB) image, and write it to a file named webcam .
The vidtomem application appends -00000.rgb to the base filename,
creating an output file named webcam-00000.rgb. Standard output and
standard error information is written to /dev/null, which prevents it
from being written in the shell window from which the script is
invoked.
* Line 7 uses the IRIX dmconvert(1) application to convert the RGB image
to a JIFF (JPEG) image and write the image to a file named snap.jpg .
Standard output and standard error information is written to /dev/null
, which prevents it from being written in the shell window from which
the script is invoked.
* Line 8 changes the file permissions so that the Web-server software can
read it.
* Line 9 removes the webcam-00000.rgb file.
* Line 10 instructs the script to wait 300 seconds before executing
again.
To use this script, do the following:
1. Create the script, name it getframe, and apply the appropriate file
permissions so the file can be executed.
2. Create the directory defined in the outdir variable in the script.
3. Start Media Recorder or the Capture tool to view the image from the
connected camera and then focus the camera on the desired subject.
Recording is not necessary. When the subject is selected and in focus,
exit Media Recorder or the Capture tool.
4. Start the getframe script. You can run it in the background, as
follows:
% ./getframe &
The script will run and create a snapshot from the system camera every
300 seconds.
5. Add the image to a Web page. For example, the following markup displays
the image in a Web page:
<IMG SRC="/data/video/snap.jpg">
Common practice is to inform users that they are viewing a generated image.
You can add text to the page telling users to reload/refresh the page to
view an updated image, or you can force the browser to reload the page or
image automatically, as described in the "Forcing an Autorefresh or
Autoload" section of this article. If you choose to use an autorefresh,
include text on your Web page explaining that the image updates
periodically.
Using a CGI Script
The simple shell script example displays an image captured by the script,
and capturing the image is a process that is independent from displaying the
Web page. In that method, the image may not be current when the Web page is
loaded.
You can create a Web page that executes a common gateway interface (CGI)
script to return a current snapshot to the calling Web page. The following
script, named grabsnap.cgi, is an example of a simple CGI script:
#!/bin/sh
echo Content-Type: image/jpeg
echo
name=$REMOTE_HOST
cd /data/video
/usr/sbin/vidtomem -f $name 2>/dev/null
/usr/sbin/dmconvert -f jfif ${name}-00000.rgb ${name}.jpg 2>/dev/null
cat "${name}.jpg"
rm -f ${name}*.*
The Content-Type notation is the HTTP header that is sent to the Web
browser. The script converts the file to a JFIF (JPEG) image, therefore, the
content type is indicated as image/jpeg.
For this script to work, the following must be true:
* The Web-cam must be connected to the machine on which the Web server is
running.
* The Web server must be configured to process CGI scripts.
* The CGI script must be in the appropriate directory.
For example, O2 workstations usually are configured with the Netscape
Personal FastTrack server. If you have root permission, you can place the
CGI script in the /var/www/cgi-bin directory and use the following markup
within a Web page to execute the CGI script whenever a user loads the page
(where hostname.domainis the complete machine name and domain name of your
system):
<IMG SRC="hostname.domain/cgi-bin/grabsnap.cgi">
The resulting .jpg image, created when the user loads the Web page, will be
displayed in the Web page.
Executing a Web-cam application as a CGI program consumes server resources,
especially if the Web page is accessed by many users. If the user demands on
your site are heavy, an application such as the one in "Using a Simple Shell
Script" may be more efficient because it does not execute every time a user
accesses the page.
Using the OutBox Server
A simple Web-cam snapshot feature is available in the OutBox package shipped
with IRIX 6.3 and later releases. For security and privacy, the snapshot
feature is disabled by default. To enable it, edit the snap CGI script in
the /var/www/cgi-bin/sgi-camera directory so that the camera="DISABLED" line
is commented out and the camera="ENABLED" line is not commented out:
#camera="DISABLED"
camera="ENABLED"
You must have root permission to edit the snapscript.
The snap script is similar to the example scripts shown previously. After
you edit the snap script to enable camera operation, you can view the image
that the script generates by entering the following URL (where
hostname.domain is the complete machine name and domain name of your
system):
http://hostname.domain/cgi-bin/machine-cgi?operation=camera
You can embed the image in any Web page with the following HTML markup:
<IMG SRC="http://hostname.domain/cgi-bin/sgi-camera/snap">
Whenever someone loads the page, the script runs and a new snapshot loads.
This snapshot feature requires a video camera, the OutBox package, and the
installation of the dmedia_eoe.sw.tools subsystem.
Using Java®
Java is also a good development tool for Web-cam applications. However,
because of the built-in functionality on Silicon Graphics workstations, you
may never encounter the need for a Java-based Web-cam application on a
Silicon Graphics workstation. Nevertheless, you can find a sample Java
applet for displaying captured images at the following URL:
http://www.netunique.com/CGI/ch19.htm
How Often Should I Update the Image?
If you visit different Web-cam sites, you will find that many update their
images every 5 minutes or so. The interval you choose should be based on
your users's needs and on your system and network limitations. Each time
your script runs, it increases the load on the system. As a result, your
Web-cam may be both helpful and harmful at the same time.
Forcing an Autorefresh or Autoload
If you want to ensure that users receive additional information or updates
while they visit your site, you may want to consider forcing the user's Web
browser to refresh, or reload, automatically. You can force an autorefresh
by using one of two techniques: a client pull or a server push. This section
provides an introduction to these two techniques.
Client Pull
In a client pull, an HTML page contains code that forces supporting browsers
to create a new connection after a specified time. The new connection either
reloads the same page or loads another page.
Although many browsers, such as recent versions of Netscape and Internet
Explorer, support client pull, some browsers do not. If members of your
audience use incompatible browsers, consider other options to meet their
needs.
Client Pull Code
The client-pull code may be contained in a META tag or in an HTTP response
header. (META tags contain information that is passed to the browser but not
displayed.) When you use a META tag, the browser interprets the contents as
an HTTP header. For example, the following META tag causes a page to reload
after 300 seconds:
<META HTTP-EQUIV="Refresh" CONTENT=300>
The HTTP-EQUIV="Refresh" code tells the browser to reload the page, and the
CONTENT tag tells the browser how long to wait before initiating the reload.
The META tag must be within the document header, which means that it must be
between the <HEAD> and </HEAD> tags that precede any displayed text or
graphics.
With a META tag like the one shown above, the page will reload every 5
minutes as long as it remains in the user's browser. Of course, the user may
leave the page by using the Back button or by going to another Web page.
When the user leaves an auto-refreshing page, the autorefresh directive
terminates.
We will not discuss HTTP response headers, but in case you are interested,
the META tag example simulates the following HTTP response header:
Refresh: 300; URL=http://www.sgi.com/fun/
Setting the Refresh Time
When setting the refresh time, keep in mind that every time a page reloads,
it creates a new connection to the server, which must then process the
request. As a result, the more often your page reloads, the greater the
impact on your server. You should base your refresh time on two primary
considerations: the functional requirements and the impact on server
resources.
Loading a Different Page
You can modify the META tag to force the browser to load a different
document after a specified period, giving you the ability to create a splash
screen that displays temporarily before another page loads. For example, you
can use a client pull to automatically redirect users from an old Web site
to a new one. The META tag should be similar to the following, which
redirects the browser to the specified Web page 15 seconds after the page
that contains the META tag loads:
<META HTTP-EQUIV="Refresh" CONTENT="15; URL=http://www.sgi.com/fun/">
Note that the URL in the META tag must be fully qualified, containing the
server name and complete URL. Relative URLs do not work.
Server Push
If you have ever downloaded a Web page and then noticed that your browser's
Stop button still indicates transfer activity, chances are that you were on
the receiving end of a server push. In a server push, the HTTP connection
remains open, and the server may transfer additional data at any time during
the connection. The client may terminate the connection by pressing the Stop
button or by viewing a different Web page, or the server may terminate the
connection according to predetermined criteria.
HTTP uses various Multipurpose Internet Mail Extensions (MIME) to
encapsulate data sent by a server in response to a request, and the server
push is driven by a variation of a standard MIME type known as
multipart/mixed . The multipart/mixedMIME type represents many data blocks
(files) in a single HTTP response, and it enables browsers to display them
within the same page. The variation used for server push is known as
multipart/x-mixed-replace , where the xindicates that this MIME type is
experimental and replace indicates that new data blocks replace older ones
rather than displaying together.
The following is an example of a multipart/x-mixed-replace message:
Content-Type: multipart/x-mixed-replace;boundary=SomeString
--SomeString Content-Type: text/html
Data for the first block.
--SomeString
Content-Type: text/html
Data for the second and last block.
--SomeString--
This example contains two text/html data blocks, each bounded by a
SomeStringboundary. The boundary, which can be any string of characters,
marks the end of one data block and the beginning of another -- except when
the boundary string is followed by two dashes. The two dashes after the last
boundary string indicate that there are no other data blocks and the message
is complete.
In a typical server push, the server does not push the entire
multipart/x-mixed-replace message at the same time but rather sends down
each successive data block as specified by a CGI program, which outputs the
HTTP headers, MIME headers, and data. Based on directions from the CGI
program, the server sends the first header and first data block to the
browser but leaves the connection open. On the other end, the browser loads
the data and, not receiving a termination sequence, waits for more. When the
CGI program indicates, the server sends the next data block, and the browser
replaces the first block with the new data block. This continues until the
CGI program directs the termination or until the client stops the
connection.
A server push can be more efficient than a client pull because new HTTP
connections are not required and because the server maintains control of the
data transfer. In addition, a server push can decrease overall transmission
times and reduce the complexity of background software used for monitoring
and control. On the other hand, using CGI programs and dedicating continual
connections drain server resources.
For more information, see the push and pull information at the following
Netscape URL:
http://www1.netscape.com/assist/net_sites/pushpull.html
Among other things, this site demonstrates how to push a series of inline
images to create a simple animation without updating the surrounding
document. This animation technique uses an IMG tag with the source pointing
to a CGI server push program instead of a graphics file.
For More Information
For more information on Media Recorder, Movie Maker, Image View, or Media
Convert, refer to the online help available from each tool or refer to the
Digital Media Tools Guide , which is available on the Silicon Graphics
Technical Publications Library on the World Wide Web at the following
address:
http://techpubs.sgi.com/library/
For more information about CGI scripts, see the following Web page:
http://www.netunique.com/CGI/
For more information about the Netscape FastTrack Personal server, select
the AboutFastTrack web jumper on your Icon Catalog WebTools page (available
if the FastTrack Personal server is installed).