Unity实现安卓App预览图片、Pdf文件和视频的一种解决方案

一、问题背景

最近在开发app项目，其中有个需求就是需要在app软件内显示图片、pdf和视频，一开始想的解决方案是分开实现，也就是用Image组件显示图片，找一个加载pdf的插件和播放视频的插件，转念一想觉得太麻烦了，于是就想着看能不能想电脑浏览器打开图片、pdf和视频一样直接加载显示就可以了。于是就找了Unity安卓端可以渲染网页的插件，看到网上都比较推荐使用UniWebView，我也试了，有两个原因使我放弃了它，1、加载网页的流程有点繁琐，具体使用就知道了；2、安卓渲染pdf文件软件直接闪退了（致命原因）。后来经过一番测试，最终决定使用3D WebView for Android这款插件，它可以满足同一UI组件渲染图片、pdf和视频这一需求。

二、插件介绍

3DWeView for Android (适用于Android的3D WebView)，很强大，可以渲染3D和2D网页，还可以交互。官网地址：vuplex官网。

主要功能：

从指定URL或Html字符串加载网页
使用HTML创建UI
快速开始使用 3D WebViewPrefab 或 2D CanvasWebViewPrefab，它们渲染为 Texture2D 并处理用户交互（单击、滚动、悬停、拖动）
包括针对移动设备优化的原生 2D 模式
使用随附的屏幕键盘或本机键盘键入
查看和创建 PDF
可以实现 C# 和JavaScript的双向通信。
反正就是挺强大的一款渲染网页的插件，具体可以到官网了解，也有非常详细的开发文档可以参考。所以用来满足我们今天的需求简直就是小菜一碟。

二、解决方案

本博客通过搭建Demo演示场景，实现App内通过3DWeView for Android打开本地地址渲染本地图片、pdf文件和视频的一种解决方案，仅供参考。

1、准备工作

3D WebView for Android SDK需要开发者准备完整的Unity开发环境与Android Build Support环境
Unity 2018.3或更高版本
Android Platform 5+

2、搭建测试场景

1、新建项目和场景，将sdk导入都项目工程中，创建Canvas，从Vuplex--WebView--Core--Prefabs--Resources文件夹下将
CanvasWebViewPrefab 预制体拖入到Canvas下，再新建三个按钮，分别用来测试点击打开图片、pdf和视频的。

2、因为这里使用的是2D界面来显示网页，所有主要勾选CanvasWebViewPrefab下的Native 2D Mode （它将允许你操作网页试图，如双指缩放等...）

3、编写测试代码

测试demo主要测试加载本地图片、pdf和视频渲染在网页上，主要测试代码如下：

csharp 复制代码

using UnityEngine;
using UnityEngine.UI;
using Vuplex.WebView;

public class TestWeb : MonoBehaviour
{
    //获取到CanvasWebViewPrefab 的引用，主要用于渲染网页
    public CanvasWebViewPrefab webPrefab;
    public Button openPicture;
    public Button openPdf;
    public Button openVideo;

    void Start()
    {
        openPicture.onClick.AddListener(() =>
        {
            string url = "streaming-assets://File/画板.png";
            webPrefab.WebView.LoadUrl(url);
        });

        openPdf.onClick.AddListener(() =>
        {
            string url = "streaming-assets://File/数据结构与算法.pdf";
            webPrefab.WebView.LoadUrl(url);
        });

        openVideo.onClick.AddListener(() =>
        {
            string url = "streaming-assets://File/M09-1317.mp4";
            webPrefab.WebView.LoadUrl(url);
        });
    }
}

将脚本挂载到任意场景中游戏对象上，将相关对象引用分别赋值，由于这是Android，所有编辑器运行看不到效果，需要发布成apk文件。

4、发布apk测试

1、渲染图片成功

2、渲染pdf成功

3、渲染视频成功

三、总结

1、3D WebView是一款十分强大的网页渲染插件，用于加载文件显示简直就是大材小用，可以多去官网学习学习其他用法。3DWebView for Android官方开发文档

2、它还可以加载其他文件夹下的文件，也可以打开网上的在线资源