# Remote MediaStream Shows Blank / Black Screen (React Native WebRTC + mediasoup-client)

**URL:** <https://mediasoup.discourse.group/t/remote-mediastream-shows-blank-black-screen-react-native-webrtc-mediasoup-client/6623>\
**Category:** mediasoup libraries\
**Created:** [April 10, 2025, 7:43am UTC](https://mediasoup.discourse.group/t/remote-mediastream-shows-blank-black-screen-react-native-webrtc-mediasoup-client/6623 "2025-04-10T07:43:08Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![pareshbbi](https://avatars.discourse-cdn.com/v4/letter/p/22d042/32.png) [@pareshbbi](https://mediasoup.discourse.group/u/pareshbbi)\
**Post date:** [April 10, 2025, 7:43am UTC](https://mediasoup.discourse.group/t/remote-mediastream-shows-blank-black-screen-react-native-webrtc-mediasoup-client/6623/1 "2025-04-10T07:43:08Z")

</div>

I’m working on a React Native app using react-native-webrtc and mediasoup-client. The host produces both audio and video tracks successfully and emits the produce event. However, on the viewer side, although both videoTrack and audioTrack are successfully consumed, the remoteStream appears blank / black, even though remoteStream.getTracks().length shows 2 and RTCView renders with the stream.

Expected Behavior  
Viewer should see the video from the host and hear the audio.

Actual Behavior

remoteStream is set with 2 tracks (video + audio).

RTCView renders but shows black.

No errors thrown during transport or consume phases.

stream.getVideoTracks()[0].enabled === true

Steps to Reproduce

Host calls getUserMedia, then produces tracks successfully.  
Viewer receives videoProducerId and audioProducerId.  
Viewer creates transport and consumes both tracks.  
RTCView streamURL={remoteStream?.toURL()} renders.  
Viewer screen is black.  
Code Snippet (Viewer side consumeStream)

const videoTrack = await consumeTrack(videoProducerId, ‘video’); if (videoTrack) { newStream.addTrack(videoTrack); } const audioTrack = await consumeTrack(audioProducerId, ‘audio’); if (audioTrack) { newStream.addTrack(audioTrack); } setRemoteStream(newStream);

Environment:

React Native: 0.74.1  
react-native-webrtc: 124.0.4  
mediasoup-client: latest  
Platform: Android Emulator and real device  
Testing on local network

What I’ve Tried

Validated remoteStream.getVideoTracks()[0].enabled is true.  
Checked console logs; no visible errors.  
Ensured RTCView has correct props:  
\<RTCView objectFit=“cover” style={{ flex: 1 }} streamURL={remoteStream?.toURL()} /\>

Possible Leads

RTCView rendering black might be a React Native WebRTC issue.  
Maybe MediaStreamTrack isn’t correctly attached internally.

remote stream ss

 ![Screenshot_1744026737](https://global.discourse-cdn.com/free1/uploads/mediasoup/original/2X/4/4ce2fe021a2556b9b6b8fffc679bc33442f89b0e.png)

remote track and local track

 ![Screenshot 2025-04-07 at 6.05.20 PM](https://global.discourse-cdn.com/free1/uploads/mediasoup/original/2X/2/2a31e140a13cefebd619c7723141c3b9fc37ad64.png)