# consumer no video in react-native

**URL:** <https://mediasoup.discourse.group/t/consumer-no-video-in-react-native/345>\
**Category:** mediasoup libraries\
**Created:** [October 20, 2019, 3:11am UTC](https://mediasoup.discourse.group/t/consumer-no-video-in-react-native/345 "2019-10-20T03:11:28Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![eric-jswang](https://avatars.discourse-cdn.com/v4/letter/e/958977/32.png) [@eric-jswang](https://mediasoup.discourse.group/u/eric-jswang)\
**Post date:** [October 20, 2019, 3:11am UTC](https://mediasoup.discourse.group/t/consumer-no-video-in-react-native/345/1 "2019-10-20T03:11:28Z")

</div>

Hi,

I am trying mediasoup-client based on mediasoup-sample-app ([https://github.com/mkhahani/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](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

---

<div class="post-metadata">

**Author:** ![ibc](https://yyz2.discourse-cdn.com/free1/user_avatar/mediasoup.discourse.group/ibc/32/1540_2.png) [@ibc](https://mediasoup.discourse.group/u/ibc)\
**Post date:** [October 20, 2019, 11:36am UTC](https://mediasoup.discourse.group/t/consumer-no-video-in-react-native/345/2 "2019-10-20T11:36:31Z")

</div>

> [@eric-jswang](#):
>
> The recvStreamUrl is successfully got from recvTransport, and placed in RTCView, but no video.

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.

---

<div class="post-metadata">

**Author:** ![eric-jswang](https://avatars.discourse-cdn.com/v4/letter/e/958977/32.png) [@eric-jswang](https://mediasoup.discourse.group/u/eric-jswang)\
**Post date:** [October 20, 2019, 12:55pm UTC](https://mediasoup.discourse.group/t/consumer-no-video-in-react-native/345/3 "2019-10-20T12:55:48Z")

</div>

> [@ibc](#):
>
> 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.

Yes. This is exactly the way I have done.

> [@ibc](#):
>
> 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.

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 !

---

<div class="post-metadata">

**Author:** ![ibc](https://yyz2.discourse-cdn.com/free1/user_avatar/mediasoup.discourse.group/ibc/32/1540_2.png) [@ibc](https://mediasoup.discourse.group/u/ibc)\
**Post date:** [October 20, 2019, 1:07pm UTC](https://mediasoup.discourse.group/t/consumer-no-video-in-react-native/345/4 "2019-10-20T13:07:26Z")

</div>

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)](https://github.com/react-native-webrtc/react-native-webrtc/blob/master/MediaStream.js#L86) 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.

---

<div class="post-metadata">

**Author:** ![eric-jswang](https://avatars.discourse-cdn.com/v4/letter/e/958977/32.png) [@eric-jswang](https://mediasoup.discourse.group/u/eric-jswang)\
**Post date:** [October 20, 2019, 1:43pm UTC](https://mediasoup.discourse.group/t/consumer-no-video-in-react-native/345/5 "2019-10-20T13:43:14Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![ibc](https://yyz2.discourse-cdn.com/free1/user_avatar/mediasoup.discourse.group/ibc/32/1540_2.png) [@ibc](https://mediasoup.discourse.group/u/ibc)\
**Post date:** [December 2, 2019, 11:10pm UTC](https://mediasoup.discourse.group/t/consumer-no-video-in-react-native/345/6 "2019-12-02T23:10:59Z")

</div>

Closed on December 2, 2019, 11:10pm UTC


