Publish: Basics

This guide covers the essential steps to publish a stream: creating a Publisher, starting the stream in a session, stopping it safely, and destroying resources when you’re done.

A Publisher object is used to capture an audio-video stream from the systems's microphone and camera for use in a Vonage Video session.

You can also use a Publisher to publish a screen-sharing video stream.

Initializing a publisher object

The OT.initPublisher() method initializes and returns a Publisher object. The Publisher object represents the view of a video you publish:

The OT.initPublisher() method takes three parameters:

  • targetElement— (Optional) Defines the DOM element that the Publisher video replaces.

  • properties— (Optional) A set of properties that customize the Publisher. The properties parameter also includes options to specify an audio and video input device used by the publisher. The properties parameter also includes options for customizing the appearance of view in the HTML page (see Customizing the UI) and select whether to publish audio and video (see Publishing audio or video only).For more publisher options, see the documentation of the properties parameter of the OT.initPublisher() method.

  • completionHandler— (Optional) A completion handler that specifies whether the publisher instantiated successfully or with an error.

You can pass this Publisher object into the Session.publish() method to publish a stream to a session.

Before calling Session.publish(), you can use this Publisher object to test the microphone and camera attached to the Publisher.

The insertMode property of the properties parameter of the OT.initPublisher() method specifies how the Publisher object will be inserted in the HTML DOM, in relation to the targetElement parameter. You can set this parameter to one of the following values:

  • "replace" — The Publisher object replaces contents of the targetElement. This is the default.
  • "after" — The Publisher object is a new element inserted after the targetElement in the HTML DOM. (Both the Publisher and targetElement have the same parent element.)
  • "before" — The Publisher object is a new element inserted before the targetElement in the HTML DOM. (Both the Publisher and targetElement have the same parent element.)
  • "append" — The Publisher object is a new element added as a child of the targetElement. If there are other child elements, the Publisher is appended as the last child element of the targetElement.

For example, the following code adds a new Publisher object as a child of a publisherContainer DOM element:

Publishing a stream

Once you have a Publisher object and a session, the next step is to pass it to the session object to begin streaming.

To publish a stream, add an OTPublisher component as a child of the OTSession object:

The publisher starts streaming when the client connects to the session. The OTPublisher object dispatches a streamCreated event when it starts streaming to the session. It dispatches an error event if there is an error publishing. Set an eventHandlers prop of the OTPublisher component, and set the streamCreated and error properties of that object to callback functions:

Stop a publisher from streaming

Control who can publish and stop a publisher from streaming to a session when needed.

You can stop publisher from streaming to the session by unmounting it (removing it from the parent OTSession component). For example, the following code stops publishing a stream after 30 seconds:

Note that you can individually stop sending video or audio (while still publishing).

Detecting when a published stream leaves a session

The OTPublisher object dispatches a streamDestroyed event when it stops streaming to the session:

Deleting a Publisher (cleanup)

You can delete a Publisher by calling its destroy() method. Calling destroy() deletes the Publisher object and removes it from the HTML DOM: