devbox
花生_TL007
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Unity之webgl端通过vue3接入腾讯云联络中心SDK_unity sendmsgtovue

作者：花生_TL007 | 2024-02-16 15:58:49

赞

踩

unity sendmsgtovue

腾讯云联络中心SDK:云联络中心 Web-SDK 开发指南-文档中心-腾讯云 (tencent.com)

1 首先下载Demo

​

 1.1 对其进行解压

​

 1.2根据文档操作

查看README.md,根据说明设置server下的dev.js里的相关参数。

然后打开电脑终端，cd到项目的路径：

​

安装依赖

 ​

运行

​ 

1.3 运行demo

复制http://127.0.0.1:5173/在浏览器里输入，这时候会显示如下画面：

输入电话号码，点击拨打就会把电话打出去。

​ 

 2 在Unity端的操作

2.1 创建Unity工程

 新建一个Unity工程，在Assets/Plugins/WebGl下创建一个后缀为jslib的文件，记事本打开编写脚本如下：

  1. mergeInto(LibraryManager.library, {
  2. 	ReportReady: function () {
  3. 		window.ReportReady()
  4. 	},
  5.          
  6.         TellPhone:function(typeName, phone){
  7.              SendPhone(UTF8ToString(typeName), UTF8ToString(phone))
  8.         }
  9.  
  10. });

​

 2.2 编写挂载对象UIPanel上的脚本

  1. using System.Collections;
  2. using System.Collections.Generic;
  3. using System.Runtime.InteropServices;
  4. using UnityEngine;
  5. using UnityEngine.UI;
  6. using TMPro;
  7.  
  8. public class UIPanel : MonoBehaviour
  9. { 
  10.     [DllImport("__Internal")]
  11.     private static extern string ReportReady();
  12.     [DllImport("__Internal")]
  13.     private static extern string TellPhone(string type,string phone);
  14.     public TextMeshProUGUI text;
  15.     public TMP_InputField inputField;
  16.     void Start()
  17.     {
  18.         ReportReady();//向vue报告脚本初始化完成
  19.     }
  20.     public void OpenPhone()
  21.     {
  22.         TellPhone("tellphone",inputField.text);
  23.     }
  24.     public void receiveMsgFromVue(string token) {
  25.         text.text = token;
  26.         Debug.Log("接受来自vue的消息 == " + token);
  27.     }
  28. }

2.3 Unity的UI界面

​

2.4最后打包webgl的包

放在tccc-demo-vue\src\路径下，如下图所示：

 ​

2.5改写index.html

打开index.html:

​

SendPhone是Unity发送给网页的方法，sendMsgToUnity方法是网页发送个Unity的方法。

index.html完整代码如下：

  1. <!DOCTYPE html>
  2. <html lang="en-us">
  3.   <head>
  4.     <meta charset="utf-8">
  5.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  6.     <title>Unity WebGL Player | Web731</title>
  7.     <link rel="shortcut icon" href="TemplateData/favicon.ico">
  8.     <link rel="stylesheet" href="TemplateData/style.css">
  9.   </head>
  10.   <body>
  11.     <div id="unity-container" class="unity-desktop">
  12.       <canvas id="unity-canvas" width=1920 height=1080></canvas>
  13.       <div id="unity-loading-bar">
  14.         <div id="unity-logo"></div>
  15.         <div id="unity-progress-bar-empty">
  16.           <div id="unity-progress-bar-full"></div>
  17.         </div>
  18.       </div>
  19.       <div id="unity-warning"> </div>
  20.       <div id="unity-footer">
  21.         <div id="unity-webgl-logo"></div>
  22.         <div id="unity-fullscreen-button"></div>
  23.         <div id="unity-build-title">Web731</div>
  24.       </div>
  25.     </div>
  26.     <script>
  27.       var container = document.querySelector("#unity-container");
  28.       var canvas = document.querySelector("#unity-canvas");
  29.       var loadingBar = document.querySelector("#unity-loading-bar");
  30.       var progressBarFull = document.querySelector("#unity-progress-bar-full");
  31.       var fullscreenButton = document.querySelector("#unity-fullscreen-button");
  32.       var warningBanner = document.querySelector("#unity-warning");
  33.  
  34.       // Shows a temporary message banner/ribbon for a few seconds, or
  35.       // a permanent error message on top of the canvas if type=='error'.
  36.       // If type=='warning', a yellow highlight color is used.
  37.       // Modify or remove this function to customize the visually presented
  38.       // way that non-critical warnings and error messages are presented to the
  39.       // user.
  40.       function unityShowBanner(msg, type) {
  41.         function updateBannerVisibility() {
  42.           warningBanner.style.display = warningBanner.children.length ? 'block' : 'none';
  43.         }
  44.         var div = document.createElement('div');
  45.         div.innerHTML = msg;
  46.         warningBanner.appendChild(div);
  47.         if (type == 'error') div.style = 'background: red; padding: 10px;';
  48.         else {
  49.           if (type == 'warning') div.style = 'background: yellow; padding: 10px;';
  50.           setTimeout(function() {
  51.             warningBanner.removeChild(div);
  52.             updateBannerVisibility();
  53.           }, 5000);
  54.         }
  55.         updateBannerVisibility();
  56.       }
  57.  
  58.       var buildUrl = "Build";
  59.       var loaderUrl = buildUrl + "/web0803.loader.js";
  60.       var config = {
  61.         dataUrl: buildUrl + "/web0803.data.unityweb",
  62.         frameworkUrl: buildUrl + "/web0803.framework.js.unityweb",
  63.         codeUrl: buildUrl + "/web0803.wasm.unityweb",
  64.         streamingAssetsUrl: "StreamingAssets",
  65.         companyName: "DefaultCompany",
  66.         productName: "Web731",
  67.         productVersion: "0.1",
  68.         showBanner: unityShowBanner,
  69.       };
  70.  
  71.       // By default Unity keeps WebGL canvas render target size matched with
  72.       // the DOM size of the canvas element (scaled by window.devicePixelRatio)
  73.       // Set this to false if you want to decouple this synchronization from
  74.       // happening inside the engine, and you would instead like to size up
  75.       // the canvas DOM size and WebGL render target sizes yourself.
  76.       // config.matchWebGLToCanvasSize = false;
  77.  
  78.       if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
  79.         container.className = "unity-mobile";
  80.         // Avoid draining fillrate performance on mobile devices,
  81.         // and default/override low DPI mode on mobile browsers.
  82.         config.devicePixelRatio = 1;
  83.         unityShowBanner('WebGL builds are not supported on mobile devices.');
  84.       } else {
  85.         canvas.style.width = "1920px";
  86.         canvas.style.height = "1080px";
  87.       }
  88.       loadingBar.style.display = "block";
  89.  
  90.       var script = document.createElement("script");
  91.       script.src = loaderUrl;
  92.       script.onload = () => {
  93.         createUnityInstance(canvas, config, (progress) => {
  94.           progressBarFull.style.width = 100 * progress + "%";
  95.         }).then((unityInstance) => {
  96.           loadingBar.style.display = "none";
  97.           fullscreenButton.onclick = () => {
  98.             unityInstance.SetFullscreen(1);
  99.           };
  100.           unityInstanceV = unityInstance;
  101.         }).catch((message) => {
  102.           alert(message);
  103.         });
  104.       };
  105.       document.body.appendChild(script);
  106.  
  107.   var unityInstanceV;
  108.   function ReportReady() {
  109.     window.parent.postMessage({guid:"",event:"ReportReady"}, "*");
  110.   }
  111.   function SendPhone(_type,_phone)
  112.   {
  113.     // alert(s);
  114.     if (_type == "tellphone"){
  115.       window.parent.postMessage({guid:"",event:_type,phone:_phone}, "*");
  116.     }else {
  117.       window.parent.postMessage({guid:_type,event:"guid"}, "*");
  118.     }
  119.   }
  120.  
  121.   function sendMsgToUnity(obj) {
  122.     unityInstanceV.SendMessage('UIPanel','receiveMsgFromVue',JSON.stringify(obj))
  123.   }
  124.  
  125.     </script>
  126.   </body>
  127. </html>

2.6 修改Container.vue脚本

增加和Unity交互的方法

​

 把原先显示的界面代码删除掉<div class="container"> </div>

​

 style 部分也删掉

对Vue不熟悉，我的理解是这样的（理解不对请留言指正）

其中 

  1. onMounted(()=>{
  2.         window.addEventListener('message', unityWatch,true)
  3.     })

是事件，对Unity发送来的消息进行监听。

  1. function  vueSendToUnity(){
  2.       console.log(statusMap[status.value])
  3.       unityIframe.value.contentWindow.sendMsgToUnity({userId:'****',状态:status.value|| '加载中...'})  
  4. }

是vue把消息发送到Unity端。

  1. <template>
  2.   <div >
  3. <iframe id="iframe" ref="unityIframe" src="/src/unity/index.html" style="width:100%;height:100vh" frameborder="0" scrolling="auto" /> 
  4.   </div>
  5. </template>

是Unity部分进行显示（其中stytle的height:100% 不起作用，有知道的请留言，谢谢，所以我改为了height:100vh）。

Container.vue修改后代码如下：

  1. <script setup>
  2. import { ref, onMounted } from 'vue'
  3. const wechatGroupImg = 'https://tccc.qcloud.com/assets/wechatGroup.png';
  4. const arrowImg = 'https://tccc.qcloud.com/assets/arrow.png';
  5.  
  6. const seat = ref('')
  7. const status = ref('')
  8. const number = ref('')
  9. const loading = ref(false)
  10. const isError = ref(false)
  11. const errorField = ref('')
  12.  
  13. const statusMap = {
  14.   offline: '已下线',
  15.   disconnect: '网络断开，重连中',
  16.   free: '空闲中',
  17.   busy: '忙碌中',
  18.   rest: '小休中',
  19.   countdown: '话后倒计时',
  20.   arrange: '话后整理中',
  21.   notReady: '示忙中',
  22. }
  23.  
  24. const errorFieldMap = {
  25.   'InvalidParameterValue.InstanceNotExist': 'sdkAppId',
  26.   'InvalidParameterValue.AccountNotExist': 'userId',
  27.   'AuthFailure.SignatureFailure': 'secretKey或secretId',
  28.   'AuthFailure.SecretIdNotFound': 'secretId',
  29. };
  30.  
  31. const injectTCCC = ({ token, sdkAppId, userId, sdkUrl }) => {
  32.   const scriptDom = document.createElement('script')
  33.   scriptDom.setAttribute('crossorigin', 'anonymous')
  34.   scriptDom.dataset.token = token
  35.   scriptDom.dataset.sdkAppId = sdkAppId
  36.   scriptDom.dataset.userid = userId
  37.   scriptDom.src = sdkUrl
  38.   document.body.appendChild(scriptDom)
  39.   scriptDom.addEventListener('load', () => {
  40.     // ready事件必须监听，否则容易发生tccc不存在的错误，所有呼入呼出的逻辑必须在ready事件触发后才可以调用
  41.     window.tccc.on('ready', () => {
  42.       // 以下为Demo逻辑，非业务必须。业务代码主要实现都在这个部分
  43.       const statusVal = window.tccc.Agent.getStatus()
  44.       status.value = statusVal;
  45.       seat.value = userId;
  46.     })
  47.     // 以下为Demo逻辑，非接入必须
  48.     setInterval(() => {
  49.       const statusVal = window.tccc.Agent.getStatus()
  50.       status.value = statusVal;
  51.     }, 200)
  52.   })
  53. }
  54.  
  55. onMounted(() => {
  56.   // 获取Token的方法必须在页面初始化时第一优先级调用
  57.   fetch('/loginTCCC')
  58.     .then((res) => res.json())
  59.     .then((res) => {
  60.       // 以下为Demo逻辑，需要替换为业务逻辑
  61.       if (res.code) {
  62.         if (res.type) {
  63.           isError.value = true;
  64.           errorField.value = errorFieldMap[res.code]
  65.         } else {
  66.           isError.value = true;
  67.           if (errorFieldMap[res.code]) {
  68.             errorField.value = errorFieldMap[res.code]
  69.           } else {
  70.             alert(res.errMsg);
  71.           }
  72.           return;
  73.         }
  74.       }
  75.       // 调用成功后才可以开始执行TCCC的注入
  76.       injectTCCC({
  77.         token: res.token,
  78.         userId: res.userId,
  79.         sdkUrl: res.sdkUrl,
  80.         sdkAppId: res.sdkAppId,
  81.       })
  82.     })
  83.     .catch((error) => {
  84.       console.error(`获取Token失败：${error.message}`)
  85.     })
  86. })
  87.  
  88. const handleCallout = async () => {
  89.   if (loading.value) {
  90.     return
  91.   }
  92.   loading.value = true
  93.   // 调用呼出方法的核心代码
  94.   try {
  95.     await window.tccc.Call.startOutboundCall({ phoneNumber: number.value })
  96.   } catch (error) {
  97.     console.error(`呼出失败：${error.message}`)
  98.   } finally {
  99.     loading.value = false
  100.   }
  101. }
  102.  
  103.  
  104.  onMounted(()=>{
  105.         window.addEventListener('message', unityWatch,true)
  106.     }) 
  107.   function unityWatch(e){
  108.       console.log('unityWatch方法调用 e==' + e.data.guid + '    event=' + e.data.event)
  109.       if(e.data.event=='tellphone'){
  110.             handleCalloutByUnity(e.data.phone)  
  111.             vueSendToUnity()  
  112.       }
  113. } 
  114.   //Unity端调用vue里的打电话功能
  115. const handleCalloutByUnity = async (phone) => {
  116.   if (loading.value) {
  117.     return
  118.   }
  119.   loading.value = true
  120.   // 调用呼出方法的核心代码
  121.   try {
  122.     await window.tccc.Call.startOutboundCall({ phoneNumber: phone })
  123.   } catch (error) {
  124.     console.error(`呼出失败：${error.message}`)
  125.   } finally {
  126.     loading.value = false
  127.   }
  128. }
  129.  
  130. const unityIframe = ref('unityIframe')
  131. function  vueSendToUnity(){
  132.       console.log(statusMap[status.value])
  133.       unityIframe.value.contentWindow.sendMsgToUnity({userId:'****',状态:status.value|| '加载中...'})      
  134. }
  135.  
  136. </script>
  137.  
  138. <template>
  139.   <div >
  140. <iframe id="iframe" ref="unityIframe" src="/src/unity/index.html" style="width:100%;height:100vh" frameborder="0" scrolling="auto" /> 
  141.   </div>
  142. </template>
  143.

2.7 测试运行

测试运行时得保证终端npm run dev在运行中

 在Unity 的界面上输入手机号点击拨打，电话打了出去，同时Unity端收到了vue发送过来的消息。

2.8 网页内全屏

这时候如果需要Unity在网页内全屏，且不显示滚动条，需要打开Unity的index.html进行再次修改：

 

 

 

 

 index.html的修改后如下：

  1. <!DOCTYPE html>
  2. <html lang="en-us">
  3.   <head>
  4.     <meta charset="utf-8">
  5.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  6.     <title>Unity WebGL Player | Web731</title>
  7.     <link rel="shortcut icon" href="TemplateData/favicon.ico">
  8.     <link rel="stylesheet" href="TemplateData/style.css">
  9.   </head>
  10.   <body>
  11.     <div id="unity-container" style="width: 100%;height:100%">
  12.       <canvas id="unity-canvas" width=auto height=auto></canvas>
  13.       <div id="unity-loading-bar">
  14.         <div id="unity-logo"></div>
  15.         <div id="unity-progress-bar-empty">
  16.           <div id="unity-progress-bar-full"></div>
  17.         </div>
  18.       </div>
  19.       <div id="unity-warning"> </div>
  20.      
  21.     </div>
  22.     <script>
  23.       var container = document.querySelector("#unity-container");
  24.       var canvas = document.querySelector("#unity-canvas");
  25.       var loadingBar = document.querySelector("#unity-loading-bar");
  26.       var progressBarFull = document.querySelector("#unity-progress-bar-full");
  27.       //var fullscreenButton = document.querySelector("#unity-fullscreen-button");
  28.       var warningBanner = document.querySelector("#unity-warning");
  29.  
  30.       // Shows a temporary message banner/ribbon for a few seconds, or
  31.       // a permanent error message on top of the canvas if type=='error'.
  32.       // If type=='warning', a yellow highlight color is used.
  33.       // Modify or remove this function to customize the visually presented
  34.       // way that non-critical warnings and error messages are presented to the
  35.       // user.
  36.       function unityShowBanner(msg, type) {
  37.         function updateBannerVisibility() {
  38.           warningBanner.style.display = warningBanner.children.length ? 'block' : 'none';
  39.         }
  40.         var div = document.createElement('div');
  41.         div.innerHTML = msg;
  42.         warningBanner.appendChild(div);
  43.         if (type == 'error') div.style = 'background: red; padding: 10px;';
  44.         else {
  45.           if (type == 'warning') div.style = 'background: yellow; padding: 10px;';
  46.           setTimeout(function() {
  47.             warningBanner.removeChild(div);
  48.             updateBannerVisibility();
  49.           }, 5000);
  50.         }
  51.         updateBannerVisibility();
  52.       }
  53.  
  54.       var buildUrl = "Build";
  55.       var loaderUrl = buildUrl + "/web0803.loader.js";
  56.       var config = {
  57.         dataUrl: buildUrl + "/web0803.data.unityweb",
  58.         frameworkUrl: buildUrl + "/web0803.framework.js.unityweb",
  59.         codeUrl: buildUrl + "/web0803.wasm.unityweb",
  60.         streamingAssetsUrl: "StreamingAssets",
  61.         companyName: "DefaultCompany",
  62.         productName: "Web731",
  63.         productVersion: "0.1",
  64.         showBanner: unityShowBanner,
  65.       };
  66.  
  67.       // By default Unity keeps WebGL canvas render target size matched with
  68.       // the DOM size of the canvas element (scaled by window.devicePixelRatio)
  69.       // Set this to false if you want to decouple this synchronization from
  70.       // happening inside the engine, and you would instead like to size up
  71.       // the canvas DOM size and WebGL render target sizes yourself.
  72.       // config.matchWebGLToCanvasSize = false;
  73.  
  74.       if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
  75.         var meta = document.createElement('meta');
  76.            meta.name = 'viewport';
  77.            meta.content = 'width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, shrink-to-fit=yes';
  78.            document.getElementsByTagName('head')[0].appendChild(meta);
  79.            container.className = "unity-mobile";
  80.          
  81.            canvas.style.width = window.innerWidth + 'px';
  82.            canvas.style.height = window.innerHeight + 'px';
  83.  
  84.  
  85.        unityShowBanner('暂不支持移动端...');
  86.      } else {	  
  87.       canvas.style.height= document.documentElement.clientHeight+"px";
  88.       canvas.style.width = document.documentElement.clientWidth+"px"; 	  
  89.      }
  90.       loadingBar.style.display = "block";
  91.  
  92.       var script = document.createElement("script");
  93.       script.src = loaderUrl;
  94.       script.onload = () => {
  95.         createUnityInstance(canvas, config, (progress) => {
  96.           progressBarFull.style.width = 100 * progress + "%";
  97.         }).then((unityInstance) => {
  98.           loadingBar.style.display = "none";
  99.           //fullscreenButton.onclick = () => {
  100.           //  unityInstance.SetFullscreen(1);
  101.           //};
  102.           unityInstanceV = unityInstance;
  103.         }).catch((message) => {
  104.           alert(message);
  105.         });
  106.       };
  107.       document.body.appendChild(script);
  108.  
  109.   var unityInstanceV;
  110.   function ReportReady() {
  111.     window.parent.postMessage({guid:"",event:"ReportReady"}, "*");
  112.   }
  113.   function SendPhone(_type,_phone)
  114.   {
  115.     // alert(s);
  116.     if (_type == "tellphone"){
  117.       window.parent.postMessage({guid:"",event:_type,phone:_phone}, "*");
  118.     }else {
  119.       window.parent.postMessage({guid:_type,event:"guid"}, "*");
  120.     }
  121.   }
  122.  
  123.   function sendMsgToUnity(obj) {
  124.     unityInstanceV.SendMessage('UIPanel','receiveMsgFromVue',JSON.stringify(obj))
  125.   }
  126.  
  127.     </script>
  128.   </body>
  129. </html>

打开Unity\TemplateData路径下的style.css增加：

  1. html,body{width:100%;height:100%;margin:0;padding:0;overflow:hidden;}
  2. .webgl-content{width: 100%; height: 100%;}
  3. .unityContainer{width: 100%; height: 100%;}

style.css完整脚本如下：

  1. body { padding: 0; margin: 0 }
  2. #unity-container { position: absolute }
  3. #unity-container.unity-desktop { left: 50%; top: 50%; transform: translate(-50%, -50%) }
  4. #unity-container.unity-mobile { width: 100%; height: 100% }
  5. #unity-canvas { background: #231F20 }
  6. .unity-mobile #unity-canvas { width: 100%; height: 100% }
  7. #unity-loading-bar { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none }
  8. #unity-logo { width: 154px; height: 130px; background: url('unity-logo-dark.png') no-repeat center }
  9. #unity-progress-bar-empty { width: 141px; height: 18px; margin-top: 10px; background: url('progress-bar-empty-dark.png') no-repeat center }
  10. #unity-progress-bar-full { width: 0%; height: 18px; margin-top: 10px; background: url('progress-bar-full-dark.png') no-repeat center }
  11. #unity-footer { position: relative }
  12. .unity-mobile #unity-footer { display: none }
  13. #unity-webgl-logo { float:left; width: 204px; height: 38px; background: url('webgl-logo.png') no-repeat center }
  14. #unity-build-title { float: right; margin-right: 10px; line-height: 38px; font-family: arial; font-size: 18px }
  15. #unity-fullscreen-button { float: right; width: 38px; height: 38px; background: url('fullscreen-button.png') no-repeat center }
  16. #unity-warning { position: absolute; left: 50%; top: 5%; transform: translate(-50%); background: white; padding: 10px; display: none }
  17.  
  18.  
  19. html,body{width:100%;height:100%;margin:0;padding:0;overflow:hidden;}
  20. .webgl-content{width: 100%; height: 100%;}
  21. .unityContainer{width: 100%; height: 100%;}

 但是vue的这个右侧还是有滚动条，还没找到隐藏的方法，有知道的同学请留言，谢谢。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/花生_TL007/article/detail/94952
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号