Socket
Socket
Sign inDemoInstall

@voxeet/react-widget

Package Overview
Dependencies
13
Maintainers
3
Versions
4
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

    @voxeet/react-widget

Voxeet React Widget =====================


Version published
Maintainers
3
Install size
20.3 MB
Created

Readme

Source

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

NameTypeDefaultDescription
sdkFunctionVoxeetSDK if you want to use external Voxeet SDK
consumerKeyStringThe consumer key
consumerSecretStringThe consumer secret
conferenceAliasStringThe conference you whant to join
forceFullscreenBooleanfalseForces the widget to go fullscreen
userInfoObject{
  name: 'Guest ' + Math.floor((Math.random() * 100) + 1),
  externalId: '',
  avatarUrl: ''
}
User informations for voxeet sdk
constraintsObject{
  audio: true,
  video: false
}
The webrtc constraints for the sdk
sidebarButtonsReact ComponentControlsButtons - All buttonsA 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

FAQs

Last updated on 22 Mar 2018

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc