Qfyilyi

I have an opentok-react implementation for which I would like to be able to update the publisher resolution. Unfortunately, it seems that OTPublisher will only update when certain values change, and resolution is not one of them. I see in the documentation that getPublisher() should be used to update the publisher after it is initialized, but I am not seeing any examples of how this is done. Here is the component I need to update:

import React, { Component } from 'react';

import { OTSession, OTPublisher } from 'opentok-react';



const styles = {

  publisherWindow: {

    height: '155px',

    width: '230px',

    style: { buttonDisplayMode: 'off' },

  },

};



type Props = {

  sessionId: string,

  sessionToken: string,

  apiKey: string,

  muted: boolean,

  style?: Object,

  onError: Function,

  eventHandlers: Object,

  lowerResolution: boolean,

};



type State = {

  publish: boolean,

};



class TokboxPublisher extends Component<Props, State> {

  state = {

    publish: true,

  };



  static SURVEYOR_STREAM_NAME = 'Surveyor Stream';



  componentWillMount() {

    this.retryTimeout = setTimeout(this.retry, 6000);

  };



  componentWillUnmount() {

    if (this.retryTimeout) {

      clearTimeout(this.retryTimeout);

    }

  };



  onPublish = () => {

    console.log('Publishing...');

    if (this.retryTimeout) {

      clearTimeout(this.retryTimeout);

    }

  };



  retry = () => {

    this.retryTimeout = undefined;

    console.log('Retrying publish...');

    this.setState({ publish: false }, () => this.setState({ publish: true }));

  };



  render() {

    if (!this.state.publish) {

      return null;

    }

    console.log('lowerResolution: ', this.props.lowerResolution);

    return (

      <OTSession

        apiKey={this.props.apiKey}

        sessionId={this.props.sessionId}

        token={this.props.sessionToken}

        eventHandlers={this.props.eventHandlers}

      >

        <OTPublisher

          ref={this.otPublisher}

          properties={{

            publishAudio: !this.props.muted,

            resolution: this.props.lowerResolution ? '320x240' : '640x480',

            frameRate: this.props.lowerResolution ? 1 : 30,

            name: TokboxPublisher.SURVEYOR_STREAM_NAME,

            ...styles.publisherWindow,

            ...this.props.style,

          }}

          onPublish={this.onPublish}

          onError={this.props.onError}

        />

      </OTSession>

    );

  }

}



export default TokboxPublisher;

How would I use getPublisher() in this code to get the resolution to update when the lowerResolution prop changes to 'true'?

TokBox Developer Evangelist here.

When you call the getPublisher() method of the OTPublisher component, a Publisher object will be returned. You can then call videoWidth() and videoHeight() methods on the Publisher object at any given time to know the publisher's resolution. For more information on the Publisher methods, please visit: https://tokbox.com/developer/sdks/js/reference/Publisher.html#methods