Streaming Audio and Video on the Web

Transcription

1 Streaming Audio and Video on the Web Asist.univ. Luminiţa GIURGIU Key words: media files, audio, video, streaming, streaming format 1. What s streaming Remember the audio/video files linked or embedded into a Web page, when the person browsing the Web site had to endure a long delay between clicking on a movie link and seeing that movie play. This was because the entire file needed to download before the file can play. Streaming alleviates this wait. Streaming involves sending media from a server to a client over a packet-based network. The server breaks the media into packets that are routed and delivered over the network. At the receiving end, the client reassembles the packets and the media is played as it comes in. A series of time-stamped packets is called a stream. Figure 1. The Principle of streaming (a snapshot in time) From a user s perspective, streaming differs from simple file transfer in that the client plays the media as it comes in over the network, rather than waiting for the entire media to be downloaded before it can be played. In fact, a client may never actually download a streaming video; it may simply reassemble the video s packets and play the video as the packets come in, and then discard them. 2. The client perspective A small buffer space is created on the user's computer when audio or video is streamed; here is the place where data starts downloading. As soon as the buffer is full, the file starts to play. As the file plays, it uses up information in the buffer. While the file is playing, more data is being

2 downloaded. As long as the data can be downloaded as fast as it is used up in playback, the file will play smoothly. Some important implication result: - the media file never exists in its entirety on the user's computer. As data in the buffer is used in playback, it is overwritten by new, incoming data. This means that user never have a complete copy of the file on his computer, so everytime he want to view the file, he have to come back to the Web site. Also, jumping forward or backward into the file requires the buffer be reloaded with pertinent data, with the subsequent delay of several seconds. 3. The server perspective To deliver streaming media two servers are required. Figure 2. Required servers First, the user requests a normal.html page that contains links to streaming media. This Web page can reside on any Web server. This links are to an intermediate file (.ram in the case of Real media). The.ram file is just a plain text file containing the address of the streaming media file. The job of the.ram file is to direct the request to the streaming server. The streaming server houses the media file itself (such as a.rm file for Real media). The streaming server's job is to balance the load of delivering streaming files through the network to many users. 4. Using SMIL for combining streams Streaming can be used for more than just delivering a single channel of audio or video. Multiple streams can be combined into one presentation using SMIL (synchronized multimedia integration language). If the presentation have to display text at a specific time during an music clip or to display a video of a speaker on one side of the screen, and coordinate his PowerPoint slides with his talk on the other side of the screen, SMIL is used to combine these streams, as well as build the graphic interface to present them.

3 The media files called by the SMIL file are often located on the streaming server, but they don't have to be. It is possible to refer to files located on other servers. The user requests the web page from a normal web server. The web page contains a link to a.ram file, which also lives on the web server. The Ram file points to a SMIL file that lives on the streaming server. The SMIL file divides the streaming window into areas, then coordinate different streams of content in each area together over time. The SMIL file also contains time codes to describe exactly when each piece of media appears. Figure 3. SMIL file on the streaming server 5. Live streaming In live streaming the user can view an event almost at it occurs; there is only a 5-10 second delay from the time the moment occurs to the time that moment is delivered to the user. First, a video camera or microphone capturing the live event is connected to a separate encoding computer. The encoding computer processes the video or audio signal and sends it in a continuous flow to the streaming server. The streaming server simply broadcasts that incoming signal to anyone who's connected. It's important to note that the.rm file in the diagram above is not a complete file containing the entire event. It contains chunk of data that is

4 currently being streamed to the users. This time, the server never holds a file containing the entire event. The event can be archived on the encoding machine while it's being sent to the server so a complete.rm file will exist on the encoding machine once the event was over. This archived file can be moved to the streaming server for viewers to watch later. Figure 4. Live streaming 6. Streaming File formats The following are several streaming media formats: RealNetworks' RealMedia format (.rm file extension) Microsoft's Windows Media format (.wmf file extension) Apple Computer's QuickTime format (.mov file extension) MPEG format (.mpg file extension) The decision what format to choose will be based on the type of available server and the software and hardware available to develop the media. Encoding Real streaming media seems to work much better with a PC than with a Mac, but QuickTime streaming is easier to build right now using a Mac. Concerning the streaming media viewers, the three major players at the moment appear to be RealNetworks' RealPlayer, Microsoft's Windows Media Player and Apple Computer's QuickTime Player. 7. Embedding streaming into a Web page Different streaming video can be built into a Web page by embedding it. The first advantage of embedding is the complete control over the look and functionality of the player. The player can works with the design of the page, and we can expose only those functions that are appropriate, for example expose only two buttons play and stop and set the player to play only one file. Embedding Windows Media Player: <HTML> <HEAD> <TITLE>Embedded Windows Media Player 6.4 Control</TITLE> </HEAD> <BODY> <OBJECT ID= MediaPlayer WIDTH=320 HEIGHT=240 CLASSID= CLSID:22D6f312-B0F6-11D0-94AB-0080C74C7E95 STANDBY= Loading Windows Media Player components... TYPE= application/x-oleobject CODEBASE=

5 smp2inf.cab#version=6,4,7,1112 > <PARAM name= autostart value= True > <PARAM name= filename value= ><EMBED TYPE= application/xmplayer2 SRC= NAME= MediaPlayer WIDTH=320 HEIGHT=240> </EMBED> </OBJECT> </BODY> </HTML> Embedding Real Player <OBJECT ID=RVOCX CLASSID = clsid:cfcdaa03-8be4-11cf- B84B-0020AFBBCCFA WIDTH= 320 HEIGHT= 240 > <PARAM name= src value= > <PARAM name= autostart value= true > <PARAM name= controls value= imagewindow > <PARAM name= console value= video > <EMBED TYPE= audio/x-pn-realaudio-plugin SRC= WIDTH= 320 HEIGHT= 240 AUTOSTART= true CONTROLS= imagewindow CONSOLE= video > </EMBED> </OBJECT> The type attribute lets the browser know which plug-in to use to play the media. The src attribute tells the plug-in what media to play and where it resides. The src should be the ramgen path to the media, or a.ram reference file. The height and width attributes are the dimensions of the media. If the media is audio, it is necessary to set both the height and width to at least 2 or it may not work in all browsers. The autostart attribute determines whether the clip starts playing automatically or not. The console attribute gives the OBJECT/EMBED

6 tag an identifier that allows multiple OBJECT/EMBED tags to work together. The controls attribute defines which controls if any are used in the OBJECT/EMBED tag. Embedding QuickTime: The <EMBED> tag is similar to the <IMG> tag; they both have a SRC, WIDTH and HEIGHT parameter. These parameters are required and tell the browser the media to be displayed and the width and height of the media specified in the SRC attribute. For example: <embed src= sample.mov width= 320 eight= 256 ></embed> The src attribute is the media file to display either by an absolute or relative URL. The height attribute specifies the vertical size in pixels of the SRC attribute. The WIDTH attribute specifies its horizontal size. 8. Linking Web page with the streaming clip The most common method of linking the web page to the clips is through a Ram file, which is a metafile. This file uses the extension.ram and often has just one line that gives the full URL to the streaming clip or SMIL presentation. The reasons for using a Ram file rather than linking web page directly to streaming clips are: The Ram file launches RealOne player: the file extension.ram causes a Web browser to launch RealOne Player to play the presentation. The player might not launch when linking directly to a clip. For example, when linking the web page directly to a Flash Player file.swf, the browser launches Macromedia s Flash Player, but if intending to stream the Flash clip, the Ram file is needed to launch RealOne Player instead. The Ram file provides an RTSP URL for clips on RealSystem Server: clips on streaming server stream over the RTSP protocol, rather than HTTP. This means that the URL used to request the clips must start with rtsp:// rather than with Because browsers cannot make RTSP requests, the Web page is linked to a Ram file with an HTTP URL. The Ram file then gives RealOne Player the RTSP URL to the presentation. The Ram file can pass different parameters to the player: through optional Ram file parameters, the clip or SMIL presentation can be modified (playing it double size for example) and specified HTML pages can be displayed as the clip plays. The following actions occur when clicking a hypertext link to request a streaming presentation:

7 the Web browser requests the Ram file from a Web server or RealSystem Server; the Ram file causes the Web browser to launch RealOne Player; RealOne Player receives the Ram file and requests the clip or SMIL file from the Web server or RealSystem server; when a SMIL file is used, the player requests the clips based on the URLs in the SMIL file. 9. RTSP and HTTP A Web server uses HyperText Transport Protocol (HTTP) to deliver HTML pages and graphics. HTTP downloads files without regard to timelines. Downloading WebServer RealPlayer Figure 5. Downloading with HTTP URLs for media clips streamed by a streaming server begin with rtsp:// which causes Real server to use Real-Time Streaming Protocol (RTSP), Internet standard protocol set forth by the Internet Engineering Task Force. Designed specifically for streaming, RTSP enables RealSystem Server to adjust streaming data to keep clips playing smoothly. For example, when two clips play side-by-side, the player communicates with the real server about each clip s progress, indicating how much data it needs to keep playback synchronized. Streaming rtsp://streamserver.company.com RealServer RealPlayer

8 Figure 6. Streaming with RTSP The stream server can then adjust the data flow to compensate for changing network conditions, reducing low priority data if necessary to ensure that principal data gets through. Example of linking the web page with a video clip called videoclip.rm: <a href = play_video.ram>play the video clip!</a> The play_video.ram file is in the same directory with the web page. His content is one line giving the path to streaming server or web server: rtsp://streamserver.company.com/videoclip.rm or: Streaming multimedia presentations SMIL authoring offers a new way to assemble and deliver streaming multimedia presentations. Rather than the traditional way of creating a presentation by compiling a set of media into a single distributable file, SMIL lets authors choreograph separate media assets quickly and easily, with tools as simple as a text editor. Perhaps the best feature of SMIL is the ability to generate the code on the fly, as many Web pages are already created, and thereby offer personalized streaming multimedia. It's even possible to build a Web-based interface for allowing users to edit or assemble new multimedia presentations. For those who'd prefer a GUI authoring environment, there are tools for building SMIL presentations within a graphical environment that would look familiar to most multimedia authors. SMIL, while it offers many of the capabilities of existing multimedia environments like QuickTime, is not meant to be a replacement for these technologies. Rather, it's kind of universal glue for joining all kinds of different formats and types of media in interesting and useful ways. RealNetworks intends its G2 RealPlayer to be a universal player. Its architecture allows for third-party developers to add renders for new media types, which is how support was added for MPEG1, VRML, and MIDI, for example. Over the coming years, the maturation of both SMIL and the G2 RealPlayer may offer the most compelling opportunity yet for convergence between home entertainment and computer technologies. Bibliography

9 1. Buraga, C., Tehnologii Web, Bucureşti, Editura Matrix, pp , /ebooks/streamingmedia Streamingmedia ebooks 3. /html/resources Online Documentation 4. Tutorial online