Suggestions

close search

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

Visit the Vonage API Developer Portal

Customizing the UI — Android

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: 

mPublisher = new Publisher.Builder(context)
  .name("Bob's video")
  .build();

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 calls the setPublishAudio() method of the PublisherKit object when the user clicks it. Pass in false to mute the publisher: 

mPublisher.setPublishAudio(false);

Pass in true to publish audio. 

mPublisher.setPublishAudio(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 calls the setSubscribeToAudio() method of the SubscriberKit object when the user clicks it. Pass in false to mute the subscriber 

mSubscriber.setSubscribeToAudio(false);

Pass in true to subscribe to audio (if there is an audio stream): 

mSubscriber.setSubscribeToAudio(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 calls the swapCamera method of the Publisher object: 

mPublisher.swapCamera();

Note that the cameraPosition property is not available in the PublisherKit class. If you are using the PublisherKit class to implement a custom video capturer, you can define the camera used in the custom video capturing code.

Adjusting user interface when video is enabled or disabled

When a subscriber's video is disabled, the SubscriberKit.VideoListener.onVideoDisabled(subscriber, reason) method is called. When this occurs, you can add a user interface element (such as an icon) to indicate that the video was disabled: 

@Override
public void onVideoDisabled(SubscriberKit subscriber, String reason) {
    // Display the video disabled indicator
}

When a subscriber's video is reenabled, the SubscriberKit.VideoListener.onVideoEnabled(subscriber, reason) method is called. When this occurs, you may remove a user interface element (such as an icon) that indicate that the video is reenabled: 

@Override
public void onVideoEnabled(SubscriberKit subscriber, String reason) {
    // Display the video disabled indicator
}

In sessions that use the OpenTok Media Router (sessions with the media mode set to routed), the SubscriberKit.VideoListener may also call the following methods:

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

Note that when you publish a stream, you enable or disable publisher and subscriber audio fallback. The audio fallback feature disables video (in publishers and subscribers) when network or CPU conditions do not support video. See Audio fallback (Android).

If you enable publisher audio fallback, callback methods of the PublisherKit.VideoListener are invoked for publisher 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.ArchiveListener.onArchiveStarted(session, name) method is called. When the recording stops the Session.ArchiveListener.onArchiveStopped(session, name) method is called. You can add a user interface element, such as an icon displayed in a publisher view, to indicate that a video is being recorded: 

@Override
public void onArchiveStarted(Session session, String id, String name) {
    // Display the archive indicator
}

@Override
public void onArchiveStopped(Session session, String id, String name) {
    // Hide the archive indicator
}

Adjusting user interface based on audio levels

The SubscriberKit.AudioLevelListener.onAudioLevelUpdated(subscriber, audioLevel) and PublisherKit.AudioLevelListener.onAudioLevelUpdated(publsiher, audioLevel) messages are sent on a regular interval with the audio level of the subscriber and publisher. You can use the audioLevel value to update the display in an audio level meter:

@Override
public void onAudioLevelUpdated(
        SubscriberKit subscriber, float audioLevel) {
    // Adjust an audio meter UI element based on the audioLevel value.
}

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

The Subscriber and Publisher classes implement a standard video renderer that renders the stream and provides user interface controls for displaying the stream name and muting the microphone or camera. You can use the SubscriberKit and PublisherKit classes to implement a custom video renderer.

The OpenTok Android SDK includes a BaseVideoRenderer class. Override this class to create a custom video renderer.

After instantiating a PublisherKit object, you can set a custom video renderer by calling the setRenderer() method of the PublisherKit object: 

mPublisher = new PublisherKit(MyClass.this, "publisher");

// Use a custom video renderer.
// MyVideoRenderer extends BaseVideoRenderer
mRenderer = new MyVideoRenderer();
mPublisher.setRenderer(new mRenderer);

The SubscriberKit class also has a setRenderer() method.

The onFrame() method of the BaseVideoRenderer class is called when a new frame is available: 

    public void onFrame(Frame frame) {
        // The new frame is available.
    }

The frame is a BaseVideoRenderer.Frame object. This object includes a getBuffer() that returns the byte buffer containing the video frame data. You can use this byte buffer to add the video frame image to the publisher's view.

For an example, see the OpenTokVideoRenderer class in the OpenTokHelloWorld sample application.

You can also set up a publisher to use a custom video capturer.