Ermis React SDK (legacy version)

React SDK for interacting with Ermis Media Server

Installation

This library is published in the NPM registry and can be installed using any compatible package manager. You will need to install along side with ermis-media-js-sdk.

npm install ermis-media-react-sdk ermis-media-js-sdk--save

# For Yarn, use the command below.
yarn add ermis-media-react-sdk ermis-media-js-sdk

Usage

Create a session

import { SessionProvider, StreamKinds } from 'ermis-media-react-sdk';

function App() {
  return (
    <SessionProvider
      gateways="https://SAMPLE_GATEWAY_URL"
      room="SAMPLE_ROOM_ID"
      peer="SAMPLE_PEER_ID"
      token="SAMPLE_TOKEN"
      // The senders and receivers prop is optional
      // You can optionally initialize the session with senders and receivers so we won't have to keep
      // updating SDP every time we create a new senders and receivers
      senders={[
        { kind: StreamKinds.AUDIO, name: 'audio_main' },
        { kind: StreamKinds.VIDEO, name: 'video_main', simulcast: true },
      ]}
      receivers={{
        audio: 1,
        video: 1,
      }}>
      <div>...Do streaming here...</div>
    </SessionProvider>
  );
}

Publish a stream

const EchoPair = ({ peer }: { peer: string }) => {
  const [stream, , streamChanger] = useSharedUserMedia("main_stream");
  const micPublisher = usePublisher({
    kind: StreamKinds.AUDIO,
    name: "audio_main", // this will be used to identify the sender which the publisher will be using
  });
  const cameraPublisher = usePublisher({
    kind: StreamKinds.VIDEO,
    name: "video_main",
  });

  useEffect(() => {
    if (stream) {
      // add the stream to the publisher
      micPublisher.switchStream(stream);
      cameraPublisher.switchStream(stream);

      return () => {
        micPublisher.switchStream(null);
        cameraPublisher.switchStream(null);
      };
    }
  }, [stream, micPublisher, cameraPublisher]);
};

Consume stream from a peer

const EchoConsumer = ({ peer }: { peer: string }) => {
  const consumer = useConsumerPair(peer, "audio_main", "video_main");

  return (
    <div>
      <VideoViewer stream={consumer} />
    </div>
  );
};

Put it all together

function App() {
  const peer = 'SAMPLE_PEER_ID';
  return (
    <SessionProvider
      gateways="https://SAMPLE_GATEWAY_URL"
      room="SAMPLE_ROOM_ID"
      peer={peer}
      token="SAMPLE_TOKEN"
      // The senders and receivers prop is optional
      // You can optionally initialize the session with senders and receivers so we won't have to keep
      // updating SDP every time we create a new senders and receivers
      senders={[
        { kind: StreamKinds.AUDIO, name: 'audio_main' },
        { kind: StreamKinds.VIDEO, name: 'video_main', simulcast: true },
      ]}
      receivers={{
        audio: 1,
        video: 1,
      }}>
      <EchoPair peer={peer} />
      <EchoConsumer peer={peer} />
    </SessionProvider>
  );
}

License

Released under MIT License.