search

blackuy / react-native-twilio-video-webrtc

Twilio Video (WebRTC) for React Native
MIT License
606 stars 403 forks source link

videoViewDidReceiveData: know when video actually starts showing up #237

Open Deg5112 opened 4 years ago

Deg5112 commented 4 years ago

I looked and didn't see a way to know exactly when the TVIVideoView for TwilioVideoLocalView/TwilioVideoParticipantView starts displaying video. I basically have an Avatar overlay, and once onParticipantAddedVideoTrack is fired, that's when i remove the Avatar overlay and show the <TwilioVideoParticipantView. There is a 1-2 seconds of nothing/white screen that shows before <TwilioVideoParticipantView actually starts showing the feed. There is actually a solution for this, to know exactly when video starts playing and when to remove the 'Avatar overlay' I have used in my Swift project. See below.

in swift I am able to tap into the delegate method for TVIVideoView. https://www.twilio.com/docs/video/migrating-2x-3x-ios#videoviewdelegate

extension VideoUIViewController : TVIVideoViewDelegate {
  func videoViewDidReceiveData(_ view: TVIVideoView) {
        clearLogMessages()

        if view == videoViewB { hidePhotoB() }
        else if view == videoViewA { hidePhotoA() }
    }

Think we can add this in? Right now a hack is to just have to a setTimeout for 1-2 seconds before i show the <TwilioVideoParticipantView

if this is already available let me know, thanks!

slycoder commented 4 years ago

This isn't available as far as I know. If you have a suggested PR for integrating your approach it'd be worth putting it up.

Might also be a good idea to ping the twilio folks to see if they have an "official" solution for this.

Deg5112 commented 4 years ago

This is an official approach from Twilio as I shared the documentation link

TVIVideoViewDelegate {
  func videoViewDidReceiveData(_ view: TVIVideoView) {

Okay sounds like it's not supported with this rn library, when i have time i'll see if i can make a PR for this, not a deal breaker though at the moment, thanks!

sanarena commented 4 years ago

@Deg5112 Did you got time to write PR for this? I've ran into same issue.

Deg5112 commented 4 years ago

@sanarena I just did a hack setTimeout 1000ms from when the the participant is connected.. and start with a black background so there's no flicker when removing the avatar to showing the video.

If you are familiar with swift/obj c i shared the code above... You just have to add that to the library and emit that event to js land so you can tap into it.