MRが楽しい

MRやVRについて学習したことを書き残す

MRTKv2.xとQuestDisplayAccessDemoを使ってQuest3でQRコードのURLを開く

本日はMetaQuest3の技術調査枠です。
MRTKv2.xとQuestDisplayAccessDemoを使ってQuest3でQRコードのURLを開く手順を記事にします。

前回記事

以下の前回記事の続きです。
bluebirdofoz.hatenablog.com

QRコードのURLを読み取る

QuestDisplayAccessDemoで読み取られたQRコード情報は indicator prefab のIndicatorコンポーネントに引き渡されます。

そのままでは受け取ったQRコード情報を参照できないため、以下の通りIndicatorコンポーネントを修正しました。
・Indicator.cs

using TMPro;
using UnityEngine;

namespace Anaglyph.DisplayCapture.Barcodes
{
	public class Indicator : MonoBehaviour
	{
		[SerializeField] private LineRenderer lineRenderer;
		public LineRenderer LineRenderer => lineRenderer;

		[SerializeField] private TMP_Text textMesh;
		public TMP_Text TextMesh => textMesh;

		private Vector3[] offsetPositions = new Vector3[4];
		
		// ---------- QRコードの情報を保持する変数を追加 ここから ----------
		public BarcodeTracker.Result QrResult => qrResult;
		private BarcodeTracker.Result qrResult;
		// ---------- QRコードの情報を保持する変数を追加 ここまで ----------

		public void Set(BarcodeTracker.Result result)
		{
			Set(result.text, result.corners);
			
			// ---------- QRコードの情報を保持する変数を追加 ここから ----------
			qrResult = result;
			// ---------- QRコードの情報を保持する変数を追加 ここまで ----------
		}

		public void Set(string text, Vector3[] corners)
		{
			Vector3 topCenter = (corners[0] + corners[1]) / 2f;
			transform.position = topCenter;

			Vector3 up = (corners[0] - corners[3]).normalized;
			Vector3 right = (corners[2] - corners[3]).normalized;
			Vector3 normal = -Vector3.Cross(up, right).normalized;

			Vector3 center = (corners[0] + corners[1] + corners[2] + corners[3]) / 4f;

			for (int i = 0; i < 4; i++)
			{
				Vector3 dir = (corners[i] - center).normalized;
				offsetPositions[i] = corners[i] + (dir * lineRenderer.startWidth);
			}

			transform.rotation = Quaternion.LookRotation(normal, up);

			lineRenderer.SetPositions(offsetPositions);
			textMesh.text = text;
		}
	}
}

次にQRコードのURLを開くボタンをプレハブ内に配置します。
今回はMRTKのPressableButtonHoloLens2プレハブを利用しました。

最後にボタンにURLを設定する以下のスクリプトを作成しました。
QRコードのテキスト情報はBarcodeTracker.Resultクラスのtextプロパティから取得できます。
・QRButtonSetter.cs

using Anaglyph.DisplayCapture.Barcodes;
using Microsoft.MixedReality.Toolkit.UI;
using UnityEngine;

[RequireComponent(typeof(Indicator))]
public class QRButtonSetter : MonoBehaviour
{
    [SerializeField]
    private Interactable qrButton;
    
    private Indicator qrIndicator;
    
    void Start()
    {
        // プレハブ作成時にボタンイベントを設定
        qrIndicator = GetComponent<Indicator>();
        qrButton.OnClick.AddListener(TapEvent);
    }
    
    private void OnDestroy()
    {
        // プレハブ破棄時にボタンイベントを解除
        qrButton.OnClick.RemoveListener(TapEvent);
    }
    
    private void TapEvent()
    {
        if (qrIndicator == null) return;
        
        // QRコード情報を取得してテキストを取得
        BarcodeTracker.Result qrResult = qrIndicator.QrResult;
        string qrText = qrResult.text;
        
        // テキストがURLの場合はOpenURL関数を使ってブラウザを開く
        if (qrText.StartsWith("http://") || qrText.StartsWith("https://"))
        {
            Application.OpenURL(qrText);
        }
        else
        {
            Debug.Log(qrText);
        }
    }
}

作成したスクリプトをプレハブに設定して修正は完了です。

ビルドと動作確認

これで設定は完了です。
以下の記事を参考にプロジェクトのビルドとQuest3へのデプロイを実行してください。
bluebirdofoz.hatenablog.com

MetaQuest3でデプロイしたアプリを起動します。
シーン内のトグルボタンをタップしてQRコードを確認すると、QRコードの上にボタンオブジェクトが表示されます。

ボタンをタップするとブラウザで開き、QRコードのURL先が表示されます。