unity ZFBrowser内嵌网页 使用集合

一 插件介绍

1.1 简介

Embedded Browser是Zen Fulcrum LLC团队开发的针对Unity的网页渲染的插件，可以在Unity的UGUI上渲染一个网页，并且可以与它进行交互。 构建速度很快，响应灵敏。如下图

1.2功能

（1）可以将网页渲染到UI上

（2）支持CSS、HTML和JavaScript

（3）可以用来Unity和JavaScript的通信

（4）可以控制网页的前进、退后、重新加载、控制缩放大小等

（5）支持Video、支持SVG

（6）自定义鼠标样式

（7）可以编辑和删除Cookit

（8）支持VR，比如HTC VIVE

1.3支持的平台

（1）Windows 32位操作系统

（2）Windows 64位操作系统

（3）OS X 64位操作系统

（4）Linux 64位操作系统

1.4、不支持的平台

（1）Android 安卓系统，包括Oculus Quest VR一体机

（2）iOS 苹果系统

（3）UWP，包括 HoloLens

二 如何内嵌网页

2.1打开场景后，

在Hierarchy视图，选择加号，UI→RawImage，然后设置铺满屏幕：

2.2添加上Browser.cs、Pointe UIGUI.cs、Cursor Renderer OS.cs组件：

2.2.1控制网页浏览的组件：

属性说明

Url 要访问的链接。

Width/Height 网页的宽高，这个设置基本不顶用，是根据RawImage的大小渲染的。

Generate Mipmap 产生贴图

Base Color 基本颜色

Zoom 缩放比例

Allow Contetnt Menu On 允许内容菜单打开

New Window Action 新建窗口动作

2.2.2控制网页渲染的组件：

属性说明

Drag Movement Threshold 拖动移动阈值

View Camera 观看摄像机

Enable Mouse Input 控制鼠标输入

Enable Touch Input控制触摸输入

Enable FPS Input 控制FPS输入

Enable VR Input 控制VR输入

Max Distance 最大距离

Enable Input 控制输入

Automatic Resize 自动调整大小

2.2.3控制鼠标样式改变的组件：

Cursor Normally Visible 鼠标光标是否可见

2.3 点击运行就可以看到效果了

三 如何与前端交互

3.1 U3D调用前端

3.1.1 u3d写法

 htmlPanel.RegisterFunction("U3DToMainView", U3DToMainView);//主视角

 private void U3DToMainView(JSONNode args)

    {

       ///调用后相关的逻辑处理

    }

3.1.2 前端写法

window.['u3dFunctionName']

3.2 前端调用U3D

3.2.1 u3d写法

  htmlPanel.CallFunction("U3DRoam", false);

3.2.2 前端写法

  window['functionName']=function(){}

四 遇到的问题汇总

4.1  加载网页无法输入问题

4.1.1 新建一个Input Field

 

4.1.2  在加载的页面上（见2.1），添加Simple Controller组件，并挂载4.1.1创建的Input Field

 

4.2   加载网页提示"您的连接不是私密连接" -https

4.2.1 "您的连接不是私密连接"

  利用该插件访问具有独立证书的https://**网址时，会出"ERR_CERT_AUTHORITY_INVALID"错误，具体如下图所示：

 

   这个问题的产生具体可以去查一下HTTP和HTTPS协议的发展和区别，简单来讲就是客户端请求后，服务器会返回一个数字证书，这里会有两种情况：如果数字证书是网络上受信任的证书颁发机构（CA）颁发的证书，即大家伙都知道，那么就可以直接正常访问；如果数字证书是服务端自己制作的，对于客户端来讲该证书的制作来源不可知，此时就需要我们客户端自己验证通过，才能继续访问。

解决方式也是直接在插件的脚本中，找到commandLineSwitches变量，加入"--ignore-certificate-errors"字段即可随时信任私有证书.

 

4.3   加载网页视频不出来问题

4.3.1 原理

ZFBrowser嵌入的低版本的Chromium内核，原生不支持H.264和MP3，需要添加支持，目前没有什么很好的解决方式。

4.3.2 如何处理

测试下来，目前有ws跟flv格式的视频，是能正常在网页上播放并且嵌入到u3d里面不影响播放的

4.3.2.1 ws  方式

海康最新2.0播放插件播放视频，ws流，可正常播放

4.3.2.2 flv  方式

特定的flv格式可以正常播放，如

http://218.108.98.98:10701/rtp/34020000001320000001_34020000001310000001.live.flv

这里给出一个在线的播放器测试地址，Pro | Jessibuca

这个在线播放器能播 ，那就能在内嵌的网页里播放

4.3.3 更换插件

目前测试3D View 可以正常播放视频，但这个插件也有很多其他问题，比如页面无法透明化，据说最新版已经更新优化了这个问题，还有待研究。

4.4 浏览器可以加载，但是插件加载不了

会报错如下

4.4.1原理

前端页面用了语法 ?.  Optional Chaining Operator，这个语法最少chorme 80才支持，而我们插件的内核是74的，所以无法兼容也就是无法加载

4.4.2 解决方式1

 

前端直接修改代码，把所有?.的地方修改为if去判断

4.4.3 解决方式2

修改项目的webpack或者vite的babel配置，配置可选链操作符兼容

关键词，可参考vuecli中配置可选链操作符兼容 - 爱码网

五  后记

以上就是关于unity内嵌浏览器插件ZFBrowser 的使用及相关问题总结，后期持续补充