Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Black Screen while gettings tracks with ontrack

See original GitHub issue

I am trying to create RTCView for remote stream, but getting black screen

Sending an offer

if (createOffer) {
  try {
    const offerDescription = await peerConnection.current?.createOffer(
      sessionConstraints,
    );

    await peerConnection.current?.setLocalDescription(
      offerDescription as RTCSessionDescription,
    );

    const data = await VoiceCallService.sendOffer(
      callID,
      offerDescription,
      echo?.socketId() as string,
    );
  } catch (error) {
    console.log('error while creating offer', error);
  }
}

receiving events and set as local and remote description

  useEffect(() => {
    const onAnswerCreated = async ({answer}: any) => {
      console.log('ANSWER SETTED');
      await peerConnection.current?.setRemoteDescription({
        sdp: `${answer.sdp}\n`,
        type: answer.type,
      });
    };

    const onOfferCreated = async ({offer}: any) => {
      console.log('OFFER CREATED');
      await peerConnection.current?.setRemoteDescription({
        sdp: `${offer.sdp}\n`,
        type: offer.type,
      });

      const answerDescription = await peerConnection.current?.createAnswer();

      await peerConnection.current?.setLocalDescription(
        answerDescription as RTCSessionDescription,
      );

      await VoiceCallService.sendAnswer(
        callID,
        answerDescription,
        echo?.socketId() as string,
      );
    };

    if (createOffer) {
      echoInstance?.listen('AnswerCreatedEvent', onAnswerCreated);
    } else {
      echoInstance?.listen('OfferCreatedEvent', onOfferCreated);
    }

    return () => {
      if (createOffer) {
        echoInstance?.stopListening('AnswerCreatedEvent', onAnswerCreated);
      } else {
        echoInstance?.stopListening('OfferCreatedEvent', onOfferCreated);
      }
    };
  }, [echoInstance, createOffer]);

create remoteref

remoteStream.current = new MediaStream(undefined);

peerConnection.current.ontrack = ev => {
  remoteStream.current?.addTrack(ev.track);
  console.log('onTrack', ev.streams);

};

return (
    <RTCView
      objectFit="cover"
      mirror={true}
      streamURL={remoteStream.current?.toURL()}
      style={{
        flex: 1,
        width: 500,
        height: 500,
        position: 'absolute',
      }}
    />
)

logs who creates an offer

rn-webrtc:pc:DEBUG 0 ctor +0ms
 LOG  rn-webrtc:pc:DEBUG 0 addTrack +423ms
 LOG  rn-webrtc:pc:DEBUG 0 addTrack +3ms
 LOG  rn-webrtc:pc:DEBUG 0 createOffer +5ms
 LOG  rn-webrtc:pc:DEBUG 0 createOffer OK +2ms
 LOG  rn-webrtc:pc:DEBUG 0 setLocalDescription +0ms
 WARN  No video stream for react tag: 6928b3eb-68aa-dbcc-84a7-0ae7e3a736ee
 LOG  rn-webrtc:pc:DEBUG 0 setLocalDescription OK +31ms
 LOG  candidate {"candidate": "candidate:3573973069 1 udp 2122260223 192.168.0.102 53805 typ host generation 0 ufrag dO3J network-id 1 network-cost 10", "sdpMLineIndex": 0, "sdpMid": "0"}
 LOG  candidate {"candidate": "candidate:3576656256 1 udp 2122194687 169.254.169.109 54736 typ host generation 0 ufrag dO3J network-id 2 network-cost 10", "sdpMLineIndex": 0, "sdpMid": "0"}
 LOG  candidate {"candidate": "candidate:958815351 1 udp 2122129151 10.202.5.23 56251 typ host generation 0 ufrag dO3J network-id 5 network-cost 900", "sdpMLineIndex": 0, "sdpMid": "0"}
 LOG  candidate {"candidate": "candidate:3573973069 1 udp 2122260223 192.168.0.102 52004 typ host generation 0 ufrag dO3J network-id 1 network-cost 10", "sdpMLineIndex": 1, "sdpMid": "1"}
 LOG  candidate {"candidate": "candidate:3576656256 1 udp 2122194687 169.254.169.109 60785 typ host generation 0 ufrag dO3J network-id 2 network-cost 10", "sdpMLineIndex": 1, "sdpMid": "1"}
 LOG  candidate {"candidate": "candidate:958815351 1 udp 2122129151 10.202.5.23 51292 typ host generation 0 ufrag dO3J network-id 5 network-cost 900", "sdpMLineIndex": 1, "sdpMid": "1"}
 LOG  candidate {"candidate": "candidate:1414432505 1 udp 1686052607 194.55.95.130 53805 typ srflx raddr 192.168.0.102 rport 53805 generation 0 ufrag dO3J network-id 1 network-cost 10", "sdpMLineIndex": 0, "sdpMid": "0"}
 LOG  candidate {"candidate": "candidate:1414432505 1 udp 1686052607 194.55.95.130 52004 typ srflx raddr 192.168.0.102 rport 52004 generation 0 ufrag dO3J network-id 1 network-cost 10", "sdpMLineIndex": 1, "sdpMid": "1"}
 WARN  Sending `RNCallKeepDidChangeAudioRoute` with no listeners registered.
 LOG  candidate {"candidate": "candidate:2609216701 1 tcp 1518280447 192.168.0.102 52033 typ host tcptype passive generation 0 ufrag dO3J network-id 1 network-cost 10", "sdpMLineIndex": 0, "sdpMid": "0"}
 LOG  candidate {"candidate": "candidate:2611776880 1 tcp 1518214911 169.254.169.109 52034 typ host tcptype passive generation 0 ufrag dO3J network-id 2 network-cost 10", "sdpMLineIndex": 0, "sdpMid": "0"}
 LOG  candidate {"candidate": "candidate:2007343239 1 tcp 1518149375 10.202.5.23 52035 typ host tcptype passive generation 0 ufrag dO3J network-id 5 network-cost 900", "sdpMLineIndex": 0, "sdpMid": "0"}
 LOG  candidate {"candidate": "candidate:2609216701 1 tcp 1518280447 192.168.0.102 52036 typ host tcptype passive generation 0 ufrag dO3J network-id 1 network-cost 10", "sdpMLineIndex": 1, "sdpMid": "1"}
 LOG  candidate {"candidate": "candidate:2611776880 1 tcp 1518214911 169.254.169.109 52037 typ host tcptype passive generation 0 ufrag dO3J network-id 2 network-cost 10", "sdpMLineIndex": 1, "sdpMid": "1"}
 LOG  candidate {"candidate": "candidate:2007343239 1 tcp 1518149375 10.202.5.23 52038 typ host tcptype passive generation 0 ufrag dO3J network-id 5 network-cost 900", "sdpMLineIndex": 1, "sdpMid": "1"}
 LOG  candidate {"candidate": "candidate:2423903138 1 udp 1685921535 95.214.210.232 42104 typ srflx raddr 10.202.5.23 rport 51292 generation 0 ufrag dO3J network-id 5 network-cost 900", "sdpMLineIndex": 1, "sdpMid": "1"}
 LOG  candidate {"candidate": "candidate:2423903138 1 udp 1685921535 95.214.210.232 42107 typ srflx raddr 10.202.5.23 rport 56251 generation 0 ufrag dO3J network-id 5 network-cost 900", "sdpMLineIndex": 0, "sdpMid": "0"}
 LOG  candidate {"candidate": "candidate:2423903138 1 udp 1685921535 95.214.210.232 42105 typ srflx raddr 10.202.5.23 rport 51292 generation 0 ufrag dO3J network-id 5 network-cost 900", "sdpMLineIndex": 1, "sdpMid": "1"}
 LOG  candidate {"candidate": "candidate:2423903138 1 udp 1685921535 95.214.210.232 42103 typ srflx raddr 10.202.5.23 rport 56251 generation 0 ufrag dO3J network-id 5 network-cost 900", "sdpMLineIndex": 0, "sdpMid": "0"}
 LOG  ANSWER SETTED
 LOG  rn-webrtc:pc:DEBUG 0 setRemoteDescription +6s
 WARN  Sending `RNCallKeepDidChangeAudioRoute` with no listeners registered.
 WARN  Sending `RNCallKeepDidChangeAudioRoute` with no listeners registered.
 LOG  rn-webrtc:pc:DEBUG 0 setRemoteDescription OK +2s
 LOG  rn-webrtc:pc:DEBUG 0 ontrack +5ms
 LOG  onTrack []
 LOG  rn-webrtc:pc:DEBUG 0 ontrack +6ms
 LOG  onTrack []

logs who creates an answer

 LOG  rn-webrtc:pc:DEBUG 0 ctor +0ms
 LOG  rn-webrtc:pc:DEBUG 0 addTrack +37ms
 LOG  rn-webrtc:pc:DEBUG 0 addTrack +7ms
 LOG  OFFER CREATED
 LOG  rn-webrtc:pc:DEBUG 0 setRemoteDescription +115ms
 LOG  rn-webrtc:pc:DEBUG 0 setRemoteDescription OK +11ms
 LOG  rn-webrtc:pc:DEBUG 0 createAnswer +1ms
 LOG  rn-webrtc:pc:DEBUG 0 ontrack +2ms
 LOG  onTrack []
 LOG  rn-webrtc:pc:DEBUG 0 ontrack +5ms
 LOG  onTrack []
 LOG  rn-webrtc:pc:DEBUG 0 createAnswer OK +1ms
 LOG  rn-webrtc:pc:DEBUG 0 setLocalDescription +0ms
 LOG  rn-webrtc:pc:DEBUG 0 setLocalDescription OK +23ms
 LOG  candidate {"candidate": "candidate:841689039 1 udp 2122260223 10.0.2.16 43950 typ host generation 0 ufrag vLUf network-id 5 network-cost 10", "sdpMLineIndex": 0, "sdpMid": "0"}
 LOG  candidate {"candidate": "candidate:2647562299 1 udp 2122187263 fec0::e5bd:a6cf:7020:422 38644 typ host generation 0 ufrag vLUf network-id 6 network-cost 10", "sdpMLineIndex": 0, "sdpMid": "0"}
 LOG  candidate {"candidate": "candidate:841689039 1 udp 2122129151 10.0.2.16 48361 typ host generation 0 ufrag vLUf network-id 1 network-cost 900", "sdpMLineIndex": 0, "sdpMid": "0"}
 LOG  candidate {"candidate": "candidate:2647562299 1 udp 2122056191 fec0::e5bd:a6cf:7020:422 60471 typ host generation 0 ufrag vLUf network-id 2 network-cost 900", "sdpMLineIndex": 0, "sdpMid": "0"}
 LOG  candidate {"candidate": "candidate:842163049 1 udp 1685921535 194.55.95.130 59743 typ srflx raddr 10.0.2.16 rport 48361 generation 0 ufrag vLUf network-id 1 network-cost 900", "sdpMLineIndex": 0, "sdpMid": "0"}
 LOG  candidate {"candidate": "candidate:842163049 1 udp 1686052607 194.55.95.130 55839 typ srflx raddr 10.0.2.16 rport 43950 generation 0 ufrag vLUf network-id 5 network-cost 10", "sdpMLineIndex": 0, "sdpMid": "0"}

Platform Information

React Native Version:
Plugin Version^106.0.0-beta.5:
OS: Android / iOS /
OS Version: 16/10

Issue Analytics

State:
Created a year ago
Comments:7 (3 by maintainers)

Top GitHub Comments

1reaction

saghulcommented, Oct 27, 2022

Yes, that is the Unified Plan way to do things.

0reactions

godlikeAlexcommented, Oct 25, 2022

remoteStream.current = new MediaStream(undefined);

peerConnection.current.ontrack = ev => {
  remoteStream.current?.addTrack(ev.track);
};

Then I added icecandidates like in documentation

const onNewIceCandidateEvent = ({candidate}: any) => {
      try {
        if (peerConnection.current.remoteDescription == null) {
          console.log('Im not ready yet!');
          return remoteCandidates.current.push(candidate);
        }

        return peerConnection.current?.addIceCandidate(candidate);
      } catch (error) {
        console.log('error');
      }
};

and on event iceconnectionstatechange I set the stream url, and add ice candidates (like in docs.)

    peerConnection.current?.addEventListener(
      'iceconnectionstatechange',
      event => {
        switch (peerConnection.current?.iceConnectionState) {
          case 'connected':
          case 'completed':
            setRemote(remoteStream.current?.toURL());
            processCandidates();
            break;
        }
      },
    );

But for now audio not working (I tested only on emulator) Real Device Iphone and Emulator Android.

Is this generally a normal implementation? (using ontrack event)

Top Results From Across the Web

[SOLVED] Computer turns on but no display (2022) - Driver Easy

Fix 1: Force restart your computer. If all you see is a black screen after pressing the power button, try pressing the power...

How To Fix Random Black Screen Issues on Windows 10

Fixing random black screen issues on Windows 10 could be as simple as unplugging an extra monitor or rebooting the system.

7 steps to fix a black screen in Windows 11 | TechTarget

1. Restart the computer. Whether the black screen issue began before or after login, you should first try to restart the computer. Sometimes ......

is Hilti ON!Track 3 not working / having issues for you?

Track 3 app problems? We have instructions to fix the not working issue, loading problems or the common black screen / white screen...

is Hilti ON!Track not working / having issues for you?

Do you have Hilti ON!Track app problems? We have instructions to fix the not working issue, loading problems or the common black screen...

Troubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.

Start Free

Top Related Reddit Thread

No results found

Top Related Tweet

No results found

Top Related Dev.to Post

No results found

Black Screen while gettings tracks with ontrack

Platform Information

Issue Analytics

Top GitHub Comments

Top Results From Across the Web

Top Related Medium Post

Top Related StackOverflow Question

Troubleshoot Live Code

Top Related Reddit Thread

Top Related Hackernoon Post

Top Related Tweet

Top Related Dev.to Post

Top Related Hashnode Post

setRemoteDescription auto-rollback

I can not access to microphone or camera while the call waked my app from killed state + lock screen