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.

Screen sharing showing black screen for local video on iOS

See original GitHub issue

Expected behavior

The screen share i.e getDisplayMedia() should work as working on android i.e show the local screen

Observerd behavior

The screen sharing is not working on ios no matter real device or simulator, but works fine for the same code on android

Steps to reproduce the problem

create a dummy react native project, install the latest react native webrtc library and replace the app.js code with the code below

import React, {useState} from 'react';
import {
  SafeAreaView,
  StatusBar,
  Text,
  NativeModules,
} from 'react-native';
import {Colors} from 'react-native/Libraries/NewAppScreen';
import {
  RTCView,
  mediaDevices,
} from 'react-native-webrtc';

 const { ScreenShareFile } = NativeModules;

const App = () => {
  const [stream, setstream] = useState(undefined);
  
  const startShare = async () => {
    mediaDevices
      .getDisplayMedia({video: true})
      .then(handleSuccess, handleError);
  };

  const stopShare = async () => {
    mediaDevices.stopShare();
  };

  const handleError = (error) => {
    console.log("Error",error)
  };

  const handleSuccess = async stream => {
    setstream(stream);
  };

  const backgroundStyle = {
    backgroundColor: Colors.lighter,
    flex:1
  };

  return (
    <SafeAreaView style={backgroundStyle}>
      <StatusBar barStyle={'dark-content'} />

      <Text
        onPress={() => {
          startShare();
        }}
        style={{textAlign: 'center', width: '100%', marginVertical: 20}}>
        Press me to start sharing
      </Text>
      {stream && (
        <RTCView
          style={{
            borderColor: '#000',
            borderWidth: 1,
            width: '80%',
            height: '80%',
          }}
          streamURL={stream?.toURL()}
        />
      )}
      <Text
        onPress={() => {
          stopShare();
        }}
        style={{textAlign: 'center', width: '100%', marginVertical: 20}}>
        Press me to stop sharing
      </Text>
    </SafeAreaView>
  );
};

export default App;

Now run the app on iOS and click start recording, no pop up to start broad cast is shown and also, the screen or RTCView is black in color.

Please let me know if I have to do some extra setting to have this working in iOS. As of now, I just want to show the iOS local video only !