Suggestions

close search

Add Messaging, Voice, and Authentication to your apps with Vonage Communications APIs

Visit the Vonage API Developer Portal

Customizing the UI — Windows

These are the adjustments you can make to customize the user interface of OpenTok videos:

Adding a name for a published stream

You can specify the name of the publisher by calling the name() method of the Publisher.Builder object when you instantiate the Publisher object: 

publisher = new Publisher(Context.Instance,
  renderer: publisherVideoRenderer,
  name: "Bob's video",
  capturer: capturer);

You can use this name to identify the client publishing the stream. The Stream class has a Name property. When you subscribe to a stream, you can display this name in a user interface element.

Adding a mute button for a publisher

There is no default user interface element to mute the publisher's microphone. However, you can add an element, such as a button, that sets the PublishAudio of the Publisher object when the user clicks it. Set the property to false to mute the publisher: 

publisher.PublishAudio = false;

Set the property to true to publish audio. 

publisher.PublishAudio = true;

Adding a mute button for a subscriber

There is no default user interface element to mute the subscriber's audio. However, you can add an element, such as a button, that sets the SubscribeToAudio of the Subscriber object when the user clicks it. Set the property to false to mute the audio: 

subscriber.SubscribeToAudio = false;

Set the property to true to enable audio playback (if the stream has audio): 

subscriber.SubscribeToAudio = true;

Adding a button to toggle the publisher's camera

There is no default user interface element to toggle the camera used by the publisher. However, you can add and element, such as a button, that sets the VideoCapturer property of the Publisher object: 

publisher.VideoCapturer = newCapturer;

For more information, see Using a custom video capturer.

Adjusting user interface when video is enabled or disabled

When a subscriber's video is disabled, the Subscriber object sends a VideoDisabled event. When this occurs, you can add a user interface element (such as an icon) to indicate that the video was disabled: 

subscriber.VideoDisabled += Subscriber_VideoDisabled;

private void Subscriber_VideoDisabled(object sender, EventArgs e) {
    // Display the video disabled indicator
}

When a subscriber's video is reenabled, the Subscriber object sends a VideoEnabled event. When this occurs, you may remove a user interface element (such as an icon) that indicate that the video is reenabled: 

subscriber.VideoEnabled += Subscriber_VideoEnabled;

private void Subscriber_VideoEnabled(object sender, EventArgs e) {
    // Display the video disabled indicator
}

In sessions that use the OpenTok Media Router (sessions with the media mode set to routed), the Subscribe may also send the following events:

You may also want to display and remove a user interface notification (such as an icon) when these events are sent.

Note that when you instantiate a Publisher object, you enable or disable publisher and subscriber audio fallback for the published stream. The audio fallback feature disables video (in publishers and subscribers) when network or CPU conditions do not support video. See Audio fallback (Windows).

If you enable publisher audio fallback, the Publisher dispatches the following audio fallback-related events:

You can display UI indicators in response to these events.

Displaying an indicator element when a session is being archived

When a archive of a session starts recording (or if you connect to a session that is being recorded), the Session object sends an ArchiveStarted event. When the recording stops the Session object sends an ArchiveStopped event. You can add a user interface element, such as an icon displayed in a publisher view, to indicate that a video is being recorded: 

session.ArchiveStarted += Session_ArchiveStarted;
session.ArchiveStopped += Session_ArchiveStopped;

private void Session_ArchiveStarted(object sender, EventArgs e) {
    // Display the archive indicator
}

private void Session_ArchiveStopped(object sender, EventArgs e) {
    // Hide the archive indicator
}

Adjusting user interface based on audio levels

The Subscriber.AudioLevel and Publisher.AudioLevel events are sent on a regular interval with the audio level of the subscriber and publisher. You can use the AudioLevel property of the event arguments to update the display in an audio level meter:

@Override
publisher.AudioLevel += Publisher_AudioLevel;
subscriber.AudioLevel += Subscriber_AudioLevel;

private void Publisher_AudioLevel(object sender, EventArgs e) {
    // Display the audio level based on e.AudioLevel
}

private void Subscriber_AudioLevel(object sender, EventArgs e) {
    // Display the audio level based on e.AudioLevel
}

Note: A publisher's audio level is not available until its stream is published to a session. To get a preview of the audio before the publisher starts streaming to the session, use a custom audio driver.

Using a custom video renderer

By default, publishers use a default video renderer for Windows Presentation Foundation, which is defined by the OpenTok Windows SDK.

You can also specify a renderer for the video by creating a class that implements the IVideoRenderer interface. The interface includes a RenderFrame(frame) method which is called when a new video frame is available. In your implementation of this method, use the frame object passed into the method to create an image to render. Also, at the end of your implementation of this method, be sure to call the Dispose() method of the frame object, to prevent memory leaks.

When you instantiate a Publisher or Subscriber object, you can pass the custom video renderer object into the Publisher() or Subscriber() constructor (as the renderer parameter).