Unity插件——WebView内嵌网页/浏览器插件

青岚岁叶

已于 2024-05-28 12:47:36 修改

阅读量7.6k

点赞数 3

分类专栏：插件 Unity Bug处理文章标签： unity3d 插件经验分享

于 2021-06-24 17:36:09 首次发布

本文链接：https://blog.csdn.net/weixin_43908355/article/details/118192061

版权

Unity 同时被 3 个专栏收录

27 篇文章 5 订阅

订阅专栏

Bug处理

18 篇文章 0 订阅

订阅专栏

插件

5 篇文章 0 订阅

订阅专栏

一、相关插件学习分析：

（一）Embedded Browser 插件

1、优点：PC端优选

设置简单，功能强大：输入url地址，拉取网页信息，可设置页面尺寸；

可显示透明背景的网页；可与显示的页面进行互动（页面互动和相应添加的unity事件）。

2、缺点：平台有限

不支持android、iOS、UWP平台，仅支持PC端、Unity编辑器、 OS、Linux；

3、资源地址

资源文件夹名：ZFBrowserUnity Embedded Browser | GUI 工具 | Unity Asset Store；

（二）UniWebView插件

1、优点：据说在移动端效果最好

适用于Andriod、ios和Mac os。支持WP8。

2、缺点：平台有限

不支持windowsPC桌面系统，包括编辑器状态，显示的网页是贴屏显示。

3、测试结果

（1）该插件显示的网页是贴屏显示，显示网页覆盖做的UI，UI放到显示网页的Image外部，不要有重叠部分才能相应实现对应UI功能。故，无法实现点击页面/页面位置，显示放大的页面，这个功能。（也可能了解不够深入，未能解决该问题）。

（2）该插件可以简单方便的设置需要加载什么样的网页（输入地址链接即可），较简单的设置是否显示网页，前进后退网页页面等功能，以及设置加载网页的显示位置、大小尺寸。但无法设置改变加载的网页的尺寸（以适配显示区域）。

4、资源地址

UniWebView 4 | 网络 | Unity Asset Store；

（三）UnityAndroidWebviewToTexture插件

1、优点：可满足很多需求

（1）支持安卓移动端，3d环境使用，非贴屏显示使用。

（2）使用简单，且通过地址获取的网页可以自适应显示在限定的显示区域。

（3）网页端内容改变时，移动端会自动刷新；

（4）支持触屏点击、双击等事件。

2、缺点：互动功能有限

（1）移动端显示为静态的图片的Texture/Texture2D，或3d物体的Renderer的Mesh；

无法与网页进行互动。

（2）找不到设置网页透明通道和设置网页页面放缩的功能方法。

3、测试结果

理论：通过地址，获取网页页面byte信息，然后创建加载新的Texture2D显示在移动端。

4、资源地址：

Texture Web View (Android) | GUI 工具 | Unity Asset Store；

（四）3D WebView for Android插件

1、优点：可满足多个需求

（1）有多种包，可选支持android、ISO、WindowsPC、macOS等待。

（2）可以动态显示加载的页面，且可以和加载的页面进行交互（如加载百度页面，可使用百度页面里的搜索栏进行搜索、页面跳转等）；

（3）对页面添加的事件也可以正常运行（如双击显示展示的页面，点击展示的页面之外区域，掩藏页面等）；

（4）可动态更改页面地址，显示不同的页面；可动态设置显示页面的分辨率来实现在显示框里放大或缩小页面。

2、缺点：页面透明度设置存在问题

（1）找不到设置加载的网页背景透明度的设置，显示的页面背景不透明度是百分之百。

（2）在线卑微，说支持透明网页，但还没发现使用方法

3、测试效果：功能挺强大。倾向优选

二、遇到的存在问题：

（一）3D WebView显示问题（2021/06/25）

1、功能需求

通过使用插件文档里，在前端网页端里添加标签，实现显示的页面背景透明显示。

2、相关资料

（1）开发文档地址：

3D WebView: cross-platform web browser for Unity (Android, iOS, Windows, macOS, and UWP / Hololens) | Vuplex

（2）官方博客——透明度设置：

How can I make a webview transparent? | Vuplex Support

3、问题与解决过程

我这边是前端那边做的页面是全透明的，unity端给页面加背景底图。

最初加载过来的页面是不透明的，有网页背景显示；

后来查官网blog，让前端同事帮忙在页面<head>加上下面这个设置，解决透明度问题：

<meta name="transparent" content="true">

4、tip

页面修改更新后，客户端这边记得清理下浏览器页面/unity缓存；

不然加载的页面可能显示是修改前的页面，没有透明度效果。

（二）项目中使用3D WebView存在的问题

1、问题：

（1）在3d环境中显示页面可正常显示（使用WebView）；

（2）在画布环境中加载页面时（使用CanvasWebView），加载的页面完全看不到，环境中页面显示区域显示效果是什么都没有，但触摸点击，可发现该位置上有相关页面，且可正常与页面进行互动（如点击到百度页面的输入框，可以输入文字进行搜索），页面上相关点击事件也可正常使用。

2、初步研究：

经测试排除画布方向错误、镜头位置和渲染层级影响，以及URP管道渲染影响（支持URP技术）的可能。

3、进一步研究研究：

（1）原因：

webview设置的分辨率和webview所在的canvas的设置冲突，WebView缩放问题；

（2）表现：

1）默认情况设置：

CanvasWebViewPrefab预制体上分辨率InitialResolution=1;

CanvasWebViewPrefab预制体运行时生成的WebViewPrefab的分辨率InitialResolution=1300；

canvas的CanvasScaler可根据需求设置；

2）当我们需要根据需求缩放页面时：

如加载的页面在显示框里放大显示时，改CanvasWebViewPrefab的Resolution为0.3,0.4等等

3）页面不显示时的错误参数

（无报错，也有可能是切换调试器晚了，错过开始的报错提示）：

CanvasWebViewPrefab预制体上分辨率InitialResolution=2.5;（实际加载显示的页面进行缩小）

canvas的CanvasScaler的Mode=Constant Pixel Size（没有设值预设尺寸：（Mode=ScaleWithScreenSize(3840*2160)））；

canvas的Canvas-RenderMode=ScreenSpace-Overlay（非项目下这个参数这样设置没问题，但项目里该模式不显示出页面）

4）页面不显示时的错误参数（有报错）：

CanvasWebViewPrefab预制体上分辨率InitialResolution=2.5;

canvas的CanvasScaler的Mode=ScaleWithScreenSize(3840*2160)；

canvas的Canvas-RenderMode=Main Camera

报错：

WebView分辨率为1300，但画布设置分辨率过大，不匹配，请修改合适的分辨率；

ArgumentException: 
The application specified an abnormally large webview size (9550px x 4380px), 
and webviews of this size are normally only created by mistake. 
A webview's default resolution is 1300px per Unity unit, 
so it's likely that you specified a large physical size by mistake or need to adjust the resolution. 
For more information, please see IWebView.SetResolution: https://developer.vuplex.com/webview/IWebView#SetResolution

（3）解决问题时设置

CanvasWebViewPrefab——InitialResolution=1;

canvas——CanvasScaler的Mode=ScaleWithScreenSize(3840*2160)；

canvas的Canvas-RenderMode=ScreenSpace-Camera;

canvas的Canvas-RenderCamera=Main Camera;

（4）早期可正常运行时相关测试数据

CanvasWebViewPrefab——InitialResolution=1;

canvas——CanvasScaler的Mode=ScaleWithScreenSize(3840*2160)；

canvas的Canvas-RenderMode=ScreenSpace-Camera;

canvas的Canvas-RenderCamera=ScreenSpace-Camera;

（5）猜测问题原因

WebView缩放问题，导致页面虽加载，功能正常，但因为缩放适应出现错误，导致最终看不到加载页面的情况；

（6）资源地址

3D WebView for Android (Web Browser) | GUI 工具 | Unity Asset Store；

三、插件使用

Embedded Browser 加载页面的使用（2021/08/30）

1、插件

Embedded Browser 插件（文件夹名ZFBrowserUnity）

Unity编辑器内运行、PC端打包运行都支持。

2、使用

将插件文件里的Browser(GUI)预制体拖到目标UI上；

加载脚本：根据需求自己写加载页面的脚本，并绑定到Browser(GUI)预制体上：

如下图中：LoadWebPage脚本

使用到加载Api：gameObject.GetComponent<Browser>().LoadURL(url, true);

EG:
string testURL = "https://www.baidu.com";
gameObject.GetComponent<Browser>().LoadURL(testURL, true);

3、详细参考插件demo

个人学习笔记，不足之处欢迎指点，诚心学习！

注：查找资料时，看到一篇插件整理挺详细的文章，贴下地址，联系侵删：

【Unity 实用工具】✨| Unity 十款浏览器相关插件整理（web view / browser）-腾讯云开发者社区-腾讯云

青岚岁叶

关注

3
点赞
踩
35

收藏

觉得还不错? 一键收藏
23
评论
Unity插件——WebView内嵌网页/浏览器插件

一、相关插件：1、Embedded Browser 插件（文件夹名ZFBrowserUnity）2、UniWebView插件3、UnityAndroidWebviewToTexture插件4、3D WebView for Android插件二、遇到的问题：3D WebView显示问题项目中使用3D WebView存在的问题三、插件使用Embedded Browser 加载页面的使用
复制链接

扫一扫

专栏目录