Programatically control a Video component

Is there a way for us to control a video playback instance, just like I can do with Audio?

Problem is, since I want to control the video stream within the actions folder, I also need to show the feed itself in a Video component, somewhere in the UI.

I understand that I can use the following to control it as follows:

// Component
<Video ref={videoRef} />

// Actions
videoRef.loadAsync({...})

Problem with the above is that the videoRef get’s created whenever the UI is mounted, hence, can’t control it via actions, whenever the data comes in from the server.

Ideally, I’d create the playback instance via code and then attach it to a component, as follows:

// actions
const playback = new Video({})

// component
<Video source={playback} />

Cheers

1 Like

Did you find solution? I have the same question )

Unfortunately no. Nobody seems to have this use case … I ended up having the Video component automatically play the stream on mount and hope that it starts replaying correctly in production after going background / foreground after a period of time for example.

1 Like

I was trying to use <Video ref={videoRef} /> without setting source, I thought it should be loaded from videoRef.current.loadAsync(source) . When I did: <Video ref={videoRef} source={} /> everything worked.
I handle videoRef.current.loadAsync(source) in useEffect(()=>{}, []) hook, which is instead of componentDidMount.

Nice. I didn’t bother too much since I wanted to control the ref from another file.

So basically having the ref in an actions file and using it in a