How to attach an existing HTMLVideoElement to Player?

[vidjul]

Hey there, hope you're doing great.

I'm using https://docs.livekit.io/reference/components/react/. This library allows me to render a video by either:

1. Using VideoTrack that returns an html embed <video>
2. Using #attach method that returns an HTMLVideoElement.

I was wondering how I can use one of this with vidstack, as the source I have isn't a direct URI to a file.

I've tried to get the underlying HTMLVideoElement as explained in https://www.vidstack.io/docs/player/api/providers/video?styling=tailwind-css to manually update it, without success (the player wasn't rendering at all)

import { TrackReference, useTracks } from "@livekit/components-react";
import {
  isHTMLVideoElement,
  MediaCanLoadEvent,
  MediaPlayer,
  MediaProvider,
} from "@vidstack/react";

import { Track } from "livekit-client";

const attachTrackOnLoad = (track: TrackReference) => {
  return (nativeEvent: MediaCanLoadEvent) => {
    const target = nativeEvent.trigger?.target;
    if (isHTMLVideoElement(target)) {
      track.publication.track?.attach(target);
    }
  };
};

export default function StreamPlayer() {
  const tracks = useTracks([Track.Source.Camera]);
  const track = tracks[0];
  if (!track) {
    return;
  }

  return (
    <MediaPlayer
      load="visible"
      streamType="live"
      onCanLoad={attachTrackOnLoad(track)}
    >
      <MediaProvider />
    </MediaPlayer>
  );
}

Do you have any insights?

Thanks!