opentok-react-layout

React utility to manage layout for Opentok streams

Prerequisites

1. NodeJS
2. Register Opentok to get authentication.
3. opentok-react

Installation

To install and set up the library, run:

$ npm install -s opentok-react-layout

Or if you prefer using Yarn:

$ yarn add opentok-react-layout

NOTE: remember to install the peer dependency of opentok-react

Usage

Importing opentok-react-layout

Import the opentok-react-layout utility into your React application:

import { updateLayout } from "opentok-react-layout";

Or require it if you need to use CommonJS modules:

const { updateLayout } = require("opentok-react-layout");

The updateLayout() will accept only parameter that is streams array. Call this utility whenerver the stream updated.

updateLayout(streams[])

Note: Currently supporting Picture-in-picture and Grid layout

Example with opentok-react and opentok-react-layout

import React from "react";

import {
  OTPublisher,
  OTSession,
  OTStreams,
  OTSubscriber,
  preloadScript,
} from "opentok-react";

import { updateLayout } from "opentok-react-layout";

import "./App.css";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      error: null,
      streams: [],
    };
    this.sessionEvents = {
      streamCreated: event => {
        this.setState(
          {
            streams: [...this.state.streams, event.stream],
          },
          () => updateLayout(this.state.streams)
        );
      },
      streamDestroyed: event => {
        this.setState(
          prevState => ({
            streams: prevState.streams.filter(
              stream => stream?.id !== event.stream.id
            ),
          }),
          () => updateLayout(this.state.streams)
        );
      },
    };
  }

  onError = err => {
    this.setState({ error: `Failed to connect: ${err.message}` });
  };

  render() {
    return (
      <OTSession
        apiKey={OPENTOK_API_KEY}
        sessionId={OPENTOK_SESSION_ID}
        token={OPENTOK_SESSION_TOKEN}
        eventHandlers={this.sessionEvents}
        onError={this.onError}
      >
        {this.state.error ? <div id="error">{this.state.error}</div> : null}
        <div className="publisher">
          <OTPublisher
            properties={{
              width: "100%",
              height: "100%",
              insertMode: "append",
            }}
          />
        </div>
        <OTStreams>
          <div className="subscriber">
            <OTSubscriber
              properties={{
                insertMode: "append",
                fitMode: "contain",
                height: "100%",
                width: "100%",
              }}
            />
          </div>
        </OTStreams>
      </OTSession>
    );
  }
}

export default preloadScript(App);

In the above example, calling the updateLayout() on stream events like streamCreated and streamDestroyed.

The above example is with class-based component, you can also use function-based component.

Authors

Dinesh Panjwani - GitHub

License

None