How to serialize multiple video Clip references?

🌵 Needle Engine
1

Hi! my idea is to have an array of videos so that i can switch the source of the VideoPlayer component. However, inspecting the source code, the function videoPlayer.setVideo() expects a MediaStream. The component itself uses URL to reference the clip on inspector, but if i do:

@serializable(URL)
    aVideo?: string | MediaStream | null = null;

on my component, it just shows as a string property on inspector.

So my question is, what is the correct procedure to reference correctly each clip? And then, on runtime, how do I convert the result URL to a media stream i suppose.

Thank you very much in advance :smiley:

2

Hi whtw4thewin! To handle multiple video clip references with the VideoPlayer component, you’ll need to serialize an array of URLs and convert them to MediaStream on runtime.

Here’s a step-by-step pseudo code outline:

  1. Define your array of video URLs in your component.
  2. When switching videos, convert the URL to a MediaStream. You can use dependent APIs such as the fetch API to obtain video data.
  3. Set the converted MediaStream to the VideoPlayer using videoPlayer.setVideo().

Here’s how the code might look:

import { VideoPlayer } from "@needle-tools/engine";

class VideoSwitcher extends Behaviour {
    @serializable(URL)
    videoUrls: string[] = ["url1.mp4", "url2.mp4", "url3.mp4"]; // Example URLs

    private videoPlayer?: VideoPlayer;

    start() {
        this.videoPlayer = this.getComponent(VideoPlayer);
        if (this.videoPlayer) {
            this.loadVideo(0); // Load the first video by default
        }
    }

    async loadVideo(index: number) {
        if (!this.videoPlayer || index < 0 || index >= this.videoUrls.length) return;

        const url = this.videoUrls[index];
        const mediaStream = await this.urlToMediaStream(url); // Convert URL to MediaStream
        this.videoPlayer.setVideo(mediaStream); // Set to VideoPlayer
    }

    async urlToMediaStream(url: string): Promise<MediaStream> {
        const response = await fetch(url);
        const blob = await response.blob();
        const stream = URL.createObjectURL(blob); // Convert blob to Blob URL
        const mediaStream = new MediaStream(); // Create a new MediaStream
        // You may need additional steps to add Video or Audio tracks
        return mediaStream;
    }

    nextVideo() {
        const currentIndex = this.videoUrls.indexOf(this.videoPlayer?.currentVideo);
        const nextIndex = (currentIndex + 1) % this.videoUrls.length;
        this.loadVideo(nextIndex);
    }
}

Key Points:

  • You will store the video URLs in an array and reference the current video through the VideoPlayer.
  • Use the fetch API to convert video URL to MediaStream, and then set it to the VideoPlayer.

Make sure to handle errors and ensure that your URLs are valid. You should be comfortable with handling asynchronous operations like fetching data from URLs.

For further details on the VideoPlayer operations, you can refer to the API documentation .

Let me know if you need any more assistance!

1 replies left - Get a PRO license for more AI replies.
thread_WtmDMeO0a3qZHNcPl2hMyYos
Reply to this message to continue the conversation

3

Hi,

The VideoPlayer has a url setter/getter property or a setClipURL method as well that you can use.

To serialize VideoClips in Unity just define your string as a VideoClip and the component compiler will figure it out.

// In global scope
declare type VideoClip = string;

// In your component:
export class YourComponent extends Behaviour {
  @serializable(URL)
  videos: VideoClip[];
}

(alternatively you can always force specific types with the //@type UnityEngine.VideoClip[] syntax, see Automatic Component Generation | Needle Engine Documentation)

Bonus info: Needle Engine can also playback video streams: x.com

1 Like
4

This topic was automatically closed 13 days after the last reply. New replies are no longer allowed.