Screen sharing example in docs required

[adaerodriguez]

Hi guys,

Could you share an example of screen sharing? There isn't a clear example about the better way to do this. I am trying to see the screen sharing (OTSubscriber from web) from a OTPublisher on the app. How can I add the code to show the screen sharing on mobile on fullscreen?.

If I put the subscriber to height: '50%' I can see both, but I don't understand how show the screen sharing on top of all views.

Could you help me?

My code:

constructor(props) {
    super(props);
    this.getDoctorName = this._getDoctorName.bind(this);
    this.sessionRef = React.createRef();
    this.connectionId = '';
    this.oldEventSignal = '';
    this.videoType = PropertiesEvent.VIDEO_TYPE_CAMERA;
    this.ws = null;

    this.state = {
      isConnected: false,
      isSubscriberConnected: false,
      isWaiting: false,
      minuteLeft: '',
      oldEvent: {},
      options: {
        connectionEventsSuppressed: true, // default is false
        useTextureViews: true, // Android only - default is false
      },
      signal: {
        data: '',
        type: '',
      },
      connectionCount: 0,
      subscriberCount: 0,
      publisherProperties: {
        cameraPosition: PropertiesEvent.CAMERA_FRONT,
        publishAudio: true,
        publishVideo: true,
      },
      streamProperties: {},
      subscriberProperties: {
        subscribeToAudio: true,
        subscribeToVideo: true,
        videoType: PropertiesEvent.VIDEO_TYPE_CAMERA,
      },
    };

    this.sessionEventHandlers = {
      error: (event) => this._logEvent(TAG_SESSION, 'error', event),
      connectionCreated: (event) => { // Sent when another client connects to the session
        this._logEvent(TAG_SESSION, 'connectionCreated', event);
        let newConnectionCount = parseInt(this.state.connectionCount, 10);
        if (event && event.connectionId !== this.connectionId) {
          newConnectionCount += 1;
          this.setState({ connectionCount: newConnectionCount });
        }
      },
      connectionDestroyed: (event) => {
        this._logEvent(TAG_SESSION, 'connectionDestroyed', event);
        const { connectionCount } = this.state;
        let newConnectionCount = parseInt(connectionCount, 10);
        if (newConnectionCount > 0) {
          newConnectionCount -= 1;
        }
        this.setState({ connectionCount: newConnectionCount });
      },
      otrnError: (event) => {
        this._logEvent(TAG_SESSION, 'otrnError', event);
        DialogManager.alert(
          strings('videoChat.errorCommunication'),
          strings('videoChat.sessionTitle'),
          strings('button.accept'),
        );
      },
      sessionConnected: (event) => { // Sent when the client connects to the session.
        this._logEvent(TAG_SESSION, 'sessionConnected', event);
        this.connectionId = event && event.connection && event.connection.connectionId
          ? event.connection.connectionId : '';
        this.setState({ connectionCount: 1, isConnected: true, isWaiting: true });
      },
      sessionDisconnected: (event) => { // Sent when the client disconnects from the session.
        this._logEvent(TAG_SESSION, 'sessionDisconnected', event);
        this.setState({ isConnected: false, isWaiting: false });
      },
      sessionReconnected: (event) => this._logEvent(TAG_SESSION, 'sessionReconnected', event),
      sessionReconnecting: (event) => this._logEvent(TAG_SESSION, 'sessionReconnecting', event),
      signal: async (event) => {
        this._logEvent(TAG_SESSION, 'signal', event);
        // Prevent empty signals -> Error with the library??
        if (event.data === '') {
          return;
        }

        // TODO This is necessary to fix the issue with OpenTok library when remounting the view.
        //  Every time we open the view, OpenTok remount it twice, then the messages are replicate so much as mounted
        //  sessions: https://github.com/opentok/opentok-react-native/issues/271
        if (!_.isEqual(JSON.stringify(this.oldEventSignal), JSON.stringify(event))) {
          this.oldEventSignal = event;
          this._onSignalEvent(event);
        }
      },
      streamCreated: (event) => {
        this._logEvent(TAG_SESSION, 'streamCreated', event);
        const streamProperties = {
          ...this.state.streamProperties,
          [event.streamId]: {
            subscribeToAudio: true,
            subscribeToVideo: true,
            videoType: event.videoType,
          },
        };
        this.setState({ streamProperties });
      },
      streamDestroyed: (event) => {
        this._logEvent(TAG_SESSION, 'streamDestroyed', event);
        this.setState({
          subscriberProperties: {
            ...this.state.subscriberProperties,
            videoType: event.videoType === PropertiesEvent.VIDEO_TYPE_SCREEN
              ? PropertiesEvent.VIDEO_TYPE_CAMERA
              : PropertiesEvent.VIDEO_TYPE_SCREEN,
          },
          isWaiting: true,
        });
      },
      streamPropertyChanged: (event) => this._logEvent(TAG_SESSION, 'streamPropertyChanged', event),
    };
  }

render() {
  <SafeAreaView style={videoChatStyle.container}>
    <OTSession
      ref={this.sessionRef}
      apiKey={apiKey}
      sessionId={sessionId}
      token={token}
      options={options}
      signal={signal}
      eventHandlers={this.sessionEventHandlers}
    >
     <SubscriberStream
         streamProperties={streamProperties}
         subscriberProperties={subscriberProperties}
         callbackEvent={(tag, event) => this._callbackSubscriber(tag, event)}
     />
     <PublisherStream
          publisherProperties={publisherProperties}
          callbackEvent={(tag, event) => this._callbackPublisher(tag, event)}
    />
    </OTSession>
  </SafeAreaView>
}

_callbackSubscriber = (tag, event) => {
    Console.log('_callbackSubscriber - tag:', tag, '\nevent:', event);
    const { subscriberCount, subscriberProperties } = this.state;
    const { videoType } = event;
    let newSubscriberCount = parseInt(subscriberCount, 10);

    switch (tag) {
      case SubscriberEvent.CONNECTED:
        newSubscriberCount += 1;
        this.setState({
          isSubscriberConnected: true,
          isWaiting: false,
          subscriberCount: newSubscriberCount,
          subscriberProperties: {
            ...subscriberProperties,
            videoType,
          },
        });
        break;

      case SubscriberEvent.DISCONNECTED:
        newSubscriberCount = newSubscriberCount > 0 ? newSubscriberCount -= 1 : newSubscriberCount;
        this.setState({
          isSubscriberConnected: newSubscriberCount > 0,
          isWaiting: true,
          subscriberCount: newSubscriberCount,
          subscriberProperties: {
            ...subscriberProperties,
            videoType,
          },
        });
        break;

      case SubscriberEvent.VIDEO_DATA_RECEIVED:
        break;
      case SubscriberEvent.VIDEO_DISABLED:
        break;
      case SubscriberEvent.VIDEO_ENABLED:
        break;
      default:
    }
  };

I would appreciate your help.

Thanks!!!!!

[abdulajet]

Maybe something in #122 can help?