Class

ScreenSharing

ScreenSharing

ScreenSharing enables displaying streaming screen content shared by an operator during an engagement and manage visitor screen sharing to an operator.

Methods

# addBufferedEventListener(type, listener)

Registers a buffered event listener on the ScreenSharing.

This listener has a buffer for events that occurred before the listener was added. It will buffer the last event that was fired before any listeners were added. In another word, if a listener is added during or after an event has occurred, the listener will trigger immediately.

This can be useful, for example, if a listener should fire for events that occurred during page loading and all the scripts were not yet initialized.

If multiple identical listeners are registered on the same event type the duplicate instances are discarded. They do not cause the listener to be called twice and do not need to be removed with the ScreenSharing#removeBufferedEventListener method.

Parameters:
Name Type Description
type string The event type for which the user is registering.
listener function The listener function that will be called when the event occurs.

# removeBufferedEventListener(type, listener)

Removes a buffered event listener from ScreenSharing.

If an event listener is removed while ScreenSharing is processing an event, it will not be triggered with the current event.

An event listener is never invoked after being removed.

Calling removeBufferedEventListener with arguments which do not identify any currently registered listener has no effect.

Parameters:
Name Type Description
type string The event type for the listener being removed.
listener function The event listener to be removed.

Events

# OPERATOR_STATE_UPDATE

Triggered when operator's screen sharing status changes. For instance, when an operator shares their with the visitor the event is triggered with SHARING status, and when the operator ends screen sharing the event is triggered with NOT_SHARING status. The event is also triggered when Engagement is being re-established, for example, when loading the page after visitor has navigated.

The event listener will be called with a OperatorScreenSharingState instance.

Example

Show video stream of operator's screen when shared

  engagement.screenSharing.addBufferedEventListener(
    engagement.screenSharing.EVENTS.OPERATOR_STATE_UPDATE,
    function(state) {
      var videoElementId = 'operator-screen';
      if (state.status === state.STATUSES.SHARING) {
        // Add video element to tha page
        var video = document.createElement('video');
        video.id = videoElementId;
        video.autoplay = true;
        video.src = URL.createObjectURL(state.screen.stream);
        document.body.appendChild(video);
      } else if (state.status === state.STATUSES.NOT_SHARING) {
        // Remove video element from the page
        var videoElement = document.getElementById(videoElementId);
        if (videoElement !== null) {
          videoElement.parentNode.removeChild(videoElement);
        }
      }
    }
  );

# SCREEN_SHARING_REQUEST

Triggered when operator requests visitor to share their screen. The event listener will be called with a ScreenSharingRequest instance that allows to accept or decline the screen sharing request.

Example

Notifying Visitor about screen sharing request

  engagement.screenSharing.addBufferedEventListener(
    engagement.screenSharing.EVENTS.SCREEN_SHARING_REQUEST,
    function(request) {
      var onAccept = function() {
        request.accept();
      };
      var onDecline = function() {
        request.decline()
      };
      showScreenSharingRequestModal(onAccept, onDecline);
    }
  );

# VISITOR_STATE_UPDATE

Triggered when visitor's screen sharing status changes. For instance, when the visitor shares their screen with an operator the event is triggered with SHARING status, and when the visitor ends screen sharing the event is triggered with NOT_SHARING status. The event is also triggered when Engagement is being re-established, for example, when loading the page after visitor has navigated.

The event listener will be called with a VisitorScreenSharingState instance.

Example

Allow visitors to stop sharing their screen

  engagement.screenSharing.addBufferedEventListener(
    engagement.screenSharing.EVENTS.VISITOR_STATE_UPDATE,
    function(state) {
      if (state.status === state.STATUSES.SHARING) {
        addStopButton({onClick: function() {
          state.screen.stopSharing();
        }});
      } else if (state.status === state.STATUSES.NOT_SHARING) {
        removeStopButton();
      }
    }
  );