Kinetix Documentation
Website
  • 🖐️Welcome
  • 🕺About Kinetix
  • 🖌️User-Generated Emote
    • 🤖Video-to-animation AI
    • 🤸Kinetix Emote Standards
    • 🦴Retargeting
    • 🏂Kinanim (Emote streaming)
    • 🖊️Try the User-Generated Emote feature
  • INTEGRATION
    • 🤷SDK or API: what to choose
    • 🤩Kinetix SDK
      • ⚙️SDK - Core Package
      • 🧩SDK - Sample scene
      • 🧑‍💻Tested & approved Game Engines for the SDK
      • 💻SDK Integration in Unity
        • ⬇️Set-up Unity & Import the SDK
          • 🔑Get your Game authentification API Key
          • ⚙️Setup your Unity environment
          • 🔧Install the Kinetix SDK in Unity
          • ⌨️SDK Initialization - Unity
        • ⚡Quickstart - Unity SDK
        • 🦋SDK Core Modules activation - Unity
          • 🔐Account Management in Unity
          • 💃Animation System - Unity
            • 🎢Unity's Animator System
            • 🎨Custom Animation System
            • 🌳Root Motion
              • RootMotion + NavMeshAgent
            • 🎞️Frame Controller
            • 💪IK Controller
            • 🫥Avatar Mask
          • 📶Network - Unity SDK
            • Photon PUN
            • Photon Fusion
        • 🕺User-Generated Emote integration (Unity)
          • Embedding the PWA in your Unity application
          • Validation / Retake
        • 🚧How to update Kinetix SDK in Unity?
        • 📕SDK API Reference - Unity
          • KinetixCore
          • KinetixCore.Account
          • KinetixCore.Animation
          • KinetixCore.Metadata
          • KinetixCore.Network
          • KinetixCore.UGC
        • 📂Unity SDK Changelog
      • 🕹️SDK Integration in Unreal Engine
        • ⬇️Set-up Unreal Engine & Download the SDK
          • 🔑Get your Game authentification API Key
          • ⚙️Set up your Unreal Engine environment
          • 🔧Install the Kinetix SDK in Unreal
          • ⌨️UE SDK Core Package Initialization
        • ⚡Quick Start
        • 🦋SDK Core Modules activation - Unreal
          • 🔐Account Management - UE
          • 💃Animation System - UE
            • Local player system in Unreal Engine
            • Avatar system in Unreal Engine
            • Without uploading an avatar (deprecated)
              • Animation in a Third Person Template
              • Animation in an existing project
          • 📶Network - UE SDK
        • 🕺User-Generated Emote integration (UE)
        • 📕SDK API Reference - UE
          • KinetixCore
          • KinetixCore.Account
          • KinetixCore.Animation
          • KinetixCore.Metadata
          • KinetixCore.Network
        • ⬆️Updating from 0.3 to 0.4
        • 📂UE SDK Changelog
    • 😍Kinetix API
      • 🔑Get your Authentification API key
      • 🔌API routes
      • 🪝API Webhooks
      • 🏓Possible Return Codes
  • Management
    • 🚪Developer Portal
      • 👽Avatar Upload
      • 👮UGC Moderation
    • 🖌️UGE: Guides & Best Practices
      • 📐User-Generated Emote specifications
      • 👌Video recording best practices
      • 👻User-Generate Emote Use Cases
  • SUPPORT
    • 📬Bugs reports & features requests
    • ❓FAQ
      • FAQ: General questions
      • FAQ: Unity SDK
      • FAQ: Unreal Engine SDK
    • 🤕Troubleshooting
    • 📚Glossary of terms
Powered by GitBook
On this page
  • Opening the PWA
  • Detecting end of the flow

Was this helpful?

Export as PDF
  1. INTEGRATION
  2. Kinetix SDK
  3. SDK Integration in Unity
  4. User-Generated Emote integration (Unity)

Embedding the PWA in your Unity application

PreviousUser-Generated Emote integration (Unity)NextValidation / Retake

Last updated 5 months ago

Was this helpful?

Although the PWA can be opened in a new browser tab (with Application.OpenURL for example), we recommend finding a way to embed it directly in your app for UX reasons. As an example, we will demonstrate using the plugin "3D WebView for Android and iOS (Web Browser)" ().

Opening the PWA

Once installed, you can follow these steps to integrate it and open the Kinetix PWA:

  • Grab the prefab "CanvasWebViewPrefab" from the demo scenes of the plugin

  • Use the following code to get the PWA url and open it

     
        [SerializeField] private CanvasWebViewPrefab webView;
     
        
        public void BeginOpenPwa()
        {
            KinetixCore.UGC.ClearCachedUrl();
    
            // Example on how to get the link and pass it to the callback
            KinetixCore.UGC.GetUgcUrl(OpenPwa);
        }
    
        private void OpenPwa(string _Url)
        {
            StartCoroutine(OpenPwaCoroutine(_Url));
        }
    
        private IEnumerator OpenPwaCoroutine(string _Url)
        {
            webView.gameObject.SetActive(true);
            
            // Note that we await initialization
            yield return webView.WaitUntilInitialized();
    
            Debug.Log("Target url: " + _Url);
            webView.WebView.LoadUrl(_Url);
        }

Detecting end of the flow

Using the close ("X") buttons in the PWA

If you choose to use this method, please be aware that the "next" and "previous" standard actions of the browser won't work to navigate the pages of the PWA

webView.WebView.CloseRequested += (_Sender, _EventArgs) => {
            Debug.Log("Received close request. Closing web view.");
            Debug.Log("We were on " + webView.WebView.Url);
            
            webView.gameObject.SetActive(false);
            
            // We can fetch the player processes manually if we were on the last url
            // Or just implement a polling (see below)
            if (webView.WebView.Url.Contains("/validation")
            {
                // Fetch processes
            }

};

Via polling

Detecting the end of the flow in the PWA can be done in a variety of ways, but the simplest is to poll the user's processes to detect if a new emote is being processed

    private IEnumerator FetchProcessesAtInterval()
    {
        GetPlayerProcesses();

        while (enabled)
        {
            yield return new WaitForSeconds(currentProcessFetchInterval);
            
            GetPlayerProcesses();
        }
    }

To detect a new valid Process, you can check the length of the processes after filtering them thanks to the property CanBeValidatedOrRejected

 
    private List<SdkApiProcess> GetFilteredProcesses(SdkApiProcess[] _Processes)
    {
        List<SdkApiProcess> filteredProcesses = new List<SdkApiProcess>();
        
        foreach (SdkApiProcess process in _Processes)
        {
            if (!process.CanBeValidatedOrRejected)
                continue;
                
            if (process.Step == "render_failed")
                continue;
            
            if (process.PostMLError == true)
                continue;
            
            filteredProcesses.Add(process);
        }

        return filteredProcesses;
    }

        
        

    private void RefreshProcessList(SdkApiProcess[] _Processes)
    {
        
        List<SdkApiProcess> filteredProcesses = GetFilteredProcesses(_Processes);

        int previousProcessCount = emoteProcessButtons.Count;
        
        if (filteredProcesses.Count > emoteProcessButtons.Count)
            OnNewProcessFound?.Invoke(filteredProcesses[0]); // The API result is ordered from most recent to oldest (DESC)
        
        // Close the PWA OnNewProcessFound
    }

🤩
💻
🕺
available on Unity Asset Store