Class: Publisher

The Publisher object provides the mechanism through which control of the published stream is accomplished. Calling the OT.initPublisher() method creates a Publisher object.

The following code instantiates a session, and publishes an audio-video stream upon connection to the session:

 var apiKey = ''; // Replace with your API key. See https://dashboard.nexmo.com
 var sessionID = ''; // Replace with your own session ID.
                     // See https://developer.vonage.com/en/video/guides/create-session/.
 var token = ''; // Replace with a generated token that has been assigned the moderator role.
                 // See https://developer.vonage.com/en/video/guides/create-token/.

 var session = OT.initSession(apiKey, sessionID);
 session.connect(token, function(error) {
   if (error) {
     console.log(error.message);
   } else {
     // This example assumes that a DOM element with the ID 'publisherElement' exists
     var publisherProperties = {width: 400, height:300, name:"Bob's stream"};
     publisher = OT.initPublisher('publisherElement', publisherProperties);
     session.publish(publisher);
   }
 });

This example creates a Publisher object and adds its video to a DOM element with the ID publisherElement by calling the OT.initPublisher() method. It then publishes a stream to the session by calling the publish() method of the Session object.

Properties

Name Type Description
accessAllowed Boolean Whether the user has granted access to the camera and microphone. The Publisher object dispatches an accessAllowed event when the user grants access. The Publisher object dispatches an accessDenied event when the user denies access.
element Element The HTML DOM element containing the Publisher. (Note: when you set the insertDefaultUI option to false in the call to OT.initPublisher, the element property is undefined.)
id String The DOM ID of the Publisher.
stream Stream The Stream object corresponding the stream of the Publisher.
session Session The Session to which the Publisher belongs.
See:

Methods

Name Description
addEventListener(type, listener, context) Deprecated.
applyAudioFilter(audioFilter) → {Promise} Applies an audio filter for the publisher.
applyVideoFilter(videoFilter) → {Promise} Applies a video filter for the publisher.
clearAudioFilter() → {Promise} Removes the audio filter being applied to the publisher.
clearVideoFilter() → {Promise} Removes the video filter being applied to the publisher.
cycleVideo() → {Promise} Switches the video input source used by the publisher to the next one in the list of available devices.
destroy() → {Publisher} Deletes the Publisher object and removes it from the HTML DOM.
getAudioFilter() → {Object} Returns the audio filter used by the publisher (or null if there is no audio filter).
getAudioSource() → {MediaStreamTrack} Returns the MediaStreamTrack object used as the audio input source for the publisher.
getImgData() → {String} Returns the base-64-encoded string of PNG data representing the Publisher video.
getRtcStatsReport() → {Promise} Returns a promise that, on success, resolves with an array of objects that include RTCStatsReport properties for the published stream.
getStats(completionHandler) Returns the details on the publisher's stream quality, including the following:
  • The total number of audio and video packets lost
  • The total number of audio and video packets sent
  • The total number of audio and video bytes sent
  • The current average video frame rate
You can use these stats to assess the quality of the publisher's audio-video stream.
getStyle() → {Object} Returns an object that has the properties that define the current user interface controls of the Publisher.
getVideoContentHint() → {String} Returns the content hint for the video track.
getVideoFilter() → {Object} Returns the video filter applied used by the publisher.
getVideoSource() → {VideoSource} Returns an object containing properties defining the publisher's current video source.
off(type, handler, context) → {Object} Removes an event handler or handlers.
on(type, handler, context) → {EventDispatcher} Adds an event handler function for one or more events.
once(type, handler, context) → {Object} Adds an event handler function for one or more events.
publishAudio(value) Starts publishing audio (if it is currently not being published) when the value is true; stops publishing audio (if it is currently being published) when the value is false.
publishCaptions(value) Starts publishing captions (if it is currently not being published) when the value is true; stops publishing captions (if it is currently being published) when the value is false.
publishVideo(value, callback) Toggles video on or off for the publisher.
removeEventListener(type, listener, context) Deprecated.
setAudioMediaProcessorConnector(mediaProcessorConnector) → {Promise} Sets a MediaProcessorConnector for the publisher audio track.
setAudioSource(audioSource) → {Promise} Switches the audio input source used by the publisher.
setStyle(style, value) → {Publisher} Sets properties that define the appearance of some user interface controls of the Publisher.
setVideoContentHint(videoContentHint) Sets the content hint for the video track of the publisher's stream.
setVideoMediaProcessorConnector(mediaProcessorConnector) → {Promise} Sets a MediaProcessorConnector for the publisher video track.
setVideoSource(videoSourceId) → {Promise} This method sets the video source for a publisher that is using a camera.
videoHeight() → {Number} Returns the height, in pixels, of the Publisher video.
videoWidth() → {Number} Returns the width, in pixels, of the Publisher video.

addEventListener(type, listener, context)

Parameters:
Name Type Description
type String The string identifying the type of event.
listener function The function to be invoked when the object dispatches the event.
context Object (Optional) Defines the value of this in the event handler function.

Deprecated — use on() or once() instead.

This method registers a method as an event listener for a specific event.

If a handler is not registered for an event, the event is ignored locally. If the event listener function does not exist, the event is ignored locally.

Throws an exception if the listener name is invalid.

See:

applyAudioFilter(audioFilter) → {Promise}

Applies an audio filter for the publisher. In the current version, you can only apply an advanced noise suppression filter. A publisher can have only one (or zero) filters applied at one time. When you set a new filter, any previously set filter is removed.

This method is incompatible with the Publisher.setAudioMediaProccessorConnector() method. Calling this method after Publisher.setAudioMediaProccessorConnector(connector) returns a promise that is rejected with an error, with the name property of the error set to 'OT_NOT_SUPPORTED'. You can remove the connector by calling Publisher.setAudioMediaProccessorConnector(null).

Note: Audio filters are only supported in recent versions of Chrome, Electron, Opera, and Edge. They are not supported in other (non-Chromium-based) browsers or on iOS. You can check if the client supports this feature by calling the OT.hasMediaProcessorSupport() method.

Important: Audio filters require adequate processor support. Even in supported browsers, transformers may not be stable when background processes limit available processing resources. See Client requirements.

Calling this method results in an error (the Promise returned by the method is rejected) in the following conditions:

  • The browser does not support this method.
  • A custom filter is already being used via the Publisher.setAudioMediaProcessorConnector() method.
  • There was an error applying the transformation filter.

You can also set the initial audio filter by setting a audioFilter option when calling OT.initPublisher().

Parameters:
Name Type Description
audioFilter Object An object defining the audio filter to be applied. The following filters are supported:
  • Advanced noise suppression filter — Set the type property of the object to "advancedNoiseSuppression".

See:
Returns:
A promise that resolves when the operation completes successfully. If there is an error, the promise is rejected and no new video filter is set.

applyVideoFilter(videoFilter) → {Promise}

Applies a video filter for the publisher. You can apply a background blur filter. A publisher can have only one (or zero) applied at one time. When you set a new filter, a previously set filter is removed.

This method is incompatible with the Publisher.setVideoMediaProcessorConnector() method. Calling this method after Publisher.setVideoMediaProcessorConnector(connector) returns a promise that is rejected with an error, with the name property of the error set to 'OT_NOT_SUPPORTED'. You can remove the connector by calling Publisher.setVideoMediaProcessorConnector(null).

Note: Video filters are only supported in recent versions of Chrome, Electron, Opera, and Edge. They are not supported in other (non-Chromium-based) browsers or on iOS. You can check if the client supports this feature by calling the OT.hasMediaProcessorSupport() method.

Important: Video filters require adequate processor support. Even in supported browsers, transformers may not be stable when background processes limit available processing resources. See Client requirements.

Calling this method results in an error (the Promise returned by the method is rejected) in the following conditions:

  • The browser does not support this method.
  • The publisher is not using a supported video source. (The videoSource option of the OT.initPublisher() method was set to null, false, or "screen").
  • A custom filter is already being used via the Publisher.setVideoMediaProcessorConnector() method.
  • There are no video input devices (cameras) available.
  • There was an error acquiring video from the video input device.
  • There was an error applying the transformation filter.

You can also set the initial video filter by setting a videoFilter option when calling OT.initPublisher().

Parameters:
Name Type Description
videoFilter Object An object defining the video filter to be applied. The following filters are supported:
  • Background blur filter: — Set the type property of the object to "backgroundBlur".

    A background blur filter object includes an additional blurStrength property, which defines the blur radius and is optional. Set this to either "low" or "high" (the default).

  • Background replacement filter — Set the type property of the object to "backgroundReplacement".

    A background replacement filter object includes an additional backgroundImgUrl property, which defines the URL of the background image to use. Also accepted are image BLOBs (a Base64-encoded string of image data). The following image formats are supported: BMP, PNG, JPEG, and GIF.

    The background image is resized to match the dimensions of the publisher's video. For best results, use an image that has the same dimensions (or at least the same aspect ratio) as the published video. Set the mirror option to false when calling the OT.initPublisher() method to have the background image appear in the correct orientation (not mirrored) in the publisher's page.

See:
Returns:
A promise that resolves when the operation completes successfully. If there is an error, the promise is rejected and no new video filter is set.

clearAudioFilter() → {Promise}

Removes the audio filter being applied to the publisher.

This will result in an error (the Promise returned by the method is rejected) if the audio filter could not be stopped.

See:
Returns:
A promise that resolves when the operation completes successfully. If there is an error, the promise is rejected.

clearVideoFilter() → {Promise}

Removes the video filter being applied to the publisher.

This will result in an error (the Promise returned by the method is rejected) if the video filter could not be stopped.

See:
Returns:
A promise that resolves when the operation completes successfully. If there is an error, the promise is rejected.

cycleVideo() → {Promise}

Switches the video input source used by the publisher to the next one in the list of available devices.

This will result in an error (the Promise returned by the method is rejected) in the following conditions:

  • The user denied access to the video input device.
  • The publisher is not using a camera video source. (The videoSource option of the OT.initPublisher() method was set to null, false, a MediaStreamTrack object, or "screen").
  • There are no video input devices (cameras) available.
  • There was an error acquiring video from the video input device.

See:
Returns:
A promise that resolves when the operation completes successfully. The promise resolves with an object that has a deviceId property set to the device ID of the camera used:
  publisher.cycleVideo().then(console.log);
  // Output: {deviceId: "967a86e52..."}
If there is an error, the promise is rejected.

destroy() → {Publisher}

Deletes the Publisher object and removes it from the HTML DOM.

The Publisher object dispatches a destroyed event when the DOM element is removed.

Returns:
The Publisher.

getAudioFilter() → {Object}

Returns the audio filter used by the publisher (or null if there is no audio filter).
See:
Returns:
The audio filter used by the publisher. Check the type property of the object to see the audio filter type. Currently, only the advanced noise suppression filter is supported, and the type property is set to "advancedNoiseSuppression".

getAudioSource() → {MediaStreamTrack}

Returns the MediaStreamTrack object used as the audio input source for the publisher. If the publisher does not have an audio source, this method returns null.
See:
Returns:
The audio source for the publisher (or null, if there is none).

getImgData() → {String}

Returns the base-64-encoded string of PNG data representing the Publisher video.

You can use the string as the value for a data URL scheme passed to the src parameter of an image file, as in the following:

 var imgData = publisher.getImgData();

 var img = document.createElement("img");
 img.setAttribute("src", "data:image/png;base64," + imgData);
 var imgWin = window.open("about:blank", "Screenshot");
 imgWin.document.write("<body></body>");
 imgWin.document.body.appendChild(img);
Returns:
The base-64 encoded string. Returns an empty string if there is no video.

getRtcStatsReport() → {Promise}

Returns a promise that, on success, resolves with an array of objects that include RTCStatsReport properties for the published stream. (See RTCStatsReport.)

For a publisher in a routed session (one that uses the OpenTok Media Router), this array includes one object, defining the statistics for the single audio-media stream that is sent to the OpenTok Media Router. In a relayed session, the array includes an object for each subscriber to the published stream. Each object in the array contains an rtcStatsReport property that is a RTCStatsReport object.

Additionally, for a publisher in a relayed session, each object in the array contains the following two properties:

  • connectionId (String) — The unique ID of the client's connection, which matches the id property of the connection property of the connectionCreated event that the Session object dispatched for the remote client.
  • subscriberId (String) — The unique ID of the subscriber, which matches the id property of the Subscriber object in the subscribing client's app.

These two properties are undefined for a publisher in a routed session.

The Promise will be rejected in the following conditions:

See:
Returns:
A promise that resolves when the operation completes successfully. If there is an error, the promise is rejected.

getStats(completionHandler)

Returns the details on the publisher's stream quality, including the following:
  • The total number of audio and video packets lost
  • The total number of audio and video packets sent
  • The total number of audio and video bytes sent
  • The current average video frame rate
You can use these stats to assess the quality of the publisher's audio-video stream.
Parameters:
Name Type Description
completionHandler function A function that takes the following parameters:
  • error (Error) — Upon successful completion the method, this is undefined. An error results if the publisher is not connected to a session or if it is not publishing audio or video.
  • statsArray (Array) — An array of objects defining the current audio-video statistics for the publisher. For a publisher in a routed session (one that uses the OpenTok Media Router), this array includes one object, defining the statistics for the single audio-media stream that is sent to the OpenTok Media Router. In a relayed session, the array includes an object for each subscriber to the published stream. Each object in the array contains a stats property that includes the following properties:

    • audio.bytesSent (Number) — The total number of audio bytes sent to the subscriber (or to the OpenTok Media Router)
    • audio.packetsLost (Number) — The total number audio packets that did not reach the subscriber (or to the OpenTok Media Router)
    • audio.packetsSent (Number) — The total number of audio packets sent to the subscriber (or to the OpenTok Media Router)
    • timestamp (Number) — The timestamp, in milliseconds since the Unix epoch, for when these stats were gathered
    • video.bytesSent (Number) — The total video bytes sent to the subscriber (or to the OpenTok Media Router)
    • video.packetsLost (Number) — The total number of video packets that did not reach the subscriber (or to the OpenTok Media Router)
    • video.packetsSent (Number) — The total number of video packets sent to the subscriber
    • video.frameRate (Number) — The current average video frame rate

    Additionally, for a publisher in a relayed session, each object in the array contains the following two properties:

    • connectionId (String) — The unique ID of the client's connection, which matches the id property of the connection property of the connectionCreated event that the Session object dispatched for the remote client.
    • subscriberId (String) — The unique ID of the subscriber, which matches the id property of the Subscriber object in the subscribing client's app.

    These two properties are undefined for a publisher in a routed session.

See:

getStyle() → {Object}

Returns an object that has the properties that define the current user interface controls of the Publisher. You can modify the properties of this object and pass the object to the setStyle() method of thePublisher object. (See the documentation for setStyle() to see the styles that define this object.)
See:
Returns:
The object that defines the styles of the Publisher.

getVideoContentHint() → {String}

Returns the content hint for the video track.
See:
Returns:
One of the following values: "", "motion", "detail, or "text".

getVideoFilter() → {Object}

Returns the video filter applied used by the publisher.
See:
Returns:
The video filter being applied to the video input source used by the publisher. Check the type property of the object to see the video filter type. The following filters are supported:
  • Background blur filter — The type property of the object is set to "backgroundBlur". A background blur filter object includes an additional blurStrength property, which defines the blur radius, set to either "low" or "high".
  • Background replacement filter — The type type property of the object is set to "backgroundReplacement". A background replacement filter object includes an additional backgroundImgUrl property, which defines the URL of the background image to use.

getVideoSource() → {VideoSource}

Returns an object containing properties defining the publisher's current video source.
See:
Returns:
The return object has the following properties:

  • deviceId (String | null) — The device ID.
  • type (String | null) — This is set to 'camera' (for a camera-based video), 'screen' (for a screen-sharing video), or 'custom' (for a video with a MediaStreamTrack source).
  • track (MediaStreamTrack | null) — The MediaStreamTrack for the video.

Any inapplicable properties will be set to null.

off(type, handler, context) → {Object}

Removes an event handler or handlers.

If you pass in one event name and a handler method, the handler is removed for that event:

obj.off("eventName", eventHandler);

If you pass in multiple event names and a handler method, the handler is removed for those events:

obj.off("eventName1 eventName2", eventHandler);

If you pass in an event name (or names) and no handler method, all handlers are removed for those events:

obj.off("event1Name event2Name");

If you pass in no arguments, all event handlers are removed for all events dispatched by the object:

obj.off();

The method also supports an alternate syntax, in which the first parameter is an object that is a hash map of event names and handler functions and the second parameter (optional) is the context for this in each handler:

obj.off(
   {
      eventName1: event1Handler,
      eventName2: event2Handler
   });
Parameters:
Name Type Description
type String (Optional) The string identifying the type of event. You can use a space to specify multiple events, as in "accessAllowed accessDenied accessDialogClosed". If you pass in no type value (or other arguments), all event handlers are removed for the object.
handler function (Optional) The event handler function to remove. The handler must be the same function object as was passed into on(). Be careful with helpers like bind() that return a new function when called. If you pass in no handler, all event handlers are removed for the specified event type.
context Object (Optional) If you specify a context, the event handler is removed for all specified events and handlers that use the specified context. (The context must match the context passed into on().)
See:
Returns:
The object that dispatched the event.

on(type, handler, context) → {EventDispatcher}

Adds an event handler function for one or more events.

The following code adds an event handler for one event:

obj.on("eventName", function (event) {
    // This is the event handler.
});

If you pass in multiple event names and a handler method, the handler is registered for each of those events:

obj.on("eventName1 eventName2",
       function (event) {
           // This is the event handler.
       });

You can also pass in a third context parameter (which is optional) to define the value of this in the handler method:

obj.on("eventName",
       function (event) {
           // This is the event handler.
       },
       obj);

The method also supports an alternate syntax, in which the first parameter is an object that is a hash map of event names and handler functions and the second parameter (optional) is the context for this in each handler:

obj.on(
   {
      eventName1: function (event) {
              // This is the handler for eventName1.
          },
      eventName2:  function (event) {
              // This is the handler for eventName2.
          }
   },
   obj);

If you do not add a handler for an event, the event is ignored locally.

Parameters:
Name Type Description
type String The string identifying the type of event. You can specify multiple event names in this string, separating them with a space. The event handler will process each of the events.
handler function The handler function to process the event. This function takes the event object as a parameter.
context Object (Optional) Defines the value of this in the event handler function.
See:
Returns:
The EventDispatcher object.

once(type, handler, context) → {Object}

Adds an event handler function for one or more events. Once the handler is called, the specified handler method is removed as a handler for this event. (When you use the on() method to add an event handler, the handler is not removed when it is called.) The once() method is the equivilent of calling the on() method and calling off() the first time the handler is invoked.

The following code adds a one-time event handler for one event:

obj.once("eventName", function (event) {
   // This is the event handler.
});

If you pass in multiple event names and a handler method, the handler is registered for each of those events:

obj.once("eventName1 eventName2"
         function (event) {
             // This is the event handler.
         });

You can also pass in a third context parameter (which is optional) to define the value of this in the handler method:

obj.once("eventName",
         function (event) {
             // This is the event handler.
         },
         obj);

The method also supports an alternate syntax, in which the first parameter is an object that is a hash map of event names and handler functions and the second parameter (optional) is the context for this in each handler:

obj.once(
   {
      eventName1: function (event) {
                 // This is the event handler for eventName1.
          },
      eventName2:  function (event) {
                 // This is the event handler for eventName1.
          }
   },
   obj);
Parameters:
Name Type Description
type String The string identifying the type of event. You can specify multiple event names in this string, separating them with a space. The event handler will process the first occurence of the events. After the first event, the handler is removed (for all specified events).
handler function The handler function to process the event. This function takes the event object as a parameter.
context Object (Optional) Defines the value of this in the event handler function.
See:
Returns:
The object that dispatched the event.

publishAudio(value)

Starts publishing audio (if it is currently not being published) when the value is true; stops publishing audio (if it is currently being published) when the value is false.
Parameters:
Name Type Description
value Boolean Whether to start publishing audio (true) or not (false).
See:

publishCaptions(value)

Starts publishing captions (if it is currently not being published) when the value is true; stops publishing captions (if it is currently being published) when the value is false.

Note: No captions will be published if the publisher does not have an audio source.

For more information, see the Live Captions developer guide.

Parameters:
Name Type Description
value Boolean Whether to start publishing captions (true) or not (false).
See:

publishVideo(value, callback)

Toggles video on or off for the publisher. It causes the video to be published (if it is currently not being published, the client is connected, and the publisher is publishing) when the value is true; it stops publishing video (if it is currently being published) when the value is false.

Note: The behavior of publishVideo varies depending on whether the publisher is currently connected and publishing:

  • Calling publishVideo(true) when the publisher is not connected to a session causes the publisher to capture and render video locally, but it does not stream video.
  • Calling publishVideo(false) when the publisher is not connected to a session causes the publisher to stop capturing video locally. No video is streamed.
  • Calling publishVideo(true) when the publisher is connected to a session but not currently publishing causes it to capture and render video locally, but it does not stream video.
  • Calling publishVideo(false) when the publisher is connected to a session but not currently publishing causes the publisher to stop capturing video locally. No video is streamed.
  • Calling publishVideo(true) when the publisher is both connected to a session and currently publishing causes the publisher to capture and render video locally and to stream video.
  • Calling publishVideo(false) when the publisher is both connected to a session and currently publishing causes the publisher to stop capturing video and to stream empty video frames.
Parameters:
Name Type Description
value Boolean Whether to start publishing video (true) or not (false).
callback function (Optional) A function that takes in an Error parameter. Upon successful completion of the method, this error parameter is undefined. An error results if the publisher has no devices to provide the media stream or if the user media request is not supported. Note: this is a beta feature.
See:

removeEventListener(type, listener, context)

Parameters:
Name Type Description
type String The string identifying the type of event.
listener function The event listener function to remove.
context Object (Optional) If you specify a context, the event handler is removed for all specified events and event listeners that use the specified context. (The context must match the context passed into addEventListener().)

Deprecated — use off() instead.

Removes an event listener for a specific event.

Throws an exception if the listener name is invalid.

See:

setAudioMediaProcessorConnector(mediaProcessorConnector) → {Promise}

Sets a MediaProcessorConnector for the publisher audio track. A publisher can have only one audio MediaProcessorConnector applied at one time. When you set a new connector, the previously set audio connector is removed.

Note: MediaProcessors are only supported in recent versions of Chrome, Electron, Opera, and Edge. They are not supported in other (non-Chromium-based) browsers or on iOS. You can check if the client supports this feature by calling the OT.hasMediaProcessorSupport() method.

Important: Media processors require adequate processor support. Even in supported browsers, transformers may not be stable when background processes limit available processing resources. See Client requirements.

Calling this method results in an error (the Promise returned by the method is rejected) in the following conditions:

  • There are no audio input devices (microphones) available.
  • There was an error acquiring audio from the audio input device.
  • There was an error acquiring the processed track from the MediaProcessorConnector.

You can clear the current connector by calling this method with null.

For more information, see the Using the Vonage Media Processor library developer guide.

Parameters:
Name Type Description
mediaProcessorConnector MediaProcessorConnector A MediaProcessorConnector instance. See the Vonage Media Processor library docs.
See:
Returns:
A promise that resolves when the operation completes successfully. If there is an error, the promise is rejected and no connector is set.

setAudioSource(audioSource) → {Promise}

Switches the audio input source used by the publisher. You can set the audioSource to a device ID (string) or audio MediaStreamTrack object.

This will result in an error (the Promise returned by the method is rejected) in the following conditions:

  • The browser does not support this method. This method is not supported in Internet Explorer or non-Chromium versions of Edge (older than version 79).
  • The publisher was not initiated with an audio source. (The audioSource option of the OT.initPublisher() method was set to null or false).
  • The user denied access to the audio input device.
  • There was an error acquiring audio from the audio input device or MediaStreamTrack object.
  • The audioSource value is not a string or MediaStreamTrack object.
  • The audioSource string is not a valid audio input device available to the browser.

Parameters:
Name Type Description
audioSource Object The device ID (string) of an audio input device, or an audio MediaStreamTrack object.
See:
Returns:
A promise that resolves when the operation completes successfully. If there is an error, the promise is rejected.

setStyle(style, value) → {Publisher}

Sets properties that define the appearance of some user interface controls of the Publisher.

You can either pass one parameter or two parameters to this method.

If you pass one parameter, style, it is an object that has the following properties:

  • audioLevelDisplayMode (String) — How to display the audio level indicator. Possible values are: "auto" (the indicator is displayed when the video is disabled), "off" (the indicator is not displayed), and "on" (the indicator is always displayed).
  • archiveStatusDisplayMode (String) — How to display the archive status indicator. Possible values are: "auto" (the indicator is displayed when the session is being recorded), "off" (the indicator is not displayed). If you disable the archive status display indicator, you can display your own user interface notifications based on the archiveStarted and archiveStopped events dispatched by the Session object.
  • backgroundImageURI (String) — A URI for an image to display as the background image when a video is not displayed. (A video may not be displayed if you call publishVideo(false) on the Publisher object). You can pass an http or https URI to a PNG, JPEG, or non-animated GIF file location. You can also use the data URI scheme (instead of http or https) and pass in base-64-encrypted PNG data, such as that obtained from the Publisher.getImgData() method (for example, you could call myPublisher.setStyle("backgroundImageURI", myPublisher.getImgData())). If the URL or the image data is invalid, the property is ignored (the attempt to set the image fails silently).
  • buttonDisplayMode (String) — How to display the microphone controls. Possible values are: "auto" (controls are displayed when the stream is first displayed and when the user mouses over the display), "off" (controls are not displayed), and "on" (controls are always displayed).
  • nameDisplayMode (String) — Whether to display the stream name. Possible values are: "auto" (the name is displayed when the stream is first displayed and when the user mouses over the display), "off" (the name is not displayed), and "on" (the name is always displayed).

For example, the following code passes one parameter to the method:

myPublisher.setStyle({nameDisplayMode: "off"});

If you pass two parameters, style and value, they are key-value pair that define one property of the display style. For example, the following code passes two parameter values to the method:

myPublisher.setStyle("nameDisplayMode", "off");

You can set the initial settings when you call the Session.publish() or OT.initPublisher() method. Pass a style property as part of the properties parameter of the method.

The OT object dispatches an exception event if you pass in an invalid style to the method. The code property of the ExceptionEvent object is set to 1011.

Parameters:
Name Type Description
style Object Either an object containing properties that define the style, or a String defining this single style property to set.
value String The value to set for the style passed in. Pass a value for this parameter only if the value of the style parameter is a String.

See:
Returns:
The Publisher object

setVideoContentHint(videoContentHint)

Sets the content hint for the video track of the publisher's stream. This allows browsers to use encoding or processing methods more appropriate to the type of content.

Use this method to change the video content hit dynamically. Set the initial video content hit by setting the videoContentHint property of the options passed into the OT.initPublisher() method.

Chrome 60+, Safari 12.1+, Edge 79+, and Opera 47+ support video content hints.

Parameters:
Name Type Description
videoContentHint String You can set this to one of the following values:

  • "" — No hint is provided.
  • "motion" — The track should be treated as if it contains video where motion is important. For example, you may use this setting for a screen-sharing stream that contains video.
  • "detail" — The track should be treated as if video details are extra important. For example, you may use this setting for a screen-sharing stream that contains text content, painting, or line art.
  • "text" — The track should be treated as if text details are extra important. For example, you may use this setting for a screen-sharing stream that contains text content.
See:

setVideoMediaProcessorConnector(mediaProcessorConnector) → {Promise}

Sets a MediaProcessorConnector for the publisher video track. A publisher can have only one video MediaProcessorConnector applied at one time. When you set a new connector, the previously set video connector is removed.

This method is incompatible with the Publisher.applyVideoFilter() method. Calling this method after Publisher.applyVideoFilter(filter) returns a promise rejected with an error, with the name property of the error set to 'OT_NOT_SUPPORTED'. You can clear the video filter by calling Publisher.clearVideoFilter().

Note: MediaProcessors are only supported in recent versions of Chrome, Electron, Opera, and Edge. They are not supported in other (non-Chromium-based) browsers or on iOS. You can check if the client supports this feature by calling the OT.hasMediaProcessorSupport() method.

Important: Media processors require adequate processor support. Even in supported browsers, transformers may not be stable when background processes limit available processing resources. See Client requirements.

Calling this method results in an error (the Promise returned by the method is rejected) in the following conditions:

  • There are no video input devices (cameras) available.
  • A video filter has already been applied via the Publisher.applyVideoFilter() method.
  • There was an error acquiring video from the video input device.
  • There was an error acquiring the processed track from the MediaProcessorConnector.

You can clear the current connector by calling this method with null.

For more information, see the Using the Vonage Media Processor library developer guide.

Parameters:
Name Type Description
mediaProcessorConnector MediaProcessorConnector A MediaProcessorConnector instance. See the Vonage Media Processor library docs.
See:
Returns:
A promise that resolves when the operation completes successfully. If there is an error, the promise is rejected and no connector is set.

setVideoSource(videoSourceId) → {Promise}

This method sets the video source for a publisher that is using a camera. Pass in the device ID of the new video source.

The following will result in errors:

  • If the videoSourceId parameter is not a string or the device ID for a valid video input device, the promise will reject with an error with the name property set to 'OT_INVALID_VIDEO_SOURCE'.
  • If the publisher does not currently use a camera input, the promise will reject with an error with the name property set to 'OT_SET_VIDEO_SOURCE_FAILURE'.
Parameters:
Name Type Description
videoSourceId String The device ID of a video input (camera) device.
See:
Returns:
A promise that resolves with no value when the operation completes successfully. If there is an error, the promise is rejected.

videoHeight() → {Number}

Returns the height, in pixels, of the Publisher video. This may differ from the resolution property passed in as the properties property the options passed into the OT.initPublisher() method, if the browser does not support the requested resolution.
Returns:
the height, in pixels, of the Publisher video.

videoWidth() → {Number}

Returns the width, in pixels, of the Publisher video. This may differ from the resolution property passed in as the properties property the options passed into the OT.initPublisher() method, if the browser does not support the requested resolution.
Returns:
the width, in pixels, of the Publisher video.

Events

accessAllowed

Dispatched when the user has clicked the Allow button, granting the app access to the camera and microphone. The Publisher object has an accessAllowed property which indicates whether the user has granted access to the camera and microphone.
See:

accessDenied

Dispatched when the user has clicked the Deny button, preventing the app from having access to the camera and microphone.

This event is also dispatched if the user removes the permissions after previously granting them. This is a beta feature.

Note: On macOS 10.15+ (Catalina), to publish a screen-sharing stream the user must grant the browser access to the screen in macOS System Preferences > Security & Privacy > Privacy > Screen Recording. Otherwise, the Publisher will dispatch an accessDenied event.

See:

accessDialogClosed

Dispatched when the Allow/Deny box is closed. (This is the dialog box in which the user can grant the app access to the camera and microphone.)
See:

accessDialogOpened

Dispatched when the Allow/Deny dialog box is opened. (This is the dialog box in which the user can grant the app access to the camera and microphone.)
See:

audioInputDeviceChanged

Dispatched when the audio input device is changed.

This is a beta feature.

See:

audioLevelUpdated

Dispatched periodically to indicate the publisher's audio level. The event is dispatched up to 60 times per second, depending on the browser. The audioLevel property of the event is audio level, from 0 to 1.0. See AudioLevelUpdatedEvent for more information.

The following example adjusts the value of a meter element that shows volume of the publisher. Note that the audio level is adjusted logarithmically and a moving average is applied:

var movingAvg = null;
publisher.on('audioLevelUpdated', function(event) {
  if (movingAvg === null || movingAvg <= event.audioLevel) {
    movingAvg = event.audioLevel;
  } else {
    movingAvg = 0.7 * movingAvg + 0.3 * event.audioLevel;
  }

  // 1.5 scaling to map the -30 - 0 dBm range to [0,1]
  var logLevel = (Math.log(movingAvg) / Math.LN10) / 1.5 + 1;
  logLevel = Math.min(Math.max(logLevel, 0), 1);
  document.getElementById('publisherMeter').value = logLevel;
});

This example shows the algorithm used by the default audio level indicator displayed in an audio-only Publisher.

See:

destroyed

Dispatched when the Publisher element is removed from the HTML DOM. When this event is dispatched, you may choose to adjust or remove HTML DOM elements related to the publisher.

mediaStopped

The user publishing the stream has stopped sharing one or all media types (video, audio and/or screen). This can occur when a user disconnects a camera or microphone used as a media source for the Publisher. Or it can occur when a user closes a when the video and audio sources of the stream are MediaStreamTrack elements and tracks are stopped or destroyed.
See:

mediaStreamAvailable

This is a beta feature. Dispatched when the MediaStream is available.
See:

muteForced

A moderator has forced this client to mute audio.
See:

streamCreated

The publisher has started streaming to the session.
See:

streamDestroyed

The publisher has stopped streaming to the session. The default behavior is that the Publisher object is removed from the HTML DOM. The Publisher object dispatches a destroyed event when the element is removed from the HTML DOM. If you call the preventDefault() method of the event object in the event listener, the default behavior is prevented, and you can, optionally, retain the Publisher for reuse or clean it up using your own code.
See:

videoDimensionsChanged

Dispatched when the video dimensions of the video change. This can only occur in when the stream.videoType property is set to "screen" (for a screen-sharing video stream), when the user resizes the window being captured. This event object has a newValue property and an oldValue property, representing the new and old dimensions of the video. Each of these has a height property and a width property, representing the height and width, in pixels.
See:

videoDisabled

Dispatched when the video for the publisher is disabled.

Before sending this event, when the Publisher's stream quality deteriorates to a level that is low enough that the video stream is at risk of being disabled, the Publisher dispatches a videoDisableWarning event.

If connectivity improves to support video again, the Publisher object dispatches a videoEnabled event, and the Subscriber resumes receiving video.

By default, the Publisher displays a video disabled indicator when a videoDisabled event with this reason is dispatched and removes the indicator when the videoEnabled event with this reason is dispatched. You can control the display of this icon by setting the videoDisabledDisplayMode with the Publisher.setStyle() method or by setting the videoDisabledDisplayMode style property when initializing the Publisher with the OT.initPublisher() method.

You can enable this audio-only fallback feature, by setting the publisher property to true in the audioFallbackEnabled option passed into the OT.initPublisher() method for the publishing client. (See OT.initPublisher().)

This is a beta feature.

See:

videoDisableWarning

Dispatched when the Publisher determines that the stream quality has degraded and the video will be disabled if the quality degrades more. If the quality degrades further, the Publisher disables the video and dispatches a videoDisabled event.

By default, the Publisher displays a video disabled warning indicator when this event is dispatched (and the video is disabled). You can control the display of this icon by calling the setStyle() method of the Publisher and setting the videoDisabledDisplayMode property, or you can set the videoDisabledDisplayMode property when calling the OT.initPublisher() method and setting the style property of the properties parameter.

This is a beta feature.

See:

videoDisableWarningLifted

Dispatched when the Publisher determines that the stream quality has improved to the point at which the video being disabled is not an immediate risk. This event is dispatched after the Publisher object dispatches a videoDisableWarning event.

This is a beta feature.

See:

videoElementCreated

Dispatched when the Publisher's video element is created. Add a listener for this event when you set the insertDefaultUI option to false in the call to the OT.initPublisher() method. The element property of the event object is a reference to the Publisher's video element (or in Internet Explorer the object element containing the video). Add it to the HTML DOM to display the video. When you set the insertDefaultUI option to false, the video (or object) element is not automatically inserted into the DOM.

Add a listener for this event only if you have set the insertDefaultUI option to false. If you have not set insertDefaultUI option to false, do not move the video (or object) element in in the HTML DOM. Doing so causes the Publisher object to be destroyed.

See:

videoEnabled

Dispatched when the Publisher resumes sending video to the publisher after video was previously disabled.

This is a beta feature.

See: