phenix-react-gum-configuration

GUMConfiguration

Usage With React:

import GUMConfiguration from 'phenix-react-gum-configuration';

...

<GUMConfiguration
    confirmUserMedia={confirmUserMedia}
    style={style}
    classNames={classNames}
    includeScreen={includeScreen}
    confirmButtonText={confirmButtonText}
    storeLocalStateKey={storeLocalStateKey}
    aspectRatio={aspectRatio}
    resolution={resolution}
    frameRate={frameRate}
    gotUserMedia={gotUserMedia}/>

Usage Without React:

var GUMConfiguration = require('{path-to-module}/phenix-react-gum-configuration/dist/phenix-gum-configuration.min');

...

gumConfiguration = new GUMConfiguration(elementSelector, {
    confirmUserMedia: confirmUserMedia,
    style: style,
    classNames: classNames,
    includeScreen: includeScreen,
    confirmButtonText: confirmButtonText,
    storeLocalStateKey: storeLocalStateKey,
    aspectRatio: aspectRatio,
    resolution: resolution,
    frameRate: frameRate,
    gotUserMedia: gotUserMedia
})

Properties

confirmUserMedia

Required - Function - to be called when confirmUserMedia is clicked. Returns the UserMediaStream.

aspectRatio

Optional - string - Aspect ratio to request video media at. Allowed values include: '16x9' and '4x3'

resolution

Optional - number - Resolution to request video media at. Examples: 1080, 720

frameRate

Optional - number - Frame Rate to request video media at. Examples: 60, 30, 15

gotUserMedia

Optional - Function - to be called when the selected media options change and the UserMedia is successfully or unsuccessfully requested. In the event of a failure to request user media, the next closest resolution will be requested.

function gotUserMedia(error, response) {
  if (error) {
    // deal with error
  }
 
  if (response && response.constraints) {
    if (response.constraints.resolution !== 'SelectedResolution') {
      // resolution downgraded due to constraint
    }
 
    if (response.constraints.frameRate !== 'SelectedFrameRate') {
      // frame rate downgraded due to constraint
    }
 
    if (response.constraints.aspectRatio !== 'SelectedAspectRatio') {
      // aspect ratio downgraded due to constraint
    }
  }
 
  if (response && response.userMedia) {
    // do something with userMedia stream
  }
 
  if (response && response.deviceOptions) {
    // do something with audio device options response.deviceOptions.audio
    // do something with video device options response.deviceOptions.video
  }
}

confirmButtonText

Optional - string - Override the default text used in the Confirm button. Defaults to 'Confirm Microphone & Camera Settings'

style

Optional - Object - Pass this prop if you want to change styling of the component with inline styles in addition to applying the default styles. This prop should be an object with the following structure:

{
    audioConfiguration: {...inlineStyles},
    videoConfiguration: {...inlineStyles},
    videoPreview: {...inlineStyles},
    audioPreview: {...inlineStyles},
    sourceSelect: {...inlineStyles},
    confirmButton: {...inlineStyles},
}

classNames

Optional - Object - Pass this prop if you want to change styling of the component by providing your own classname and not apply the default styles. This prop should be an object with the following structure:

{
    audioConfiguration: 'className',
    videoConfiguration: 'className',
    videoPreview: 'className',
    audioPreview: 'className',
    sourceSelect: 'className',
    confirmButton: 'className',
}

includeScreen

Bool prop. If true screen option is included to videoSource selector.