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