<html>
<head>
    <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" src="http://ctinteractive.reallusion.com/ctinteractive/jquery.alphanumeric.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 () {
                player.loadProject("https://www.reallusion.com/crazytalk/Unity/samplecode/SampleCode15/Actor_Gaze.uctproject", {
                    playAfter: 0,
                    idleMotionUrl: "https://www.reallusion.com/crazytalk/Unity/samplecode/SampleCode15/Affirmative.uctidle"
                });
            });

            $("#txtDegree").numeric();//set to accept numbers only
            $("#txtRadius").numeric();//set to accept numbers only
            $("#txtDuration").numeric();//set to accept numbers only
        });

        function GazeLeft() {
            player.actorGaze({
                degree: 270,
                radius: 90,
                duration: 3.0
            });
        }


        function GazeRight() {
            player.actorGaze({
                degree: 90,
                radius: 70,
                duration: 5.0
            });
        }


        function GazeCustom() {
            player.actorGaze({
                degree: $("#txtDegree").val(),
                radius: $("#txtRadius").val(),
                duration: $("#txtDuration").val()
            });
        }
    </script>
</head>

<body>
    <table style="text-align:center;margin-left:auto; margin-right:auto;">
        <tr>
            <td>
                <div id="unityPlayer" style="width: 640px; height: 480px;">
                </div>
            </td>
        </tr>
        <tr>
            <td>
                <input type="button" value="Gaze left" onclick="GazeLeft()" class="button" />
                <input type="button" value="Gaze right" onclick="GazeRight()" class="button" />
            </td>
        </tr>
        <tr>
            <td>
                Degree(0~360):<input type="text" id="txtDegree" style="width:30px" />
                Radius(0~100):<input type="text" id="txtRadius" style="width:30px" />
                Duration:<input type="text" id="txtDuration" style="width:30px" />
                <input type="button" value="Custom" onclick="GazeCustom()" class="button" />
            </td>
        </tr>
</table>
</body>
</html>