anchorStreams

The following new Streams classes have been introduced:

1. LocalCameraStream
2. LocalMicrophone
3. LocalDisplayStream
4. LocalSystemAudioStream

Import the Streams classes into your applications using the plugin-meetings package:

import {
  LocalCameraStream,
  LocalMicrophoneStream,
  LocalDisplayStream,
  LocalSystemAudioStream,
  createCameraStream,
  createMicrophoneStream,
  createDisplayStream,
  createDisplayStreamWithAudio
} from '@webex/plugin-meetings';

anchorCreate Streams

To create a stream, camera, microphone, or display, invoke the respective method while passing any required parameters:

const cameraStream = await createCameraStream(cameraConstraints);

const microphoneStream = await createMicrophoneStream(audioConstraints);

const [localShareVideoStream, localShareAudioStream] = await createDisplayStreamWithAudio();

Here are the supported constraints:

const cameraConstraints = {
    deviceId?: ConstrainDOMString;
    width?: ConstrainULong;
    height?: ConstrainULong;
    aspectRatio?: ConstrainDouble;
    frameRate?: ConstrainDouble;
    facingMode?: ConstrainDOMString;
};

const audioConstraints = {
    deviceId?: string;
    autoGainControl?: boolean;
    echoCancellation?: boolean;
    noiseSuppression?: boolean;
};

anchorVirtual Background Effect

The virtual background can take the form of an image, an MP4 video, or a user's actual background with an applied blur. The blur option offers additional flexibility including adjustable strength and quality levels.

Use the Meetings object's createVirtualBackgroundEffect() method to apply effects:

await webex.meetings.createVirtualBackgroundEffect(options);

anchorApply a Virtual Background Effect

To apply a virtual background effect to your camera Stream:

1. Create a local camera stream with any desired constraints:

   const cameraConstraints = { width: 640, height: 480 };
   
   const cameraStream = await createCameraStream(cameraConstraints);
   

2. Add the camera stream to the video srcObject:

   meetingStreamsLocalVideo.srcObject = cameraStream.outputStream;
   

3. Create the virtual background effect using the createVirtualBackgroundEffect() method:

   const effect = await webex.meetings.createVirtualBackgroundEffect();
   

   Since no parameters are specified, the BLUR background effect is created.

4. After creating the background effect, use the cameraStream object's addEffect() method to apply the effect to the camera stream:

   const effect = await cameraStream.addEffect(effect);
   

5. Enable the effect to observe it in action on the video:

   await effect.enable();
   

anchorApply the Noise Reduction Effect

The noise reduction effect is designed to eliminate background noise from an audio stream, ensuring clear audio during calls. To apply this effect, call the Meetings object's createNoiseReductionEffect() method with any desired options:

await webex.meetings.createNoiseReductionEffect(options);

anchorApply the Noise Reduction Effect

To apply the noise reduction effect to a microphone stream:

const microphoneStream = await createMicrophoneStream();

const effect = await webex.meetings.createNoiseReductionEffect();

meetingStreamsLocalAudio.srcObject = microphoneStream.outputStream;

const effect = await microphoneStream.addEffect(effect);

await effect.enable();

anchorEffect Helper Methods

Both effects offer the following helper methods:

• effect.disable() - Disables the effect.
• effect.dispose() - Removes the effect.
• effect.setEnabled(true|false) - Single method to enable or disable the effect. Pass true to enable the effect and false to disable.
• stream.getEffectByKind(effectName) - Return the effect added on the stream (either noise-reduction-effect or virtual-background-effect).
• stream.getEffects() - Retrieve all effects added to the stream.
• stream.disposeEffects() - Remove all effects from the stream.