Opentok react native not publishing

Question

I'm trying to build an app with opentok-react-native library.

When the app is running, the publisher component becomes a black square and the subscriber component shows my camera video.

In the logs I can see that the stream is created, with a stream ID and apparently is working. But when I go to my Tokbox account I can't see any data on my dashboard:

Here is my current code: https://github.com/victor0402/opentok-demo

The important part is:

import React, {Component} from 'react';
import {View} from 'react-native';
import {OT, OTPublisher, OTSession, OTSubscriber} from "opentok-react-native";

export default class App extends Component {

  //Publisher token
  token = 'TOKEN HERE';

  //Routed session ID
  session = 'SESSION ID HERE';

  apiKey = 'API KEY';

  constructor(props) {
    super(props);

    this.state = {
      streamProperties: {},
    };

    this.publisherProperties = {
      publishVideo: true,
      publishAudio: true,
      cameraPosition: 'front'
    };

    this.publisherEventHandlers = {
      streamCreated: event => {
        console.log('publisherEventHandlers: streamCreated.... updating state');
        const streamProperties = {
          ...this.state.streamProperties, [event.streamId]: {
            subscribeToAudio: true,
            subscribeToVideo: true,
            style: {
              width: 400,
              height: 300,
            },
          }
        };
        this.setState({streamProperties});
      },
      streamDestroyed: event => {
        console.log('Publisher stream destroyed!', event);
      }
    };

    this.subscriberProperties = {
      subscribeToAudio: true,
      subscribeToVideo: true,
    };

    this.sessionEventHandlers = {
      streamCreated: event => {
        console.log('sessionEventHandlers : streamCreated');
      },

      streamDestroyed: event => {
        console.log('Stream destroyed!!!!!!', event);
      },
    };

    this.subscriberEventHandlers = {
      error: (error) => {
        console.log(`There was an error with the subscriber: ${error}`);
      },
    };
  }

  render() {
    OT.enableLogs(true);

    return (
      <View>
        <OTSession apiKey={this.apiKey} sessionId={this.session} token={this.token}
                   eventHandlers={this.sessionEventHandlers}>

          <OTPublisher
            properties={this.publisherProperties}
            eventHandlers={this.publisherEventHandlers}
            style={{ height: 100, width: 100 }}
          />

          <OTSubscriber
            properties={this.subscriberProperties}
            eventHandlers={this.subscriberEventHandlers}
            style={{height: 100, width: 100}}
            streamProperties={this.state.streamProperties}
          />
        </OTSession>
      </View>

    );
  }
}

So, is there something wrong with my code? How can I publish a vídeo and get the results and recordings on my account dashboard?

Answer 1

TokBox Developer Evangelist here.

The usage metrics take about 24 hours to populate in the dashboard which is why you're not seeing them immediately.

I also reviewed the code you shared and it looks like your setting the streamProperties object in the streamCreated callback for OTPublisher. Please note that the streamCreated event for the publisher will only fire when your publisher starts to publish. Since you're using the streamProperties to set properties for the subscriber, you should be setting this data in the streamCreated event callback for OTSession because that's dispatched when a new stream (other than your own) is created in a session. Your code would then look something like this:

this.sessionEventHandlers = {
  streamCreated: event => {
      const streamProperties = {
      ...this.state.streamProperties, [event.streamId]: {
        subscribeToAudio: true,
        subscribeToVideo: true,
        style: {
          width: 400,
          height: 300,
        },
      }
    };
    this.setState({streamProperties});
  },
};

Lastly to check and see if everything is working correctly, I recommend using the OpenTok Playground Tool and connect with the same sessionId as the one in your React Native application.