WebRTC playbacks are missing starting frames

[prakhars144]

Current Behavior

When you start a live WebRTC stream. Or stream a static file from a server to react-player using WebRTC the player is missing first few seconds of playback. Suppose first frame has time 00:00:00 (hh:mm:ss) then playback is starting from 00:00:01 in react-player. If I switch to HTML5 basic player it works fine.

Expected Behavior

None of the frames should miss and playback should start from time 00:00:00

Steps to Reproduce

1. Stream a static video file using WebRTC
2. In WebRTC onTrack() callback, set the mediaStream state
3. Render react-player and provide it the mediaStream state in url prop
4. Observe the playback

Environment

Observing on latest version of Chrome and Firefox. Using a react app with react version 16.

[jonra1993]

Hello @prakhars144 how did you use webrtc with react-player in my case the url is not detected.

[prakhars144]

@jonra1993 In your onTrack() callback, where you receive the media stream, save it inside a state like below

const [mediaStream, setMediaStream] = useState();

const onTrack = (event) => {
     const [stream] = event.streams;
     setMediaStream(stream);
}

And then pass it to ReactPlayer:

<ReactPlayer
     url = {mediaStream}
     width="100%"
     height="100%"
/>