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

news2024/11/13 15:25:26

一、问题背景

最近在开发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和视频渲染在网页上，主要测试代码如下：

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);
        });
    }
}