Опенток отреагирует не родным издательством - PullRequest
Новая
       24

Опенток отреагирует не родным издательством

0 голосов
/ 08 марта 2019

Я пытаюсь создать приложение с библиотекой opentok-Reaction-native .

Когда приложение работает, компонент издателя становится черным квадратом, а компонент подписчика показывает мойвидео с камеры.

В логах видно, что поток создан, с идентификатором потока и, видимо, работает.Но когда я захожу в свою учетную запись Tokbox , я не вижу никаких данных на своей панели: tokbox dashboard

Вот мой текущий код: https://github.com/victor0402/opentok-demo

Важная часть: 

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>

    );
  }
}

Итак, что-то не так с моим кодом?Как я могу опубликовать видео и получить результаты и записи на панели управления моей учетной записи?

1 Ответ

1 голос
/ 08 марта 2019

Евангелист разработчиков TokBox здесь.

Метрики использования занимают около 24 часов, чтобы заполнить их на панели инструментов, поэтому вы не видите их сразу.

Я также рассмотрел код, которым вы поделились, и похоже, что вы установили объект streamProperties в обратном вызове streamCreated для OTPublisher. Обратите внимание, что событие streamCreated для издателя сработает только тогда, когда ваш издатель начнет публикацию. Поскольку вы используете streamProperties для установки свойств для подписчика, вы должны установить эти данные в обратном вызове события streamCreated для OTSession, поскольку он отправляется при создании нового потока (отличного от вашего) в сессия. Ваш код будет выглядеть примерно так: 

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

Наконец, чтобы проверить, все ли работает правильно, я рекомендую использовать OpenTok Playground Tool и подключиться с тем же идентификатором sessionId, что и в вашем приложении React Native.

...