WebGLでのビデオ再生をJavaScriptに委譲できるようにする

.gitignore

@@ -74,4 +74,4 @@ crashlytics-build.properties
 # npm
 WebScripts~/dist*
 WebScripts~/node_modules*
-Samples~/MVS/WebGLScripts~/node_modules*
+Samples~/*/WebGLScripts~/node_modules*

README.md

@@ -9,8 +9,8 @@
    yarn dev
    ```
 
-- Import the sample MVS from Package Manager.
-- Enter the following command in the `MVS/WebScripts` directory.
+- Import the sample MVS or MVS2 from Package Manager.
+- Enter the following command in the `WebScripts~` directory under the imported directory.
 
    ```bash
    yarn
@@ -23,3 +23,23 @@
 - Add all scenes in MVS to `Scenes In Build`.
 - Play
    - See [README](https://github.com/extreal-dev/Extreal.Dev/blob/main/WebGLBuild/README.md) to run WebGL application in local environment.
+
+## Test cases for manual testing
+
+### MVS (main feature of this library)
+
+Listed above the scene played.
+
+### MVS2 (video feature)
+
+- Title screen
+  - Ability to specify url (used when set url to VideoPlayer)
+  - Ability to go to video screen (initialize, set url, prepare)
+- Video screen
+  - Display the length of the video (video preparation is completed, get video length)
+  - Ability to play video (play)
+  - Ability to pause video (pause)
+  - Ability to stop video (stop)
+  - Ability to adjust volume (set volume)
+  - Error notification if specified url is invalid (error is received)
+  - Ability to return title screen (dispose VideoPlayer)

Runtime/Extreal.Integration.Web.Common.asmdef

@@ -1,7 +1,13 @@
 {
     "name": "Extreal.Integration.Web.Common",
     "rootNamespace": "Extreal.Integration.Web.Common",
-    "references": [],
+    "references": [
+        "Extreal.Framework.Analyzer",
+        "Extreal.Core.Logging",
+        "Extreal.Core.Common",
+        "UniTask",
+        "UniRx"
+    ],
     "includePlatforms": [],
     "excludePlatforms": [],
     "allowUnsafeCode": false,

Runtime/Plugins/helper.jslib

@@ -1,9 +1,9 @@
 const plugin = {};
 
-const helperNames = ["lengthBytesUTF8", "stringToUTF8", "UTF8ToString", "Module"];
+const helperNames = ["lengthBytesUTF8", "stringToUTF8", "UTF8ToString", "Module", "GL"];
 const helper = "{" + helperNames.map(func => `${func}:${func}`).join(",") + "}";
 plugin["Nop"] = function () {};
-plugin["Nop__postset"] = `_Nop = __getNop(${helper})`;
+plugin["Nop__postset"] = `_Nop = __getNop(${helper}, () => GLctx)`;
 
 const methods = ["CallAction", "CallFunction", "AddCallback"];
 for (let i = 0; i < methods.length; i++) {

Runtime/Video/EVideoPlayer.cs

@@ -0,0 +1,130 @@
+using UnityEngine;
+using UnityEngine.Video;
+using System;
+using Extreal.Core.Logging;
+using UniRx;
+using System.Diagnostics.CodeAnalysis;
+
+namespace Extreal.Integration.Web.Common.Video
+{
+    /// <summary>
+    /// Class that handles VideoPlayer depending on the platform.
+    /// </summary>
+    public class EVideoPlayer : MonoBehaviour
+    {
+        [Header("Use on platforms other than WebGL")]
+        [SerializeField] private VideoPlayer videoPlayer;
+
+        [Header("Use only on WebGL platform")]
+        [SerializeField] private RenderTexture targetRenderTexture;
+
+        /// <summary>
+        /// Invokes immediately after the preparation is completed.
+        /// </summary>
+        public IObservable<Unit> OnPrepareCompleted => onPrepareCompleted.TakeUntilDestroy(this);
+        [SuppressMessage("Usage", "CC0033")]
+        private readonly Subject<Unit> onPrepareCompleted = new Subject<Unit>();
+
+        /// <summary>
+        /// <para>Invokes immediately after an error has occurred.</para>
+        /// Arg: Error message
+        /// </summary>
+        public IObservable<string> OnErrorReceived => onErrorReceived.TakeUntilDestroy(this);
+        [SuppressMessage("Usage", "CC0033")]
+        private readonly Subject<string> onErrorReceived = new Subject<string>();
+
+        /// <summary>
+        /// Video length.
+        /// </summary>
+        public double Length
+            => eVideoPlayer.Length;
+
+        private string url;
+        private IVideoPlayer eVideoPlayer;
+
+        private static readonly ELogger Logger = LoggingManager.GetLogger(nameof(EVideoPlayer));
+
+        /// <summary>
+        /// Initializes the VideoPlayer.
+        /// </summary>
+        public void Initialize()
+        {
+            onErrorReceived.AddTo(this);
+            onPrepareCompleted.AddTo(this);
+
+            eVideoPlayer
+#if UNITY_WEBGL && !UNITY_EDITOR
+                = new WebGLVideoPlayer(targetRenderTexture)
+#else
+                = new NativeVideoPlayer(videoPlayer)
+#endif
+                .AddTo(this);
+
+            eVideoPlayer.OnPrepareCompleted
+                .Subscribe(onPrepareCompleted.OnNext)
+                .AddTo(this);
+
+            eVideoPlayer.OnErrorReceived
+                .Subscribe(onErrorReceived.OnNext)
+                .AddTo(this);
+        }
+
+        /// <summary>
+        /// Sets the video url.
+        /// </summary>
+        /// <param name="url">Video url.</param>
+        public void SetUrl(string url)
+        {
+            this.url = url;
+            eVideoPlayer.SetUrl(this.url);
+        }
+
+        /// <summary>
+        /// Sets the playback position.
+        /// </summary>
+        /// <param name="time">Playback position.</param>
+        public void SetTime(double time)
+            => eVideoPlayer.SetTime(time);
+
+        /// <summary>
+        /// Prepares the VideoPlayer.
+        /// </summary>
+        public void Prepare()
+        {
+            if (Logger.IsDebug())
+            {
+                Logger.LogDebug("Prepare: " + url);
+            }
+            eVideoPlayer.Prepare();
+        }
+
+        /// <summary>
+        /// Plays the video.
+        /// </summary>
+        public void Play()
+            => eVideoPlayer.Play();
+
+        /// <summary>
+        /// Pauses the video.
+        /// </summary>
+        public void Pause()
+            => eVideoPlayer.Pause();
+
+        /// <summary>
+        /// Stops the video.
+        /// </summary>
+        public void Stop()
+            => eVideoPlayer.Stop();
+
+        /// <summary>
+        /// Sets the audio volume.
+        /// </summary>
+        /// <param name="volume">Audio volume (0.0 - 1.0).</param>
+        /// <param name="trackIndex">Track index.</param>
+        public void SetAudioVolume(float volume, ushort trackIndex = default)
+        {
+            var clampedVolume = Mathf.Clamp(volume, 0f, 1f);
+            eVideoPlayer.SetAudioVolume(trackIndex, clampedVolume);
+        }
+    }
+}

Runtime/Video/IVideoPlayer.cs

@@ -0,0 +1,19 @@
+using System;
+using UniRx;
+
+namespace Extreal.Integration.Web.Common.Video
+{
+    public interface IVideoPlayer : IDisposable
+    {
+        IObservable<Unit> OnPrepareCompleted { get; }
+        IObservable<string> OnErrorReceived { get; }
+        double Length { get; }
+        void SetUrl(string url);
+        void SetTime(double time);
+        void Prepare();
+        void Play();
+        void Pause();
+        void Stop();
+        void SetAudioVolume(ushort trackIndex, float volume);
+    }
+}

Runtime/Video/NativeVideoPlayer.cs

@@ -0,0 +1,76 @@
+using System;
+using System.Diagnostics.CodeAnalysis;
+using Extreal.Core.Common.System;
+using UniRx;
+using UnityEngine.Video;
+
+namespace Extreal.Integration.Web.Common.Video
+{
+    public class NativeVideoPlayer : DisposableBase, IVideoPlayer
+    {
+
+        public IObservable<Unit> OnPrepareCompleted => onPrepareCompleted;
+        [SuppressMessage("Usage", "CC0033")]
+        private readonly Subject<Unit> onPrepareCompleted;
+        private void PrepareCompletedEventHandler(VideoPlayer videoPlayer)
+            => onPrepareCompleted.OnNext(Unit.Default);
+
+        public IObservable<string> OnErrorReceived => onErrorReceived;
+        [SuppressMessage("Usage", "CC0033")]
+        private readonly Subject<string> onErrorReceived;
+        private void ErrorReceivedEventHandler(VideoPlayer source, string message)
+            => onErrorReceived.OnNext(message);
+
+        public double Length
+            => videoPlayer.length;
+
+        private readonly VideoPlayer videoPlayer;
+        private string url;
+
+        private readonly CompositeDisposable disposables = new CompositeDisposable();
+
+        public NativeVideoPlayer(VideoPlayer videoPlayer)
+        {
+            this.videoPlayer = videoPlayer;
+            onPrepareCompleted = new Subject<Unit>().AddTo(disposables);
+            onErrorReceived = new Subject<string>().AddTo(disposables);
+            this.videoPlayer.prepareCompleted += PrepareCompletedEventHandler;
+            this.videoPlayer.errorReceived += ErrorReceivedEventHandler;
+        }
+
+        protected override void ReleaseManagedResources()
+        {
+            videoPlayer.prepareCompleted -= PrepareCompletedEventHandler;
+            videoPlayer.errorReceived -= ErrorReceivedEventHandler;
+            if (videoPlayer.renderMode == VideoRenderMode.RenderTexture)
+            {
+                videoPlayer.targetTexture.Release();
+            }
+            disposables.Dispose();
+        }
+
+        public void SetUrl(string url)
+            => this.url = url;
+
+        public void SetTime(double time)
+            => videoPlayer.time = time;
+
+        public void Prepare()
+        {
+            videoPlayer.url = url;
+            videoPlayer.Prepare();
+        }
+
+        public void Play()
+            => videoPlayer.Play();
+
+        public void Pause()
+            => videoPlayer.Pause();
+
+        public void Stop()
+            => videoPlayer.Stop();
+
+        public void SetAudioVolume(ushort trackIndex, float volume)
+            => videoPlayer.SetDirectAudioVolume(trackIndex, volume);
+    }
+}