Remote stream is displaying as black screen RTC connection success and audio output also ok but video output is black screen only. why

General040642add70aa006ef56b5af5b5acae3
1

import React, { useEffect, useState } from ‘react’;
import { View, Text, TextInput, Button, Alert, StyleSheet } from ‘react-native’;
import { RTCView, mediaDevices, RTCPeerConnection, RTCSessionDescription, RTCIceCandidate } from ‘react-native-webrtc’;
import io from ‘socket.io-client’;

const serverUrl = ‘http://192.168.222.27:3000’; // Replace with your server’s URL

const App = () => {

const [localMediaStream, setLocalMediaStream] = useState(null);
const[remoteStream, setRemoteStream] = useState(null);
const [socket, setSocket] = useState(io(serverUrl));

const StartLocalStream = async () => {

let mediaConstraints = {
  audio: true,
  video: true,
};

try {
  const mediaStream = await mediaDevices.getUserMedia(mediaConstraints);
  setLocalMediaStream(mediaStream);
  // Add our stream to the peer connection.
  localMediaStream.getTracks().forEach(
    track => peerConnection.addTrack(track, localMediaStream));
  try {
    let sessionConstraints = {
      mandatory: {
        OfferToReceiveAudio: true,
        OfferToReceiveVideo: true,
        VoiceActivityDetection: true
      }
    };
    
    const offerDescription = await peerConnection.createOffer(sessionConstraints);
    await peerConnection.setLocalDescription(offerDescription);
    // Send the offerDescription to the other participant.
    socket.emit("offer",JSON.stringify(offerDescription))

  } catch (err) {
    // Handle Errors
    console.log("OFFER ERROR", err)
  };
} catch (err) {
  // Handle Error
};

}

let peerConstraints = {
iceServers: [
{
url: ‘turn:numb.viagenie.ca’,
credential: ‘muazkh’,
username: ‘webrtc@live.com’,
},
],
};

let peerConnection = new RTCPeerConnection(peerConstraints);

peerConnection.addEventListener(‘track’, async (event) => {
setRemoteStream(event.streams[0])
console.log(event);
console.log(“@@@@@@@@@@@@@@@@@@@@@@@@@@”,remoteStream);
});

peerConnection.addEventListener( 'iceconnectionstatechange', event => {
  switch( peerConnection.iceConnectionState ) {
    case 'connected':
      console.log("peerConnection.iceConnectionState",peerConnection.iceConnectionState)
    case 'completed':
      // You can handle the call being connected here.
      // Like setting the video streams to visible..

      break;
  };
} );

useEffect(() => {
StartLocalStream();

const handleIceCandidate = (event) => {
  if (!event.candidate) {
    return; // No more candidates to gather.
  }

  console.log("ICEEE...", JSON.stringify(event.candidate));
  socket.emit("ice-candidate", JSON.stringify(event.candidate));
};

peerConnection.addEventListener('icecandidate', handleIceCandidate);

const onOfferReceived = async (data) => {
  // Handle incoming offer
  console.log("OFFER RECC");
  peerConnection.setRemoteDescription(JSON.parse(data));
  const answer = await peerConnection.createAnswer(); //creating answer
  await peerConnection.setLocalDescription(answer);
  socket.emit("answer", (JSON.stringify(answer)))
};

const onAnswerReceived = async (data) => {
  // Handle received answer
  console.log("ANSWER REC");
  await peerConnection.setRemoteDescription((JSON.parse(data)));

};

const onIceCandidateReceived = (data) => {
  // Handle received ICE candidate
  console.log("ICE ADDING");
  const ICE = JSON.parse(data);
  peerConnection.addIceCandidate(ICE);
};

socket.on('offer', onOfferReceived);
socket.on('answer', onAnswerReceived);
socket.on('ice-candidate', onIceCandidateReceived);

return () => {
  peerConnection.removeEventListener('icecandidate', handleIceCandidate);
  socket.off('offer', onOfferReceived);
  socket.off('answer', onAnswerReceived);
  socket.off('ice-candidate', onIceCandidateReceived)
};

}, )

return (

RTC video

  {remoteStream == null ? <Text style={{backgroundColor:"yellow",width:250,height:250,alignContent:"center"}} >REMOTE STREAM</Text> : <RTCView style={{height: 250, width: 250}} zOrder={20} objectFit={"cover"} mirror={true}  streamURL={remoteStream.toURL()} />  }

  {localMediaStream == null ? <Text style={{backgroundColor:"yellow",width:250,height:250}} >LOCAL STREAM</Text> : <RTCView style={{height: 250, width: 250,backgroundColor: 'transparent'}} zOrder={20} objectFit={"cover"}  mirror={true}  streamURL={localMediaStream.toURL()} />  }

</View>

);
};

const styles = StyleSheet.create({
container: {
flex:1,
marginTop: 5,
justifyContent:“space-around”,
alignItems: ‘center’,
},
video: {
flex: 1,
width: ‘100%’,
},
});

export default App;

2

Did you manage to solve it? we are having the same issue