ViroVideo for ViroReact only plays audio but never video

[johnlai2004]

Environment

Please provide the following information about your environment:

1. Development OS: Mac, Windows, Linux

Windows 11

2. Device OS & Version: What Android OS version (7.0, 8.0, etc.) or iOS version (11.0, 11.2) is your device running on?
   Android LG Velvet using Android Version 13

3. Version: ViroReact version and React Native version
   My Package.json

{
  "name": "ViroStarterKit",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "lint": "eslint .",
    "start": "react-native start",
    "test": "jest"
  },
  "dependencies": {
    "@reactvision/react-viro": "^2.41.4",
    "react": "18.2.0",
    "react-native": "0.73.3"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@babel/preset-env": "^7.20.0",
    "@babel/runtime": "^7.20.0",
    "@react-native/babel-preset": "0.73.20",
    "@react-native/eslint-config": "0.73.2",
    "@react-native/metro-config": "0.73.4",
    "@react-native/typescript-config": "0.73.1",
    "@types/react": "^18.2.6",
    "@types/react-test-renderer": "^18.0.0",
    "babel-jest": "^29.6.3",
    "eslint": "^8.19.0",
    "jest": "^29.6.3",
    "prettier": "2.8.8",
    "react-test-renderer": "18.2.0",
    "typescript": "5.0.4"
  },
  "engines": {
    "node": ">=18"
  }

4. Device(s): What device(s) are you are seeing the issue on (i.e. iPhone X, Samsung Note 8, etc)
   Android LG Velvet using Android Version 13

Problem

I am new to using ViroReact: https://viro-community.readme.io/docs/overview

I want to make an AR app. But I don't know how to get the video of the <ViroVideo> element to display: https://viro-community.readme.io/docs/virovideo

The <ViroVideo> seems to only be able to play audio. Here's the code for my App.tsx:

import {
  ViroARScene,
  ViroARSceneNavigator,
  ViroTrackingReason,
  ViroTrackingStateConstants,
  ViroVideo,
  ViroARTrackingTargets,
  ViroARImageMarker
} from "@reactvision/react-viro";
import React, { useState } from "react";
import { StyleSheet } from "react-native";

ViroARTrackingTargets.createTargets({
  "birdImage": {
    source: require("./assets/mural/bird.jpg"),
    orientation: "Up",
    physicalWidth: 0.25 // in meters
  }
});

const HelloWorldSceneAR = () => {
  function onInitialized(state: any, reason: ViroTrackingReason) {
    console.log("onInitialized", state, reason);
    if (state === ViroTrackingStateConstants.TRACKING_NORMAL) {
    } else if (state === ViroTrackingStateConstants.TRACKING_UNAVAILABLE) {
      console.log("Not found");
    }
  }

  function onFound(item) {
    console.log("FOUND " + item);
  }

  return (
    <ViroARScene onTrackingUpdated={onInitialized}>
      <ViroARImageMarker
        target={"birdImage"}
        onAnchorFound={()=>onFound("BIRD")}
      >
        <ViroVideo
          source={require('./assets/mp4/movie-file.mp4')}
          loop={true}
          position={[1,2,-3]}
          scale={[0.2, 0.2, 0.2]}
         />
      </ViroARImageMarker>
    </ViroARScene>
  );
};

export default () => {
  return (
    <ViroARSceneNavigator
      autofocus={true}
      initialScene={{
        scene: HelloWorldSceneAR,
      }}
      style={styles.f1}
    />
  );
};

var styles = StyleSheet.create({
  f1: { flex: 1 },
  helloWorldTextStyle: {
    fontFamily: "Arial",
    fontSize: 30,
    color: "#ff0000",
    textAlignVertical: "center",
    textAlign: "center",
  },
});

When I run npm start, this app gets loaded onto my Android phone. THen when I point my phone's camera at ./assets/mural/bird.jpg, the my phone plays the AUDIO of the ./assets/mp4/movie-file.mp4. But no VISUAL is ever displayed. I tried random values for position= and scale= for the <ViroVideo> tag, but the result is always the same: only the audio is heard and no video is displayed.

How do I show a video with <ViroVideo>?