Skip to content

Latest commit

 

History

History
233 lines (175 loc) · 12.8 KB

File metadata and controls

233 lines (175 loc) · 12.8 KB

TLabWebView

Android で使用可能なブラウザコンポーネント (WebView / GeckoView) を uGUI (Texture2D) として利用するためのプラグイン.3Dウェブブラウザ (3D WebView) の実装が可能になります.

  • キーボード入力
  • タッチ操作
  • ファイルダウンロード (blob, data urlを含む)
  • リサイズ
  • Javascriptの実行
  • 複数インスタンスの同時実行をサポート
  • 複数のブラウザエンジンをサポート
    • WebView: 安定していて,javascriptインターフェースが充実
    • GeckoView: WebViewと比べて,拡張性が高い(ポップアップ等)
  • 複数のレンダリング方法をサポート
    • HardwareBudder: Androidの低レイヤー機能を使用した実装.パフォーマンス⭕️
    • ByteBuffer: C#側でbyte配列として結果を取得するためフレームへのアクセスが容易.安定性⭕️.デフォルトではこのオプションが使用されています.
    • Surface: Androidの Surface クラスに直接レンダリングを行う.CompositionLayersなどを活用する際に利用することを想定

ドキュメントはこちら
スニペットはこちら
Javaプラグインのソースコードはこちら

"Buy Me A Coffee"

対応しているUnityのバージョン

  • Unity 2021
  • Unity 2022
  • Unity 6000 (WebViewのみテスト済みです.GeckoViewはまだテストしていません.)

対応するグラフィックスAPI

  • OpenGLES
  • Vulkan

スクリーンショット

Android13, Adreno 619で実行した画面

VR サンプル

動作環境

OS Android 10 ~ 14
GPU Qualcomm Adreno 505, 619
Unity 2021.3

スタートガイド

依存するライブラリ

インストール

こちらをご覧ください

Submodule

以下のコマンドでリポジトリをクローンしてください

git clone https://github.com/TLabAltoh/TLabWebView.git

or

git submodule add https://github.com/TLabAltoh/TLabWebView.git

UPM

Unity Package Managerでadd package from git ...から以下のurlでパッケージをダウンロードしてください

https://github.com/TLabAltoh/TLabWebView.git#upm

アプリストア互換性

このプラグインを使用したアプリをアプリストアに出した場合,以下のような警告を受ける場合があります.

Unsafe SSL override in WebViews

Your application may contain an unsafe implementation of the WebView's onReceivedSslError() method with a call to `handler.proceed() with insufficient validations. This may cause the WebView to ignore SSL certificate validation errors, making the application vulnerable to man-in-the-middle attacks.

https://www.meta.com/experiences/

Security and trust

onReceivedSslError

your app is using an unsafe implementation of WebviewClient.onReceivedSslError handler

https://developer.android.com/distribute/console

その場合は,アプリストアに対応したバージョンのパッケージに切り替えてください.

add package from git URL ...

https://github.com/TLabAltoh/TLabWebView.git#appstore-compatible-upm

アプリストア対応バージョンはセキュアではないウェブサイトを読み込むことができない点をあらかじめご了承ください.

セットアップ

こちらをご覧ください
  • Build Settings
Property Value
Platform Android
  • Project Settings
Property Value
Color Space Linear
Minimum API Level 26
Target API Level 30 (Unity 2021), 31 ~ 32 (Unity 2022)
  • Project Settings --> Player --> Other Settings に以下のシンボルを追加(ビルド時に使用)
UNITYWEBVIEW_ANDROID_USES_CLEARTEXT_TRAFFIC
UNITYWEBVIEW_ANDROID_ENABLE_CAMERA
UNITYWEBVIEW_ANDROID_ENABLE_MICROPHONE
  • Scene

BrowserManagerをシーン内のいずれかのGameObjectにアタッチしてください.(EventSystemにアタッチするのが一番望ましいかも ...).

GeckoView をブラウザエンジンとして使用したい場合

PluginsフォルダーをAssets以下に作成し,以下のファイルを置いてください.また,BrowserContainer.browserWebViewの代わりにGeckoViewをアタッチしてください.また,GeckoViewの使用には API level 33 ~ が求められます.Project SettingsからターゲットAPIレベルを33以上に設定してください.

  1. gradleTemplate.properties
org.gradle.jvmargs=-Xmx**JVM_HEAP_SIZE**M
org.gradle.parallel=true
# android.enableR8=**MINIFY_WITH_R_EIGHT**
unityStreamingAssets=**STREAMING_ASSETS**
**ADDITIONAL_PROPERTIES**
android.useAndroidX=true
# android.enableJetifier=true
  1. mainTemplate.gradle
    ...

    dependencies {
        implementation "androidx.annotation:annotation-jvm:1.9.1"

        def collection_version = "1.4.3"
        implementation "androidx.collection:collection:$collection_version"

        def lifecycle_version = "2.6.1"
        implementation "androidx.lifecycle:lifecycle-viewmodel-ktx:$lifecycle_version"
        implementation "androidx.lifecycle:lifecycle-viewmodel-compose:$lifecycle_version"
        implementation "androidx.lifecycle:lifecycle-livedata-ktx:$lifecycle_version"
        implementation "androidx.lifecycle:lifecycle-runtime-ktx:$lifecycle_version"
        implementation "androidx.lifecycle:lifecycle-runtime-compose:$lifecycle_version"
        implementation "androidx.lifecycle:lifecycle-viewmodel-savedstate:$lifecycle_version"
        implementation "androidx.lifecycle:lifecycle-common-java8:$lifecycle_version"
        implementation "androidx.lifecycle:lifecycle-service:$lifecycle_version"
        implementation "androidx.lifecycle:lifecycle-process:$lifecycle_version"
        implementation "androidx.lifecycle:lifecycle-reactivestreams-ktx:$lifecycle_version"
    }

    ...
  1. GeckoView plugin (.aar) (現在 125.0.20240425211020 version のみで開発・テストを行っているので,同じバージョンのものをダウンロードしてください.)

Prefab

以下に置いてあるプレハブをCanvasに追加することでWebViewを実装できます

/Resources/TLab/WebView/Browser.prefab

Keyborad

このパッケージでは,デフォルトでuGUIをベースに実装されたバーチャルキーボードが利用できます.しかし,uGUIをベースにしたバーチャルキーボードはデザインなどの拡張性の点で利点がありますが,場合によってはOS標準のシステムキーボードを利用したい場面もあるかもしれません.その場合は,各プラットフォームの設定に従って,アプリ側でパーミッション等を使用してシステムキーボードを有効にしてください (例: Meta Quest での設定はこちら).アプリ側での設定が完了すると,WebViewでのシステムキーボードの利用が可能になります.

Note

外部ストレージ(/Download/Pictureなど)にファイルをダウンロードしたい場合,以下のパーミッションをAndroidManifest.xmlに追加してください.これは,Android 11以降のデバイスで必要になります (詳細はこちら).

<uses-permission android:name="android.permission.MANAGE_EXTERNAL_STORAGE" />

Note

WebViewで実装されているjavascriptインターフェースwindow.tlabは現在GeckoViewではサポートされていません.これはGeckoViewとjavaネイティブプラグイン(.aar)間の通信処理の実装の複雑さに起因します.現状はwindow.tlab.unitySendMessageの代替としてwindow.postMessageの呼び出しでC#コンポーネントにメッセージを送信する機能のみ実装されていますが,将来的にはwindow.tlabの機能をGeckoViewでも完全にサポートする計画です. GeckoViewのページスクリプトからC#コンポーネントにメッセージを送信する際は,以下のようにjavascriptを記述してください.

let payload = { go: "Test", method: "OnMessage", message: "this is test message." };
window.postMessage({ type: "TLABWEBVIWE_GECKO_NATIVE_MESSAGE", payload: { method: "unitySendMessage", payload: payload } }, "*");

Warning

このプラグインはAndroidデバイス上でのみ動作します.Unity Editor上で実行してもWebページは表示されないことに注意してください.

Warning

HardwareBuffer モードは,プラグインを実行するデバイスによっては正常に動作しない場合があるかもしれません. その場合は,プロジェクトのGraphics APIVulkanからOpenGLESに変更する (HardwareBufferモードにおける問題は,ほとんどが,プロジェクトでVulkan APIを使用している場合に報告されています).もしくは,HardwareBuffer から ByteBufferCaptureMode を切り替えてください (安定したレンダリングオプションです).

Warning

Android WebViewは WebXR API をサポートしません.

Warning

OculusQuestはいくつかのHTML5 input タグをサポートしていません(下記参照).それらを使用したい場合,GeckoViewWebViewの代わりにBrowserとして使用してください.uGUIで実装したウィジェットを表示します.以下は,このプラグインによる,HTML5 inpu タグの対応状況です.

Warning

このプラグインは,OpenGLESVulkanの両方をサポートしていますが,Vulkan API を使用する場合は,デバイスがOpenGLES 3.1以上をサポートしている必要があることに留意してください.