Web Meetings SDK | Streams and Effects
The Webex Meetings Web SDK version 3.0 introduces new APIs designed to facilitate the management of local media streams for audio, video, and screen sharing. This article explains how the Streams
object functions with two newly added effects: VirtualBackgroundEffect
and NoiseReductionEffect
. Those effects and their corresponding methods are available in the plugin-meetings package.
See the kitchen sink app for examples of the effects.
anchorStreams
anchorThe following new Streams
classes have been introduced:
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
anchorTo 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
anchorThe 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.
Higher blur settings will put a greater computational demand on your computer.
Use the Meetings
object's createVirtualBackgroundEffect()
method to apply effects:
await webex.meetings.createVirtualBackgroundEffect(options);
Asynchronous | Yes | |||||||||||||||||||||||||||||||||||||||
Parameters |
options
| |||||||||||||||||||||||||||||||||||||||
Returns | A promise that returns the virtual background effect. |
anchorApply a Virtual Background Effect
anchorTo apply a virtual background effect to your camera Stream
:
Create a local camera stream with any desired constraints:
const cameraConstraints = { width: 640, height: 480 }; const cameraStream = await createCameraStream(cameraConstraints);
Add the camera stream to the video
srcObject
:meetingStreamsLocalVideo.srcObject = cameraStream.outputStream;
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.After creating the background effect, use the
cameraStream
object'saddEffect()
method to apply the effect to the camera stream:const effect = await cameraStream.addEffect(effect);
Enable the effect to observe it in action on the video:
await effect.enable();
anchorApply the Noise Reduction Effect
anchorThe 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);
Asynchronous | Yes | ||||||||||
Parameters |
options
| ||||||||||
Returns | A promise that returns the noise reduction effect. |
anchorApply the Noise Reduction Effect
anchorTo 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
anchorBoth 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. Passtrue
to enable the effect andfalse
to disable.stream.getEffectByKind(effectName)
- Return the effect added on the stream (eithernoise-reduction-effect
orvirtual-background-effect
).stream.getEffects()
- Retrieve all effects added to the stream.stream.disposeEffects()
- Remove all effects from the stream.