@voxeet/react-widget

Voxeet React Widget

Installation

npm i @voxeet/voxeet-web-sdk @voxeet/react-widget --save
yarn add @voxeet/voxeet-web-sdk @voxet/react-widget

Usage

Reducer

A redux reducer needs to be added to your store.

import { reducer as voxeetReducer } from '@voxeet/react-widget';

const reducers = combineReducers({
  voxeet: voxeetReducer
});

Widget

import React from 'react'
import ReactDOM from 'react-dom'
import { Provider } from 'react-redux'
import thunkMidleware from 'redux-thunk'
import { combineReducers, createStore, applyMiddleware } from 'redux'

import { Widget, reducer as voxeetReducer } from '@voxeet/react-widget'

const reducers = combineReducers({
  voxeet: voxeetReducer
});

const configureStore = () => createStore(
  reducers,
  applyMiddleware(thunkMidleware)
)

const settings = {
  consumerKey: 'consumerKey',
  consumerSecret: 'consumerSecret',
  conferenceAlias: 'Sample2'
}

ReactDOM.render(
  <Provider store={configureStore()}>
    <Widget
      consumerKey={settings.consumerKey}
      consumerSecret={settings.consumerSecret}
      conferenceAlias={settings.conferenceAlias}
    />
  </Provider>,
  document.getElementById('app')
)

where consumerKey and consumerSecret are your credentials and conferenceAlias the conference you want to join.

Widget Properties

Name	Type	Default	Description
sdk	Function		VoxeetSDK if you want to use external Voxeet SDK
consumerKey	String		The consumer key
consumerSecret	String		The consumer secret
conferenceAlias	String		The conference you whant to join
forceFullscreen	Boolean	false	Forces the widget to go fullscreen
userInfo	Object	{   name: 'Guest ' + Math.floor((Math.random() * 100) + 1),   externalId: '',   avatarUrl: '' }	User informations for voxeet sdk
constraints	Object	{   audio: true,   video: false }	The webrtc constraints for the sdk
sidebarButtons	React Component	ControlsButtons - All buttons	A react component to customize the sidebar buttons

For more documentation on userInfo and constraints you can look at Voxeet Sdk

Control buttons

The default control buttons component is below, you can customize it for you needs. Just replace

import React, { Component } from 'react'
import PropTypes from 'prop-types'

import {
  Buttons: {
    ToggleMicrophoneButton,
    ToggleRecordingButton,
    ToggleScreenShareButton,
    ToggleVideoButton,
    ToggleSettingsButton,
    ToggleModeButton
  } 
} from '@voxeet/react-widget'

class ControlsButtons extends Component {

    constructor(props) {
        super(props)
    }

    render() {
        const { isMuted, isRecording, videoEnabled, displaySettingsPanel, screenShareEnabled, mode, 
                toggleMicrophone, toggleRecording, toggleVideo, toggleScreenShare, 
                toggleSettings, toggleMode } = this.props
        return (
            <ul>
                <ToggleMicrophoneButton
                    isMuted={isMuted}
                    toggle={toggleMicrophone}
                />
                <ToggleRecordingButton 
                    isRecording={isRecording}
                    toggle={toggleRecording} 
                />
                <ToggleScreenShareButton
                    screenShareEnabled={screenShareEnabled}
                    toggle={toggleScreenShare}
                />
                <ToggleVideoButton
                    videoEnabled={videoEnabled}
                    toggle={toggleVideo}
                />
                <ToggleSettingsButton
                    displaySettingsPanel={displaySettingsPanel}
                    toggle={toggleSettings}
                />
                <ToggleModeButton
                    mode={mode}
                    toggleMode={toggleMode}
                />
            </ul>
        )

    }
}

ControlsButtons.propTypes = {
    isMuted: PropTypes.bool.isRequired,
    videoEnabled: PropTypes.bool.isRequired,
    displaySettingsPanel: PropTypes.bool.isRequired,
    isRecording: PropTypes.bool.isRequired,
    toggleMicrophone: PropTypes.func.isRequired,
    toggleRecording: PropTypes.func.isRequired,
    toggleVideo: PropTypes.func.isRequired,
    toggleScreenShare: PropTypes.func.isRequired,
    toggleSettings: PropTypes.func.isRequired,
    toggleMode: PropTypes.func.isRequired,
};

export default ControlsButtons

=======

This repository provides you an React component for using Voxeet features.

Instructions

1. Checkout project
2. npm install
3. Start for development with npm start and
4. Build(see below)

Developpement mode

• npm start
• Open http://localhost:8080 with your browser (Chrome or Firefox)

Build component and use it into your app

(Generates the module and assets (all minified) into the ./dist folder)

• npm run build