React Native: Show the name of the OpenTok Publisher on top of the video stream

Question

I'm trying to get the name of the publisher to display on top of the video stream (on both the Publisher's and Subscriber's ends) using the OpenTok React Native package.

According to the documentation for the OTPublisher component, it should be just a matter of passing in the name key as one of the properties.

I've tried adding name to the properties and passing that through to the OTPublisher component, but it won't show up on the Publisher or the Subscriber. Do I need to do something else?

Here is the sample code I'm working with:

class App extends Component {
  constructor(props) {
    super(props);

    this.publisherProperties = {
      publishAudio: false,
      cameraPosition: 'front',
      name: 'Test Name'
    };

    this.publisherEventHandlers = {
      streamCreated: event => {
        console.log('Publisher stream created!', event);
      },
      streamDestroyed: event => {
        console.log('Publisher stream destroyed!', event);
      }
    };
  }

  render() {
    return (
      <OTSession apiKey="your-api-key" sessionId="your-session-id" token="your-session-token">
        <OTPublisher
          properties={this.publisherProperties}
          eventHandlers={this.publisherEventHandlers}
          style={{ height: 100, width: 100 }}
        />
      </OTSession>
    );
  }
}

Manik Manik · Accepted Answer · 2019-01-25T18:11:01

TokBox Developer Evangelist here.

The OpenTok React Native library renders native views that are powered by the OpenTok iOS and Android SDKs. These mobile SDKs do not support the rendering of the video with the name superimposed on top of it, that is currently only available using the OpenTok JS SDK.

If you subscribe to the same session on the web (you can test it using the OpenTok Playground tool), you would see that setting the name property works.

React Native: Show the name of the OpenTok Publisher on top of the video stream

1 Answers