React: How to attach a MediaStreamTrack to a video element?

fidika
fidika
edited August 2021 in Video, Live & WebRTC

Hey so what I'm trying to a do is track a MediaStreamTrack that is stored locally in memory and then play in the user's browser using an html5 video element. This what I have currently:

const VideoTrack = ({ track }) => {
  useEffect(() => {
    const el = ref.current 
    track.attach(el)
    return () => {
      track.detach(el)
    }
  }, [track])

  return (
    <video
      ref={ref}
    />
  ) }

The problem with this is that the video will at first paint as empty / blank, and only after the useEffect function is called will the page re-render with the MediaStreamTrack attached to it. This causes a very noticeable flicker.

I wish there was a simpler way to be like

<video track={track} /> 

does anything like that exist? So that we can render the MediaStreamTrack and the HTML5 video element all at the same time?

Tagged:

Answers

If this is an emergency, please contact Twilio Support. This is not an official Support channel. https://support.twilio.com/
Have an urgent question?
Please contact Twilio Support. This is not an official Support channel.
Contact Support