Basic Self-hosting Example - Dropbox (New for 7.31)

In this example, you will see how to easily perform basic self-hosting with Dropbox, a cloud service that allows you to store assets online and access them from your computers or portable devices.

Self-hosting with Dropbox

Creating a New Project

Uploading Assets to Dropbox

Assets from CrazyTalk Interactive Plug-in

Open a web browser and Sign in to your Dropbox account.

Open the Public folder.

Note:

New Dropbox accounts created after October 4, 2012 no longer have a Public folder. You need to manually enable the public folder after having logged in.

Drag and drop the asset files you exported via the CrazyTalk Interactive Plug-in.

Note:

These assets must be put into the Public folder in order for complete accessibility.

Getting Web Player

Download the latest selfhost_resource.zip file.

Unzip the file.

Note:

The files within the zipped file are:

CTWebPlayer.unity3d: This is the web player. You need to use JavaScript code to embed it into your custom web pages.
CTWebPlayer.js: This is the JavaScript file the web player needs for accessing certain and necessary functions.
CTWebPlayer.min.js: This is a compressed version of the CTWebPlayer.js Javascript file. The size is smaller for downloading. Either file can be used for working with the web player with your custom web pages.
ctweblogo.png: This is the logo image that can be seen when the player is loading after your web pages are opened. You are able to customize the logo to whatever you please.

Please also download the API documents for more information about the JavaScript functions you maybe need to use.

Drag and drop the web player into your Dropbox Public folder.

Accessing Web Player and Assets from Custom Web Pages

Create a custom web page (in htm, html... formats).
Open the page in any text editor.

Add the JavaScript code below into the <head> block. The highlighted parts are the addresses you need to modify to introduce the assets on Dropbox into your web pages.

Right click on the file you want (in this case, the *.uctproject) to introduce it into the web player, get the public link (address) of it by selecting the Copy public link... command from the pop-up menu.

Replace the corresponding part of the code with the address you have copied.

"Address_of_Project"	"https://dl.dropboxusercontent.com/u/41014245/My_I_Site.uctproject"
Before	After

Repeat the same steps to introduce more files into the web page.

After the addresses are replaced, the modified parts of the code will become similar to the ones shown below:

player.playerUrl = "https://dl.dropboxusercontent.com/u/41014245/CTWebPlayer.unity3d";
player.init($("#unityPlayer"), function () {
        player.loadProject("https://dl.dropboxusercontent.com/u/41014245/My_I_Site.uctproject", {
                playAfter: 1.5,
                idleMotionUrl: "https://dl.dropboxusercontent.com/u/41014245/Friendly.uctidle"

Insert the code below into the <body> block at the position at which the web player is designated to be located within your custom web page (you are supposed to adjust the width and the height number only in this example).

<div id="unityPlayer" style="width: 293px; height: 188px">
</div>

Reload the custom web page and the player should now be embedded within it.

Note:

Please view the example page here.
For more information about the usage of the related JavaScript code, please refer to the Online Sample Codes.