@bandwidth/webrtc-browser

Bandwidth WebRTC Browser SDK Documentation

Initialize the Bandwidth WebRTC Browser SDK

import BandwidthRtc from "@bandwidth/webrtc-browser";

const bandwidthRtc = new BandwidthRtc();

API Methods

connect

• Params:
  • authParams: the device token to connect with
  • options: optional SDK settings (can be omitted)
    • websocketUrl: override the default Bandwidth RTC connection url (this should not generally be needed)
• Description: connect device to the Bandwidth RTC platform

await bandwidthRtc.connect({
  deviceToken: deviceToken,
});

publish

• Params:
  • input: the input to publish; this can be an instance of:
    • constraints: the media stream constraints such as audio, peerIdentity, video
      • Type: MediaStreamConstraints
    • mediaStream: An already existing media stream such as a screen share
      • Type: MediaStream
• Return:
  • rtcStream: a media stream with the supplied media stream constraints
    • Type: RtcStream
• Description: publish media

Publish with default settings:

let rtcStream: RtcStream = await bandwidthRtc.publish();

Publish audio only

const mediaConstraints: MediaStreamConstraints = {
  audio: true,
  video: false,
};
let rtcStream: RtcStream = await bandwidthRtc.publish(mediaConstraints);

Publish with customized constraints

const mediaConstraints: MediaStreamConstraints = {
  audio: {
    autoGainControl: true,
    channelCount: 1,
    deviceId: "default",
    echoCancellation: true,
    latency: 0.01,
    noiseSuppression: true,
    sampleRate: 48000,
    sampleSize: 16,
  },
  video: {
    aspectRatio: 1.3333333333333333,
    frameRate: 30,
    width: { min: 640, ideal: 1280 },
    height: { min: 480, ideal: 720 },
    resizeMode: "none",
  },
};
let rtcStream: RtcStream = await bandwidthRtc.publish(mediaConstraints);

Publish with existing media stream

let screenShare = await navigator.mediaDevices.getDisplayMedia({
  video: true,
});
let rtcStream: RtcStream = await bandwidthRtc.publish(screenShare);

Please see the following resources for more information on MediaStreamConstraints and MediaTrackConstraints that can be specified here:

• https://developer.mozilla.org/en-US/docs/Web/API/MediaStreamConstraints
• https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackConstraints

disconnect

• Description: disconnect device from the Bandwidth RTC platform

DTMF

• Description: send a set of VoIP-network-friendly DTMF tones. The tone amplitude and duration can not be controlled
• Params:
  • tone: the digits to send, as a string, chosen from the set of valid DTMF characters [0-9,*,#,,]
  • streamId (optional): the stream to 'play' the tone on

bandwidthRtc.sendDtmf("3");
bandwidthRtc.sendDtmf("313,3211*#");

Event Listeners

onStreamAvailable

• Description: called when a media stream is available to attach to the UI. This will be called for every independent stream presented to the Participant, meaning that if a new remote Participant is added to a subscribed Session a new stream will be made available to the browser, and will need to be presented to the UI for consumption by the user.

bandwidthRtc.onStreamAvailable((event) => {
  console.log(
    `A stream is available with endpointId=${event.endpointId}, its media types are ${event.mediaTypes} and the stream itself is ${event.mediaStream}`
  );
});

onStreamUnavailable

• Description: called when a media stream is now unavailable and should be removed from the UI

bandwidthRtc.onStreamUnavailable((event) => {
  console.log(
    `The stream with endpointId=${event.endpointId} is now unavailable and should be removed from the UI because the media is likely to freeze imminently.`
  );
});