Htykuut

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

The underlying opentok.js API does not support changing the resolution or the framerate after you have created the Publisher. You will need to create a new publisher object when the resolution changes with something like:

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}

  >

    this.props.lowerResolution ? <OTPublisher

      ref={this.otLowResPublisher}

      properties={{

        publishAudio: !this.props.muted,

        resolution: '320x240',

        frameRate: 1,

        name: TokboxPublisher.SURVEYOR_STREAM_NAME,

        ...styles.publisherWindow,

        ...this.props.style,

      }}

      onPublish={this.onPublish}

      onError={this.props.onError}

    /> : <OTPublisher

      ref={this.otHDPublisher}

      properties={{

        publishAudio: !this.props.muted,

        resolution: '640x480',

        frameRate: 30,

        name: TokboxPublisher.SURVEYOR_STREAM_NAME,

        ...styles.publisherWindow,

        ...this.props.style,

      }}

      onPublish={this.onPublish}

      onError={this.props.onError}

    />

  </OTSession>

 );

}

This means though that when a new Publisher is created everyone in the room will see the user leave and then return again briefly. It also means that the user may be prompted again to allow access to their camera/microphone depending on whether or not.