Rankrtc NPM | npm.io

rankrtc

React component that embeds Janus client inside react application

Install

npm install --save rankrtc

Usage

import React, { Component } from 'react'

import {
  RankRTC,
  hangup, 
  isAudioMuted,
  isVideoMuted, 
  muteAudio, 
  muteVideo, 
  unmuteAudio, 
  unmuteVideo,
  shareScreen, 
  stopShare,
  setBackground
} from 'rankrtc'
import 'rankrtc/dist/index.css'
const bkg = require('./Backdrop_Blue_Background.jpg');

const config = {
  server: serverUrl,
  iceServers: [
    {
      urls: "turn:<turn server url>",
      username: "<turn username>",
      credential: "<turn password>"
    }
  ],
  backgroundChangeMode: 'static',
  backgroundImage: bkg
}

class Example extends Component {

  const eventHandler = {
    joinSuccess: () => {
      console.log('joined successfully');
      setConfJoined(true);
    },
    joinFail: (event) => {
      console.log('join failed', event.detail.reason);
    },
    leave: () => {
      window.location.reload()
    },
    publishSuccess: () => { console.log('feed published') },
    publishFail: (event) => {
      setPublished(false)
      console.log('publish failed', event.detail.reason);
      console.warn("Maximum publisher limit reached. No one can see or hear you! You will still be able to view all the publishers.")
    },
    participantJoined: (participant) => {
      console.log('participant joined', participant)
    },
    participantLeft: (participant) => {
      console.log('participant left', participant)
    },
    participantListUpdated: (participants) => {
      console.log('participants', participants)
      setParticipantList(participants)
    },
    videoMuted: () => { },
    videoUnmuted: () => { },
    audioMuted: () => { },
    audioUnmuted: () => { },
    shareStarted: () => { },
    shareStopped: () => { },
    shareFailed: () => { },
  }

  render() {
    return <RankRTC
                displayName="Participant name"
                roomName="Room id in integer"
                configParams={config}
                joinNow={true} // if it is true, joining will be done immediately
                on={eventHandler} // events emitted from component
              />
  }
}