React-videoroom-janus NPM

react-videoroom-janus

The way to effortlessly embed video calls in your react application, package based upon video about scaling janus-gateway. Please do not hesitate to open an issue or ask a question, i will be more than happy to answer. Thank you. alt text

Getting Started

yarn add react-videoroom-janus

These diagrams summarize behavior of packages mentioned below. alt text This is screenshot from video react-videoroom-janus - contains thin wrapper around janus-gateway-client and should provide capability to add janus client functionality in form of react component. You just drop this into your app, attach callbacks and it works.

janus-gateway-client - logic related to signaling and negotiation between frontend and nodejs backend, this is separate package which you can install in your app.

janus-gateway-node - janus instances manager, receives messages from clients and dispatches them to correct janus instances (based on location of created room), sending back responses.

janus-gateway-videoroom-tests - tests.

janus-gateway-videoroom-demo - demo app which is making use of react-janus-videoroom.

Docker image herbert1947/janus-gateway-videoroom

docker pull herbert1947/janus-gateway-videoroom:latest

Usage

Follow this link to find information on how to deploy backend part.

import { JanusVideoRoom } from 'react-videoroom-janus';

const Room = () => (
    <JanusVideoRoom
        server={this.props.server}
        user_id={this.props.user_id}
        room={this.state.selectedRoom}
        onPublisherDisconnected={(publisher) => {			
            console.log('publisher disconnected', publisher);        
	      }}
        onConnected={(publisher) => {
            console.log('publisher connected', publisher);
        }}
        onDisconnected={(error) => {
            console.log('disconnected', error);
        }}
        onRooms={(rooms) => {
            this.setState({ rooms });
        }}
        onError={(error) => {
            console.error(error);
        }}
        onParticipantJoined={(participant) => {
            console.log(participant);
        }}
        onParticipantLeft={(participant) => {
            console.log(participant);
        }}
    />
)

Props

server

string | required

websocket address of janus-gateway-node instance, should contain user id.
example:

const server = `ws://127.0.0.1:8080`;

room

string | required

id of the room to join, when this prop changes component will automatically perform cleanup and join different room.

user_id

string | required

id of the user.

onRooms

(rooms:JanusRoom[]) => void | required

called when connection established and response arrived for get available rooms request.

onError

(error:any) => void | required

in case error occurred this. function will be invoked to notify user about error.

onConnected

(publisher:JanusPublisher) => void | optional

called after publisher succesfully joined room.

onDisconnected

(error?:any) => void | optional

this function will be invoked in case connection was interrupted for some reason, first argument may contain information about possible reason for connection loss.