Suggestions

close search

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.

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
}

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.

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).