Integrate with opentok-react

[sfmendes91]

How can i integrate this package using the opentok-react library also?

I'm generating the streams like this, by using components from Opentok-react.

<OTStreams>
    <OTSubscriber
        ref={this.props.setRef}
        properties={{
            subscribeToAudio: this.props.audio,
            subscribeToVideo: this.props.video,
            style: { buttonDisplayMode: 'off' }
        }}
    />
</OTStreams>

[immikimaru]

Would be perfect !

[leonardolouie]

@sfmendes91 how ?

[sivachandranraina]

@aullman
anyone explain or help me in integrating this layoutjs with Opentok-react?
@immikimaru which one is perfect here, I didn't get you!

I am generating the subscribers with the below code
Where to wrapup this following block with the layoutContainer thing as per the layout documentation

{stream.map((data) => (
   <div key={data.id}>
      <OTSubscriber 
          session={sessionHelper.session} 
          stream={data} className="subscriber-video-stream" 
          properties={{ showControls: false }} 
          eventHandlers={subscriberEventHandlers} />
   </div>
))}

[telltokichu]

Me too facing the same Issue

[aullman]

Sorry for the late response. You should be able to use the getLayout method to get the layout and then set the position of the OTSubscriber with inline styles. Something like:

const layout = initLayoutContainer(options);
const boxes = layout.getLayout(this.state.streams.map(stream => {
  width: stream.videoDimensions.width,
  height: stream.videoDimensions.height,
  big: stream.videoType === 'screen',
});

return ({this.state.streams.map((stream, idx) => (
   <div key={stream.id} style={{top: boxes[idx].top, left: boxes[idx].left, width: boxes[idx].width, height: boxes[idx].height }}>
      <OTSubscriber 
          session={sessionHelper.session} 
          stream={stream} className="subscriber-video-stream" 
          properties={{ showControls: false }} 
          eventHandlers={subscriberEventHandlers} />
   </div>
))}

[brayanL]

maybe anybody can help me with an example because I've tried @aullman example but doesn't work. I've removed opentok-react and I used instead only opentok.js but I can't insert subscribers in a correct way :(