Getting Started

To start work with Video Uploader, you need to download Video Uploader SDK at http://www.aurigma.com/Products/DownloadFile.aspx?ID=99 location and install it on your development machine.

Run the setup program (VideoUploader.exe) and follow the wizard steps. On one of these steps you specify the folder where to install all Video Uploader SDK files. Typically this is C:\Program Files\Aurigma\Video Uploader 1.0. You will find all necessary files there. They are organized in the following structure:

/Video Uploader 1.0
	/Samples
		/VideoUploaderSample
	iuembed.js
	License.rtf
	VideoUploader.cab
	VideoUploader.chm

Although Video Uploader is an ActiveX control it is not recommended to embed it to a page using <object> tag. The best practice will be to use JavaScript API shipped with the component. Video Uploader client-side API is implemented in the iuembed.js file and included in Video Uploader SDK. This file allows inserting and configuring Video Uploader, as well as provides some handy features, such as checking the configuration and displaying instructions in order to help users to install the control.

To insert Video Uploader to a page using embedding script, follow these steps:

1. Copy VideoUploader.cab and iuembed.js files to your web server.
2. Link the iuembed.js file with the page:

   JavaScript

   <script language="javascript" src="iuembed.js"></script>
   

3. Add JavaScript block in the position where you want to insert Video Uploader. This JavaScript should do the following:
   1. Create an instance of VideoUploaderWriter.
   2. Specify URL to the VideoUploader.cab file via the activeXControlCodeBase property. You can use relative URL.
   3. Specify version number of Video Uploader.
   4. Configure Video Uploader by adding parameters using the addParam method.
   5. Call the writeHtml method.

   JavaScript

   <script language="javascript">
   var vu = new VideoUploaderWriter("VideoUploader", 650, 450);
   
   // ActiveX control settings
   vu.activeXControlCodeBase = "VideoUploader.cab";
   vu.activeXControlVersion = "1,0,14,0";
   
   // ... initialize params as described in the next section ...
   
   // As soon as you call this method, all necessary HTML code is inserted into the page on the current position. 
   // Alternatively, you can get the string with appropriate HTML code using the getHtml method, and write it to 
   // the necessary position manually (maybe with some modifications).  
   vu.writeHtml();
   </script>
   

Try to open this page in the browser; you will see Video Uploader with default settings.

Depending on Internet Explorer settings, the information bar and security dialog prompting whether the user permits installation of Video Uploader may be displayed. The user should click the information bar and then click the Install button to proceed with installation (see the Figure 1.1 and Figure 1.2).

Figure 1.1. Information bar for ActiveX control installation (Internet Explorer 7, Windows Vista).

Figure 1.2. Security dialog (Internet Explorer 7, Windows Vista).

By default, Internet Explorer settings allow automatic installation of signed ActiveX controls (of course, with accepting security dialog). However, there are cases when automatic installation is disabled. Typically, it happens in corporate networks where corporate security policies do not allow it. In this case the users may use standalone installer, it can be downloaded from http://www.aurigma.com/Products/DownloadFile.aspx?ID=103 . You will need to put this standalone installer on your site and provide the users who experience the troubles with standard installation process with the instructions how to install it. Alternatively, you can register Video Uploader manually by extracting the OCX file from VideoUploader.cab and running regsvr32 utility for it:

regsvr32 VideoUploader.ocx

Modifying Parameters

After you add the control on the page, you should configure it. To do it you should use the addParam method of the VideoUploaderWriter JavaScript object. This method accepts two arguments: the name of the parameter and its value.

See the code sample below, it demonstrates how to specify a URL to the page that receives and processes files uploaded by Video Uploader.

<script type="text/javascript">
var vu = new VideoUploaderWriter("VideoUploader", 650, 450);

vu.addParam("Action", "Upload.aspx");

vu.writeHtml();
</script>

Inserting License Key

License key is the first parameter that you should add to your Video Uploader embedding script. There are two types of license keys: trial and full. Trial license key allows evaluating Video Uploader on any domain (not only on localhost). Full license key removes limitations of the evaluation version. See the Using License Keys topic for details. The key (or keys) is specified as a value of the LicenseKey property. Here is how you can do that (note that if you have several keys, they should be separated with semi-colons):

vu.addParam("LicenseKey", "XXXXX-XXXXX-XXXXX-XXXXX-XXXXX;YYYYY-YYYYY-YYYYY-YYYYY-YYYYY");

Video Uploader Parameters

Video Uploader has a big number of parameters, which you can modify to get it working exactly in the way you need. Here we will consider the most significant of them.

Upload Movie Settings

By default, you can upload up to three transcoded movies for each source file. To configure these movies use parameters from the table below, where X is a number in range from 1 to 3.

See the code sample below, it demonstrates how to configure Video Uploader to send watermarked movie.

Upload Thumbnail Settings

You can configure Video Uploader to upload up to three JPEG thumbnails of different sizes per image or movie using parameters from the table below, where X is a number in range from 1 to 3.

The following code snippet demonstrates how to configure Video Uploader to upload a transcoded movie and JPEG thumbnail along with the source file.

<script language="javascript">
var vu = new VideoUploaderWriter("VideoUploader", 650, 450);

// ... other parameters

// Allow uploading source file
vu.addParam("UploadSourceFile", "true");

// Configure upload movie
vu.addParam("UploadMovie1FitMode", "Fit");
vu.addParam("UploadMovie1Width", "640");
vu.addParam("UploadMovie1Height", "480");
vu.addParam("UploadMovie1Bitrate", "1500");
vu.addParam("UploadMovie1StartTime", "0");
vu.addParam("UploadMovie1Duration", "0");
vu.addParam("UploadMovie1FrameRate", "25");
vu.addParam("UploadMovie1Watermark", "ImageUrl=Logo.png;ImageWidth=155;ImageHeight=30;" +
                                     "Position=TopRight;OffsetX=5;OffsetY=5");
                                     
// Configure upload thumbnail
vu.addParam("UploadThumbnail1FitMode", "Fit");
vu.addParam("UploadThumbnail1Width", "120");
vu.addParam("UploadThumbnail1Height", "120");
                                     
vu.writeHtml();
</script>

Video Uploader does not perform any actions on the server. It just sends the HTTP POST request to the server page. This page should receive uploaded files and additional data, save it to necessary folders on the server, and carry out other actions (in the same way, as the <input> element with type attribute set to "file"). You should write this page yourself and specify a URL to it as a value of the Action property.

Here we will discuss how to receive uploaded files server-side by the example of upload processing scripts written in ASP.NET and PHP. Both these scripts perform the same actions for each uploaded file, namely:

• Save the source file into the /Gallery/ folder;
• Save the first thumbnail into the /Gallery/Thumbnails/ folder;
• Save the first movie into the /Gallery/Movies/ folder.

To configure Video Uploader to send POST request in the format that can be parsed by these server scripts you need to use the client script listed in code snippet above.

Uploading in ASP.NET

To process uploaded data in ASP.NET, you can use intrinsic object named Request (System.Web.HttpRequest class). This class represents the POST request and provides an access to its fields through the Form and Files collections. The first one contains a collection of simple POST fields (integer and string values), the second one contains uploaded files. ASP.NET initializes the Request object just before the Page_Load method is called.

When the Request is created it is stored in memory, that is inefficient with huge uploads. However, you can set the threshold value for the upload buffering. If the POST request length exceeds this value, the request is flushed to the temporary file. This threshold is specified in the web.config file of your application with the requestLengthDiskThreshold attribute of the httpRuntime element. The threshold is specified in bytes.

The following code sample demonstrates how to save uploaded files (source, thumbnail, and movie) on the server in ASP.NET.

<%@ Page Language="C#" AutoEventWireup="true" ValidateRequest="false" %>
<script runat="server">
//This variable specifies relative path to the folder, where the gallery 
//with uploaded files is located.
private string galleryPath = "../Gallery/";

private void Page_Load(System.Object sender, System.EventArgs e)
{
    //Get total number of uploaded files (all files are uploaded in a single package).
    int fileCount = Int32.Parse(Request.Form["FileCount"]);

    //Iterate through uploaded data and save the original file and thumbnail
    for (int i = 1; i <= fileCount; i++)
    {
        //Get source file and save it to disk.
        HttpPostedFile sourceFile = Request.Files["SourceFile_" + i];
        string fileName = System.IO.Path.GetFileName(sourceFile.FileName);
        sourceFile.SaveAs(Server.MapPath(galleryPath + fileName));

        //Get first thumbnail (the single thumbnail in this code sample) and save it to disk.
        HttpPostedFile thumbnail1File = Request.Files["Thumbnail1_" + i];
        thumbnail1File.SaveAs(Server.MapPath(galleryPath + "Thumbnails/" + fileName + ".jpg"));
        
        //Get first movie (the single movie in this code sample) and save it to disk.
        HttpPostedFile movie1File = Request.Files["Movie1_" + i];
        movie1File.SaveAs(Server.MapPath(galleryPath + "Movies/" + fileName + ".wmv"));
    }
}
</script>

Uploading in PHP

PHP comprises convenient upload processing facility. There are two built-in collections:

• $_POST (used to be called $HTTP_POST_VARS in earlier versions of PHP) - contains form variables.
• $_FILES (used to be called $HTTP_POST_FILES in earlier versions of PHP) - contains files.

These collections are filled before the PHP script is started. The good news is that files are stored in temporary files on disk instead of memory, and therefore your server will not suffer from memory shortage during large uploads.

See the code sample below to familiarize with uploading in PHP.

<?php
//This variable specifies relative path to the folder, where the gallery 
//with uploaded files is located.
$galleryPath = "../Gallery/";

$absGalleryPath = realpath($galleryPath) . "/";

//Get total number of uploaded files (all files are uploaded in a single package).
$fileCount = $_POST ["FileCount"];

//Iterate through uploaded data and save the original file and thumbnail.
for ($i = 1; $i <= $fileCount; $i++)
{
    //Get source file and save it to disk.
    $sourceFileField = "SourceFile_" . $i;
    $fileName = $_FILES[$sourceFileField]["name"];
    move_uploaded_file($_FILES[$sourceFileField]["tmp_name"], 
        $absGalleryPath . "/" . $fileName);

    //Get first thumbnail (the single thumbnail in this code sample) and save it to disk.
    $thumbnail1Field = "Thumbnail1_" . $i;
    move_uploaded_file($_FILES[$thumbnail1Field]["tmp_name"], 
        $absGalleryPath . "/Thumbnails/" . $fileName . ".jpg");
        
    //Get first movie (the single movie in this code sample) and save it to disk.
    $movie1Fileld = "Movie1_" . $i;
    move_uploaded_file($_FILES[$movie1Fileld]["tmp_name"], 
        $absGalleryPath . "/Movies/" . $fileName . ".wmv");
}
?>

Manual

• Video Uploader Sample Application
• Using License Keys

Reference

• API Reference
• POST Field Reference
• Helper Script Reference (iuembed.js)