Client-Side Programming

@ctiVideoWeb is an OCX control and as such requires MS Internet Explorer 4.0 or higher to run within a webpage. For more information on ActiveX technology in general and how to embed an OCX in a webpage, please visit the following link:

MSDN Introduction to ActiveX Controls

A typical implementation of @ctiVideoWeb in a webpage will look like this:

<object classid="clsid:8D10E13A-BC9F-4214-9CC4-89459DA65932" CODEBASE="@ctiVideoWeb30.CAB#version= 3,0,0,221" width="273" height="245">

<!-- General appearance properties -->
<param name="BackColor" value="0">
<param name="CaptureControls" value="1">
<param name="RequestedWidth" value="240">
<param name="RequestedHeight" value="180">
<param name="ToolbarBorder" value="0">

<!-- Video compression properties -->
<param name="VideoFormat" value="0">
<param name="ASFVideoStreams" value="2">
<param name="ASFVideoMBR" value="0">

<param name="ASFAU_Format" value="6">
<param name="ASFVID_Bitrate" value="19">
<param name="ASFVID_Width" value="160">
<param name="ASFVID_Height" value="120">
<param name="ASFVID_FPS" value="15">
<param name="ASFVID_Quality" value="80">
<param name="ASFVID_SecPerKey" value="8">

<param name="ASFAU_Bitrate2" value="10">
<param name="ASFAU_SampleRate2" value="11025">
<param name="ASFAU_Channels2" value="1">
<param name="ASFVID_Bitrate2" value="19">
<param name="ASFVID_Width2" value="240">
<param name="ASFVID_Height2" value="180">
<param name="ASFVID_FPS2" value="15">
<param name="ASFVID_Quality2" value="80">
<param name="ASFVID_SecPerKey2" value="10">

<!-- Stream header properties -->
<param name="ASFAuthor" value="Author's name goes here...">
<param name="ASFTitle" value="Title goes here...">
<param name="ASFCopyright" value="© goes here...">
<param name="ASFRating" value="Rating goes here...">
<param name="ASFDescription" value="Description goes here...">

<!-- Stream control properties -->
<param name="ASFLiveStream" value="1">
<param name="ASFLivePort" value="7777">

<!-- Upload & navigation properties -->
<param name="UploadURL" value="{SomeURLHere}">
<param name="URLVideoConnectError" value="{SomeURLHere}">
<param name="URLNoHardware" value="{SomeURLHere}">
<param name="URLCaptureFinished" value="{SomeURLHere}">
<param name="UploadBaseName" value="{SomeUniqueIDHere}">
<param name="SessionID" value="{SomeUniqueIDHere}">

</object>

As you see, the usage of the control is not different in any way from the usage of any other ActiveX control in MSIE. There are three main groups of properties you have to take care of, in order to ensure normal operation of the control:

Appearance properties:

This is the easiest part. These properties define the look and feel of the control within your webpage. Most of them are self-explanatory. This group includes the following properties: BackColor, BorderStyle, CaptureControls, RequestedHeight, RequestedWidth, ToolbarAlignment, ToolbarBorder, ToolbarPosition and ToolbarVisible.

Video compression properties:

These properties define the compression parameters for the captured video. First, several words on how the video is processed. When the user hits the "Video" button of the control, the video is captured in a temporary buffer on the user's computer. Once the user reviews the video and decides, that he/she is happy with what was recorded, the next step is uploading the video to the webserver for further use there. This happens after the user clicks the "Send!" button. At this moment, the @ctiVideoWeb control compresses the video, according to the parameters specified and sends it to the webserver. The parameters in this section are very important, as they define the type and quality of compression.

The first and most important parameter here is the VideoFormat property. This property will determine the format of the uploaded video - Windows Media Format (WMV), controlled compression AVI or just raw AVI. For more information on Windows Media Format, please visit Windows Media Developers/Producers. Generally, WMF will produce smaller files and will be available on any user's computer (@ctiVideoWeb will automatically download and install all the necessary CODECs, so any user will be able to upload WMV files). We don't recommend the usage of AVI files (both raw and re-compressed), unless you are advanced video programmer and know how to deal with issues like available CODECs, CODEC installation, etc. AVI files (especially raw AVIs) tend to be MUCH larger, compared to WMV files. So, unless you really know what to do with the AVIs, leave this property to its default value. The WMV files the control creates can be played with MS Windows Media Player and several other players. For more information on WMF in general, please visit www.windowsmedia.com.

The second most important parameter in this group is ASFVideoStreams. This will determine the number of video files, that the control will create and upload to the webserver. The possible values are 1 or 2. If you select 1, then the control will create and upload only one video file (only the field <INPUT type="file" name="ActivideoControl"> will be available in the submitted form). If you select 2, the control will create and upload two video files (both <INPUT type="file" name="ActivideoControl"> and <INPUT type="file" name="ActivideoControl2"> will be available). So, why do you need two files? Imagine, that you want to have the video with high quality, high resolution and nice sound. You'll select high bitrate, height/width and framerate properties. You just got a nice, good looking video. There is one small problem though - only visitors with broadband connection (Cable/DSL/Corporate) will be able to watch this video. Your dial-up visitors will have to wait for ages to download and view this nice clip. Well, then you decide to go with a small, jerky, low bitrate video. It streams fine over dial-up connections, but you'll penalize your broadband visitors, not offering them all the quality they can handle. In order to get the best of both worlds, @ctiVideoWeb allows you to create two separate files, which you can use for the two different types of visitors.

Once you have decided on what file format you'll be using and whether you need one or two files, it's time to look into the compression properties. Each of these properties is explained in details in the programmer's reference. Visit also the Compression considerations section for more tips on proper video compression. The properties are:

For WMF encoded files: ASFAU_Format(2), ASFProfileIndex(2), ASFVID_Bitrate(2), ASFVID_FPS(2), ASFVID_Height(2), ASFVID_Quality(2), ASFVID_SecPerKey(2), ASFVID_Width(2)

For AVI recompressed files: AVIBytesPerSecond(2), AVICompressor(2), AVIInterleaveEvery(2), AVIKeyFrameEvery(2), AVIQuality(2)

Upload & navigation properties:

These properties define the behavior of the control and the interaction with the webserver. The most important property here is UploadURL. This property is equivalent to the "action" parameter in the <FORM> tag of a web form and should contain the fully-qualified URL of the webpage (or script), that will accept the submitted form.

There are two properties, that can be used to help the server distinguish between different users, submitting video. The SessionID property will be passed by the control as value of the <INPUT type="text" name="SessionID"> element of the submitted form. The web-developer can use this property to pass any user-related information, that might be needed on the server-side, when processing the uploaded video. The UploadBaseName property will be used by the control when generating the video filenames. Depending on how your server handles form uploads, you might want to make sure the filenames are unique for each session.

The URLCaptureFinished property allows you to redirect the users browser to a confirmation page (or any other page), once the video has been successfully uploaded. Use this property to forward the user to the next step of your website storyboard.

Finally, you can use the URLNoHardware and URLVideoConnectError properties to redirect the user to different pages in case of error condition. You might want to give the users additional instructions as to how to handle this error ("You really need a camera in order to take pictures of yourself!").