Opentok web Mobile to PC orientation

Question

I am trying to create an app with OpenTok. I'm using Opentok react (https://www.npmjs.com/package/opentok-react) but I'm also fine to do it from plain javascript if required.

The problem I'm facing is the image that the PC is subscribed to, which is coming from the mobile phone back camera, is always horizontal. I'm able to manually transform it using CSS to rotate it, but this would require the PC user manually clicking a button to do this.. I was hoping it could be done automatically..

I've tried listening to videoDimensionsChanged but it never seems to be called. Below is the code I am using with the library

below code is in react, but Im happy to use plain js also

const subscriberEventHandlers = {
    videoDisabled: event => {
        console.log('Subscriber video disabled!'); //is called
    },
    videoEnabled: event => {
        console.log('Subscriber video enabled!'); //is called
    },
    videoDimensionsChanged: event => {
        console.log("video dimension changed", event); //never called
    }
};



 <Container>
                <div className={Styles.videoWrapper}>
                    <OTSession
                        apiKey={config.openTokApi}
                        sessionId={globalContext.session.response.session.id}
                        token={globalContext.session.response.session.token}
                        onConnect={() => console.log("OT connected")}>
                        <OTStreams>
                            <OTSubscriber eventHandlers={subscriberEventHandlers} />
                        </OTStreams>
                    </OTSession>
                </div>
            </Container>

Answer 1

The issue was my Chrome browser was not rotating, once I allowed it to rotate, the image rotated correctly and events fired.