Search Unity

  1. Welcome to the Unity Forums! Please take the time to read our Code of Conduct to familiarize yourself with the forum rules and how to post constructively.
  2. We have updated the language to the Editor Terms based on feedback from our employees and community. Learn more.
    Dismiss Notice
New Forum User Notice Update to the Unity Editor Software Terms

Question Combining Agora WebGL and Ready Player Me WebGL Templates

Discussion in 'Editor & General Support' started by surajkm07, Feb 14, 2023.

  1. surajkm07

    surajkm07

    Joined:
    May 27, 2018
    Posts:
    3
    Good Day Devs,

    I am working on multiplayer WebGL experience with "Agora Voice WebGL Community SDK" and "Ready Player Me".

    After adding both the SDKs, I noticed there are two different WebGL templates.

    I combined both the HTML and JS codes from Agora and Ready player me, But seems to be there are multiple bugs that are causing issues in the application while running on server.

    I want to know if there is a procedure to combine both the template and make it work efficiently.

    Thanks
     
    surajkm07, Feb 14, 2023
    #1

  2. yash1047

    yash1047

    Joined:
    Nov 15, 2022
    Posts:
    1
    can you send both sdk how its work
     
    yash1047, Feb 18, 2023
    #2

  3. veera_unity723

    veera_unity723

    Joined:
    Feb 21, 2023
    Posts:
    1
    Same thing we are trying @surajkm07 but we cant able to find the solution. can anyone else help with the same
     
    veera_unity723, Jun 2, 2023
    #3

  4. SubbuWipro

    SubbuWipro

    Joined:
    Feb 17, 2017
    Posts:
    3
    i cracked it. I am able to merge two templates into one template.

    AgoraTemplate2020/index.html
    Code (CSharp):
    1. <!DOCTYPE html>
    2. <html lang="en-us">
    3.  
    4. <head>
    5.     <meta charset="utf-8">
    6.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    7.     <title>Metaverse VRM</title>
    8.     <link rel="shortcut icon" href="TemplateData/favicon.ico">
    9.     <link rel="stylesheet" href="TemplateData/style.css">
    10.     <link rel="stylesheet" href="TemplateData/ReadyPlayerMe/RpmStyle.css"><!-- Required for RPM Web Creator -->
    11.     <script src="AgoraWebSDK/libs/agora-extension-virtual-background.js"></script>
    12.     <script src="AgoraWebSDK/libs/virtualbackground.js"></script>
    13.     <script src="AgoraWebSDK/libs/databuilder.js"></script>
    14.     <script src="AgoraWebSDK/libs/clientmanager.js"></script>
    15.     <script src="AgoraWebSDK/libs/wglwrapper.js"></script>
    16.     <script src="AgoraWebSDK/libs/audioeffects.js"></script>
    17.     <script src="AgoraWebSDK/libs/eventmanager.js"></script>
    18.     <script src="AgoraWebSDK/libs/engineglobals.js"></script>
    19.     <script src="AgoraWebSDK/libs/watermark.js"></script>
    20.     <script src="AgoraWebSDK/libs/customvideo.js"></script>
    21.     <script src="AgoraWebSDK/libs/agorachannel.js"></script>
    22.     <script src="AgoraWebSDK/libs/multichannel.js"></script>
    23.     <script src="AgoraWebSDK/libs/audiosystem.js"></script>
    24.     <script src="AgoraWebSDK/libs/testing.js"></script>
    25.     <script src="AgoraWebSDK/libs/agorautils.js"></script>
    26.     <script src="AgoraWebSDK/libs/audiomixing.js"></script>
    27.     <script src="AgoraWebSDK/agorartcenginev2.js"></script>
    28.     <script src="AgoraWebSDK/vendor/materialize.min.js"></script>
    29.     <script src="AgoraRTC_N.js"></script>
    30.     <script src="AgoraWebSDK/libs/spatial-audio-main.js" type="module"></script>
    31.     <script src="AgoraWebSDK/vendor/jquery.min.js"></script>
    32.  
    33. </head>
    34.  
    35. <body>
    36.     <div id="unity-container" class="unity-desktop">
    37.         <!-- rpm-container div and contents required for RPM Web Creator -->
    38.         <div id="rpm-container">
    39.             <iframe id="rpm-frame" class="rpm-frame" allow="camera *; microphone *"></iframe>
    40.             <button id="rpm-hide-button" onclick="hideRpm()">Hide</button>
    41.         </div>
    42.         <!-- rpm-container div and contents required for RPM Web Creator -->
    43.         <canvas id="unity-canvas"></canvas>
    44.         <div id="unity-loading-bar">
    45.             <div id="unity-logo"></div>
    46.             <div id="unity-progress-bar-empty">
    47.                 <div id="unity-progress-bar-full"></div>
    48.             </div>
    49.         </div>
    50.         <div id="unity-mobile-warning">
    51.             WebGL builds are not supported on mobile devices.
    52.         </div>
    53.         <div id="unity-footer">
    54.             <div id="unity-webgl-logo"></div>
    55.             <div id="unity-fullscreen-button"></div>
    56.         </div>
    57.     </div>
    58.  
    59.     <canvas id="inMem_Canvas" height="450" width="450" style="display: none;"></canvas>
    60.     <canvas id="myCanvas" height="450" width="450" style="display: none;"></canvas>
    61.  
    62.     <div>
    63.         <div id="client-stats" class="stats"></div>
    64.         <div class="row video-group">
    65.             <div class="col">
    66.                 <p id="local-player-name" class="player-name"></p>
    67.                 <div class="player-with-stats">
    68.                     <div id="local-player" class="player"></div>
    69.                     <div id="local-stats" class="stream-stats stats"></div>
    70.                 </div>
    71.             </div>
    72.             <div class="w-100"></div>
    73.             <div class="col">
    74.                 <div id="remote-playerlist"></div>
    75.             </div>
    76.         </div>
    77.     </div>
    78.     <script src="TemplateData/ReadyPlayerMe/RpmGlobal.js"></script> <!-- Required for RPM Web Creator -->
    79.     <script src="TemplateData/Global.js"></script>
    80.     <script src="TemplateData/UnitySetup.js"></script>
    81.     <script src="TemplateData/ReadyPlayerMe/ReadyPlayerMeFrame.js"></script>  <!-- Required for RPM Web Creator -->
    82.  
    83. </body>
    84.  
    85. </html>
    86.  
    1. AgoraTemplate2020\TemplateData: Under this folder you can add ReadyPlayerMe folder(RPMTemplate\TemplateData\ReadyPlayerMe).

    2.     From RPMTemplate\TemplateData folder, Global.js, unitySetup.js scripts you add into AgoraTemplate2020\TemplateData

    3. AgoraTemplate2020\AgoraWebSDK\libs: from this eventmanager.js you can replace instead of UnityInstance , you can change unityGame
    Ex:
    unityGame.SendMessage("AgoraEventHandler", "LastMileQuality", quality);

    It will work, if any issue let us know.
     
    SubbuWipro, Aug 21, 2023
    #4

  5. Sureshcaprus

    Sureshcaprus

    Joined:
    Aug 22, 2023
    Posts:
    1
    Can you help me how to combine agora, avaturn webgl template
     
    Sureshcaprus, Sep 6, 2023
    #5

  6. BIMSaifullahSadi

    BIMSaifullahSadi

    Joined:
    Dec 16, 2022
    Posts:
    1
    @Sureshcaprus it is very simple, open both index files in note pad or Notepadd++.
    1 Create a Template folder (copy from default unity template) & open its index.html in notepadd as well
    2 now you have 3 index files opened in notepad ++, one is the main index or selected (default template) index, the second is ReadyPlayerMe index file and third is Agora index file.
    3 copy one by one different and unique tags start from <head>. Copy head tag data from both Ready player me and agora and paste into main index head tag. it values must not b more than one. keep one if main <head> already has.
    4 go next copy all script reference tags into main index
    5 copy ReadyPlayerMe folder from the Ready Player Me webgl template into main template.
    6 copy folder or files of agora into main template,
    thats done.

    7 Keep the unity instance variable common in all js files for communicating with unity instance.
    Cheers
    email;saifullahsadi@hotmail.com
    skype:xaifullahxady
     
    BIMSaifullahSadi, Sep 12, 2023
    #6