React Opentok how to update publisher resolution?
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
add a comment |
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
The solution I found was as follows: I changed the ref toref={ (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 '18 at 18:13
This won't actually change the dimensions of the video. This is an internal undocumented API to message the other clients when the dimensions have changed. But it will not request access to the camera again with the new resolution.
– Adam Ullman
Dec 12 '18 at 0:02
add a comment |
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
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
reactjs opentok
asked Nov 21 '18 at 19:40
mlaramoremlaramore
114
114
The solution I found was as follows: I changed the ref toref={ (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 '18 at 18:13
This won't actually change the dimensions of the video. This is an internal undocumented API to message the other clients when the dimensions have changed. But it will not request access to the camera again with the new resolution.
– Adam Ullman
Dec 12 '18 at 0:02
add a comment |
The solution I found was as follows: I changed the ref toref={ (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 '18 at 18:13
This won't actually change the dimensions of the video. This is an internal undocumented API to message the other clients when the dimensions have changed. But it will not request access to the camera again with the new resolution.
– Adam Ullman
Dec 12 '18 at 0:02
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 '18 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 '18 at 18:13
This won't actually change the dimensions of the video. This is an internal undocumented API to message the other clients when the dimensions have changed. But it will not request access to the camera again with the new resolution.
– Adam Ullman
Dec 12 '18 at 0:02
This won't actually change the dimensions of the video. This is an internal undocumented API to message the other clients when the dimensions have changed. But it will not request access to the camera again with the new resolution.
– Adam Ullman
Dec 12 '18 at 0:02
add a comment |
2 Answers
2
active
oldest
votes
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
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 '18 at 19:01
@mlaramore Apologies for the delay - there is no way to update the desired resolution after you've created the publisher. This is currently only available for when you initialize a publisher object: tokbox.com/developer/sdks/js/reference/OT.html#initPublisher
– Manik
Jan 1 at 2:11
add a comment |
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.
Thanks Adam, that looks like it might have worked, but the Publisher leaving and returning probably would have been a deal killer, since with our application we are only doing one publisher and one subscriber, with the subscriber on a mobile app. I did hit on a solution by using ComponentDidMount to directly update the Publisher stream. I added that solution as a comment to my original question.
– mlaramore
Dec 11 '18 at 20:10
add a comment |
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',
autoActivateHeartbeat: false,
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
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
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
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 '18 at 19:01
@mlaramore Apologies for the delay - there is no way to update the desired resolution after you've created the publisher. This is currently only available for when you initialize a publisher object: tokbox.com/developer/sdks/js/reference/OT.html#initPublisher
– Manik
Jan 1 at 2:11
add a comment |
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
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 '18 at 19:01
@mlaramore Apologies for the delay - there is no way to update the desired resolution after you've created the publisher. This is currently only available for when you initialize a publisher object: tokbox.com/developer/sdks/js/reference/OT.html#initPublisher
– Manik
Jan 1 at 2:11
add a comment |
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
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
answered Nov 23 '18 at 2:40
ManikManik
934515
934515
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 '18 at 19:01
@mlaramore Apologies for the delay - there is no way to update the desired resolution after you've created the publisher. This is currently only available for when you initialize a publisher object: tokbox.com/developer/sdks/js/reference/OT.html#initPublisher
– Manik
Jan 1 at 2:11
add a comment |
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 '18 at 19:01
@mlaramore Apologies for the delay - there is no way to update the desired resolution after you've created the publisher. This is currently only available for when you initialize a publisher object: tokbox.com/developer/sdks/js/reference/OT.html#initPublisher
– Manik
Jan 1 at 2:11
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 '18 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 '18 at 19:01
@mlaramore Apologies for the delay - there is no way to update the desired resolution after you've created the publisher. This is currently only available for when you initialize a publisher object: tokbox.com/developer/sdks/js/reference/OT.html#initPublisher
– Manik
Jan 1 at 2:11
@mlaramore Apologies for the delay - there is no way to update the desired resolution after you've created the publisher. This is currently only available for when you initialize a publisher object: tokbox.com/developer/sdks/js/reference/OT.html#initPublisher
– Manik
Jan 1 at 2:11
add a comment |
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.
Thanks Adam, that looks like it might have worked, but the Publisher leaving and returning probably would have been a deal killer, since with our application we are only doing one publisher and one subscriber, with the subscriber on a mobile app. I did hit on a solution by using ComponentDidMount to directly update the Publisher stream. I added that solution as a comment to my original question.
– mlaramore
Dec 11 '18 at 20:10
add a comment |
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.
Thanks Adam, that looks like it might have worked, but the Publisher leaving and returning probably would have been a deal killer, since with our application we are only doing one publisher and one subscriber, with the subscriber on a mobile app. I did hit on a solution by using ComponentDidMount to directly update the Publisher stream. I added that solution as a comment to my original question.
– mlaramore
Dec 11 '18 at 20:10
add a comment |
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.
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.
answered Dec 10 '18 at 1:12
Adam UllmanAdam Ullman
89949
89949
Thanks Adam, that looks like it might have worked, but the Publisher leaving and returning probably would have been a deal killer, since with our application we are only doing one publisher and one subscriber, with the subscriber on a mobile app. I did hit on a solution by using ComponentDidMount to directly update the Publisher stream. I added that solution as a comment to my original question.
– mlaramore
Dec 11 '18 at 20:10
add a comment |
Thanks Adam, that looks like it might have worked, but the Publisher leaving and returning probably would have been a deal killer, since with our application we are only doing one publisher and one subscriber, with the subscriber on a mobile app. I did hit on a solution by using ComponentDidMount to directly update the Publisher stream. I added that solution as a comment to my original question.
– mlaramore
Dec 11 '18 at 20:10
Thanks Adam, that looks like it might have worked, but the Publisher leaving and returning probably would have been a deal killer, since with our application we are only doing one publisher and one subscriber, with the subscriber on a mobile app. I did hit on a solution by using ComponentDidMount to directly update the Publisher stream. I added that solution as a comment to my original question.
– mlaramore
Dec 11 '18 at 20:10
Thanks Adam, that looks like it might have worked, but the Publisher leaving and returning probably would have been a deal killer, since with our application we are only doing one publisher and one subscriber, with the subscriber on a mobile app. I did hit on a solution by using ComponentDidMount to directly update the Publisher stream. I added that solution as a comment to my original question.
– mlaramore
Dec 11 '18 at 20:10
add a comment |
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.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
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
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 '18 at 18:13
This won't actually change the dimensions of the video. This is an internal undocumented API to message the other clients when the dimensions have changed. But it will not request access to the camera again with the new resolution.
– Adam Ullman
Dec 12 '18 at 0:02