< Back

Getting Started

UI Display Function

Loading Function

Text to Animated Function

Load Scripts form Text

Actor Function

Interaction Function

Advanced Function

Pre-loading Files

In this sample, you may use the preLoadFiles function to load project and idle motion files in multiple threads. You will experience the advantage of pre-loading files in this web player. Click the buttons to change the project for the left and right players of this page, you will see that the left one shows the other project sooner because it loads the new project when it is playing; while the right player takes more waiting time to load the same project.

Using the preLoadFiles Function	Without Using the preLoadFiles Function

Controls Behaviors

This sample contains two players with two buttons, the behaviors of the two buttons are:

Click the left button, Change Project, to play back the pre-loaded project (Preload2.uctproject) in the left player. The actor will have a pre-loaded idle motion (Affirmative.uctidle) as well.
Click the right button, Change Project, to begin loading the second project (Preload2_1.uctproject) and idle motion (Affirmative1.uctidle) for the actor. The right player must wait for the files to be completely loaded before starting to play.
Please view the source code here.

Sample Code:

Please note that the codes below are only for the left player, which is the one with pre-loading behavior.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ssl-webplayer.unity3d.com/download_webplayer-3.x/3.0/uo/UnityObject2.js"></script>
<script type="text/javascript" src="https://www.reallusion.com/crazytalk/Unity/samplecode/CTWebPlayer.min.js"></script>
<script type="text/javascript">
    var player = new CTWebPlayer();
    $(function () {         
        player.playerUrl = "https://www.reallusion.com/crazytalk/Unity/samplecode/CTWebPlayer.unity3d";
        player.init($("#unityPlayer"), function () {
            var urls = ["https://www.reallusion.com/crazytalk/Unity/samplecode/SampleCode10/Preload2.uctproject",
                        "https://www.reallusion.com/crazytalk/Unity/samplecode/SampleCode10/Affirmative.uctidle"];
            player.preLoadFiles(urls, {
                thread: 2,
                loaded: function() {
                    console.log("all files are loaded!");
                }
            });    
            player.loadProject("https://www.reallusion.com/crazytalk/Unity/samplecode/SampleCode10/Preload.uctproject", {
                playAfter: 0,
                idleMotionUrl: "https://www.reallusion.com/crazytalk/Unity/samplecode/SampleCode10/Affirmative.uctidle"
            });            
        });
    });

    function ChangeProject1() {
        player.loadProject("https://www.reallusion.com/crazytalk/Unity/samplecode/SampleCode10/Preload2_1.uctproject", {
            playAfter: 0,
            idleMotionUrl: "https://www.reallusion.com/crazytalk/Unity/samplecode/SampleCode10/Affirmative1.uctidle"
        });
    }
</script>

Copy and paste the codes in-between the <head> and </head> tags of your custom web page.
The purposes of the functions:
- $(function (): This function defines the addresses, the positions of two CrazyTalk Web Players in the custom web and loads and auto plays a default project (Preload.uctproject); meanwhile, the first player also loads two more files (Preload2.uctproject, Affirmative.uctidle) behind the scenes as it is playing the default project.
- function ChangeProject1(): This function loads and plays the preloaded project and assigns the preloaded idle motion to its actor.

The adjustable code in the functions:
$(function ()

Replace the below address of the CrazyTalk Web Player with the one within your self-hosting server.
https://www.reallusion.com/crazytalk/Unity/samplecode/CTWebPlayer.unity3d

Replace the below address of the *.uctproject file with the one where you have uploaded your custom project.
https://www.reallusion.com/crazytalk/Unity/samplecode/SampleCode10/Preload.uctproject

Note:

If the custom actor files are uploaded to the identical server where your custom web pages are, then simply change the entire addresses (http://...uctmodel) to the file names of the custom actors.
Otherwise, you must replace the entire addresses with the complete addresses (URL) of the custom actor files.

playAfter: The value determines the seconds for the player to wait before starting play the true content of the project. A negative value means not to play back after the project is loaded.
var urls: This line declares a new array in which multiple addresses are stored. In this case, there is one project and one idle motion file:
https://www.reallusion.com/crazytalk/Unity/samplecode/SampleCode10/Preload2.uctproject
https://www.reallusion.com/crazytalk/Unity/samplecode/SampleCode10/Affirmative.uctidle
You may replace the original addresses with custom ones you want to preload.
thread: The number after this parameter determines the number of the files in the array for preloading at once. You may increase the number to preload more files simultaneously, however more files in pre-loading means more data bandwidth will be required.

function ChangeProject1()

Replace the below addresses of the *.uctproject and *.uctidle files with the identical ones you have specified to be preloaded in previous code.
https://www.reallusion.com/crazytalk/Unity/samplecode/SampleCode10/Preload2.uctproject
https://www.reallusion.com/crazytalk/Unity/samplecode/SampleCode10/Affirmative.uctidle

Note:

Please note that because the files are pre-loaded into the cache of the browser, it will instantly play the project without re-loading it from the specified URL, which decreases the waiting time before the project playback.

playAfter: This value determines the seconds for the player to wait before starting play the true content of the preloaded project. A negative value means not to play back.

<div id="unityPlayer" style="width: 512px; height: 384px;">
</div>

<input type="button" value="Change Project" onclick="ChangeProject1()" class="button" />
<input type="button" value="Change Project" onclick="ChangeProject2()" class="button" />

Web Player

Copy and paste the codes from <div> to </div> into the position where you want to embed the web player in-between the <body> and </body> tags of your custom web page.
Modify the numbers after the width: and height: parameters in the first line to customize the size of the player.

Controls for Changing Projects

Copy the <input.../> line to the position where you want to embed the button in-between the <body> and </body> tags of your custom web page.

Note:

The function and the button that calls it must be individually put within the head and body blocks in pairs.
You can only copy and paste the desired buttons and the functions to your custom web pages.

These <input.../> lines form a button on the web. It will call the function declared within the head block after being clicked.

Getting Started

UI Display Function

Loading Function

Text to Animated Function

Actor Function

Interaction Function

Advanced Function

Pre-loading Files

Using the preLoadFiles Function

Without Using the preLoadFiles Function

Controls Behaviors

Sample Code:

Web Player

Controls for Changing Projects