consumer no video in react-native

mediasoup libraries
1

Hi,

I am trying mediasoup-client based on mediasoup-sample-app (https://github.com/mkhahani/mediasoup-sample-app) in react-native on Android device using the latest react-native-webrtc 1.75.1 and mediasoup-client 3.2.7.

It is found no video (on RTCView) in the received stream of recvTransport.

Below is what been observed. What could be done further to find cause or fix this issue ?
Any advises are appreciated, Thanks !

  • no errors is found in all API
  • Send transport is fine. Tcpdump shows that packets are flowing in the udp candidate ip/port of sendTransport.
  • Recv transport is fine. Tcpdump shows that packets are flowing in the udp candidate ip/port of recvTransport.
  • The recvStreamUrl is successfully got from recvTransport, and placed in RTCView, but no video.
  • I see Mediasoup-client v3 debugging (https://mediasoup.org/documentation/v3/mediasoup-client/debugging/#example). But, window.localStroage is not defined in react-native.
  • In server side, consumer.getStats() is added to see what happened, and looks fine, eg.,
    [
    {
    “bitrate”: 245254,
    “byteCount”: 1531019,
    “firCount”: 0,
    “fractionLost”: 0,
    “kind”: “video”,
    “mimeType”: “video/VP8”,
    “nackCount”: 81,
    “nackPacketCount”: 422,
    “packetCount”: 1734,
    “packetsDiscarded”: 0,
    “packetsLost”: 114,
    “packetsRepaired”: 114,
    “packetsRetransmitted”: 236,
    “pliCount”: 0,
    “roundTripTime”: 110.9161376953125,
    “rtxSsrc”: 247633276,
    “score”: 10,
    “ssrc”: 210525630,
    “timestamp”: 577692584,
    “type”: “outbound-rtp”
    },
    {
    “bitrate”: 246342,
    “byteCount”: 2075239,
    “firCount”: 0,
    “fractionLost”: 0,
    “jitter”: 8,
    “kind”: “video”,
    “mimeType”: “video/VP8”,
    “nackCount”: 0,
    “nackPacketCount”: 0,
    “packetCount”: 2252,
    “packetsDiscarded”: 0,
    “packetsLost”: 0,
    “packetsRepaired”: 0,
    “packetsRetransmitted”: 37,
    “pliCount”: 1,
    “roundTripTime”: 124.3743896484375,
    “rtxSsrc”: 2044011306,
    “score”: 10,
    “ssrc”: 1692997473,
    “timestamp”: 577692584,
    “type”: “inbound-rtp”
    }
    ]

Here is the development environment,

  • react: 16.9.0
  • react-native: 0.61.2
  • react-native-webrtc: 1.75.1
  • mediasoup-client: 3.2.7
2 Likes
2

I don’t know what that means. You are supposed to call transport.consume() in the client app, get the remote track from consumer.track, create a new MediaStream, insert the video track into that stream, get the “video URL” of the stream and use it into a RTCView. I don’t have any react-native app to test so cannot help much more.

However now I see that you are using a very old version of mediasoup-client so you are loosing every recent addition to make react-native-webrtc work. Please just report issues if you are using the very latest versions of everything.

3

Yes. This is exactly the way I have done.

The application is using react-native-webrtc 1.75.1 and mediasoup-client 3.2.7, which are the latest versions I could get from npmjs. Their github shows that they are the latest versions in public. If there are more recent or custom versions, please kindly guide me the place to download.

I am glad to try mediasoup-client on react-native, and do tests by advises.
Thank you very much !

4

My fault, indeed 3.2.7 is the latest version.

Whether the steps above to get the remote video work or not depend on react-native-webrtc, I’m afraid I cannot give much support on it. In theory it should work, and creating a stream = new MediaStream() and calling stream.addTrack(remoteVideoTrack) should make such a stream properly render the remote video in a RTCView, but you’d rather ask in the react-native-webrtc issue tracker. This is something new in react-native-webrtc (@saghul added it recently in 1.75.0 if I recall correctly) and it theory it should work.

5

Thank you. I will ask in react-native-webrtc issue tracker.