React Opentok how to update publisher resolution?











up vote
0
down vote

favorite












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'?










share|improve this question






















  • The solution I found was as follows: I changed the ref to ref={ (ref) => this.publisher = ref } and added the following lifecycle method: componentDidUpdate(prevProps) { if (this.props.lowerResolution !== prevProps.lowerResolution) { if (this.props.lowerResolution) { this.publisher.getPublisher().stream.setVideoDimensions(320, 240); } else if (!this.props.lowerResolution) { this.publisher.getPublisher().stream.setVideoDimensions(640, 480); } } }
    – mlaramore
    Nov 27 at 18:13

















up vote
0
down vote

favorite












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'?










share|improve this question






















  • The solution I found was as follows: I changed the ref to ref={ (ref) => this.publisher = ref } and added the following lifecycle method: componentDidUpdate(prevProps) { if (this.props.lowerResolution !== prevProps.lowerResolution) { if (this.props.lowerResolution) { this.publisher.getPublisher().stream.setVideoDimensions(320, 240); } else if (!this.props.lowerResolution) { this.publisher.getPublisher().stream.setVideoDimensions(640, 480); } } }
    – mlaramore
    Nov 27 at 18:13















up vote
0
down vote

favorite









up vote
0
down vote

favorite











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'?










share|improve this question













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'?







reactjs opentok






share|improve this question













share|improve this question











share|improve this question




share|improve this question










asked Nov 21 at 19:40









mlaramore

64




64












  • The solution I found was as follows: I changed the ref to ref={ (ref) => this.publisher = ref } and added the following lifecycle method: componentDidUpdate(prevProps) { if (this.props.lowerResolution !== prevProps.lowerResolution) { if (this.props.lowerResolution) { this.publisher.getPublisher().stream.setVideoDimensions(320, 240); } else if (!this.props.lowerResolution) { this.publisher.getPublisher().stream.setVideoDimensions(640, 480); } } }
    – mlaramore
    Nov 27 at 18:13




















  • The solution I found was as follows: I changed the ref to ref={ (ref) => this.publisher = ref } and added the following lifecycle method: componentDidUpdate(prevProps) { if (this.props.lowerResolution !== prevProps.lowerResolution) { if (this.props.lowerResolution) { this.publisher.getPublisher().stream.setVideoDimensions(320, 240); } else if (!this.props.lowerResolution) { this.publisher.getPublisher().stream.setVideoDimensions(640, 480); } } }
    – mlaramore
    Nov 27 at 18:13


















The solution I found was as follows: I changed the ref to ref={ (ref) => this.publisher = ref } and added the following lifecycle method: componentDidUpdate(prevProps) { if (this.props.lowerResolution !== prevProps.lowerResolution) { if (this.props.lowerResolution) { this.publisher.getPublisher().stream.setVideoDimensions(320, 240); } else if (!this.props.lowerResolution) { this.publisher.getPublisher().stream.setVideoDimensions(640, 480); } } }
– mlaramore
Nov 27 at 18:13






The solution I found was as follows: I changed the ref to ref={ (ref) => this.publisher = ref } and added the following lifecycle method: componentDidUpdate(prevProps) { if (this.props.lowerResolution !== prevProps.lowerResolution) { if (this.props.lowerResolution) { this.publisher.getPublisher().stream.setVideoDimensions(320, 240); } else if (!this.props.lowerResolution) { this.publisher.getPublisher().stream.setVideoDimensions(640, 480); } } }
– mlaramore
Nov 27 at 18:13














1 Answer
1






active

oldest

votes

















up vote
0
down vote













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






share|improve this answer





















  • Thanks Manik, but the issue I am having is with updating the Publisher to change the resolution after it has been initialized, rather than simply knowing the current resolution. Do you have any advice on how to do that?
    – mlaramore
    Nov 26 at 19:01











Your Answer






StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});














draft saved

draft discarded


















StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53419426%2freact-opentok-how-to-update-publisher-resolution%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown

























1 Answer
1






active

oldest

votes








1 Answer
1






active

oldest

votes









active

oldest

votes






active

oldest

votes








up vote
0
down vote













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






share|improve this answer





















  • Thanks Manik, but the issue I am having is with updating the Publisher to change the resolution after it has been initialized, rather than simply knowing the current resolution. Do you have any advice on how to do that?
    – mlaramore
    Nov 26 at 19:01















up vote
0
down vote













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






share|improve this answer





















  • Thanks Manik, but the issue I am having is with updating the Publisher to change the resolution after it has been initialized, rather than simply knowing the current resolution. Do you have any advice on how to do that?
    – mlaramore
    Nov 26 at 19:01













up vote
0
down vote










up vote
0
down vote









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






share|improve this answer












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







share|improve this answer












share|improve this answer



share|improve this answer










answered Nov 23 at 2:40









Manik

572113




572113












  • Thanks Manik, but the issue I am having is with updating the Publisher to change the resolution after it has been initialized, rather than simply knowing the current resolution. Do you have any advice on how to do that?
    – mlaramore
    Nov 26 at 19:01


















  • Thanks Manik, but the issue I am having is with updating the Publisher to change the resolution after it has been initialized, rather than simply knowing the current resolution. Do you have any advice on how to do that?
    – mlaramore
    Nov 26 at 19:01
















Thanks Manik, but the issue I am having is with updating the Publisher to change the resolution after it has been initialized, rather than simply knowing the current resolution. Do you have any advice on how to do that?
– mlaramore
Nov 26 at 19:01




Thanks Manik, but the issue I am having is with updating the Publisher to change the resolution after it has been initialized, rather than simply knowing the current resolution. Do you have any advice on how to do that?
– mlaramore
Nov 26 at 19:01


















draft saved

draft discarded




















































Thanks for contributing an answer to Stack Overflow!


  • Please be sure to answer the question. Provide details and share your research!

But avoid



  • Asking for help, clarification, or responding to other answers.

  • Making statements based on opinion; back them up with references or personal experience.


To learn more, see our tips on writing great answers.





Some of your past answers have not been well-received, and you're in danger of being blocked from answering.


Please pay close attention to the following guidance:


  • Please be sure to answer the question. Provide details and share your research!

But avoid



  • Asking for help, clarification, or responding to other answers.

  • Making statements based on opinion; back them up with references or personal experience.


To learn more, see our tips on writing great answers.




draft saved


draft discarded














StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53419426%2freact-opentok-how-to-update-publisher-resolution%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown





















































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown

































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown







Popular posts from this blog

A CLEAN and SIMPLE way to add appendices to Table of Contents and bookmarks

Calculate evaluation metrics using cross_val_predict sklearn

Insert data from modal to MySQL (multiple modal on website)