Suggestions

close search

Back to Basic Video Chat Overview

Basic Video Chat Step 7: Adding user interface controls

  1. 1
    Basic Video Chat Step 1:
    Setting up the test web service
  2. 2
    Basic Video Chat Step 2:
    Configuring and testing the app
  3. 3
    Basic Video Chat Step 3:
    Initializing an OpenTok session
  4. 4
    Basic Video Chat Step 4:
    Connecting to the session
  5. 5
    Basic Video Chat Step 5:
    Publishing a stream to the session
  6. 6
    Basic Video Chat Step 6:
    Subscribing to audio-video streams
  7. 7
    Basic Video Chat Step 7:
    Customizing the UI

This code adds buttons to mute the publisher and subscriber audio and to toggle the publisher camera.

Muting the publisher and subscriber

When the user clicks the toggle publisher audio button, the [self togglePublisherMic] method is called:

-(void)togglePublisherMic
{
    _publisher.publishAudio = !_publisher.publishAudio;
    UIImage *buttonImage;
    if (_publisher.publishAudio) {
        buttonImage = [UIImage imageNamed: @"mic-24.png"];
    } else {
        buttonImage = [UIImage imageNamed: @"mic_muted-24.png"];
    }
    [_publisherAudioBtn setImage:buttonImage forState:UIControlStateNormal];
}

The publishAudio property of the OTPublisher object is set to a Boolean value indicating whether the publisher is publishing audio or not. The method toggles the setting when the user clicks the button.

Similarly, the subscribeToAudio property of the OTSubscriber object is a Boolean value indicating whether the local iOS device is playing back the subscribed stream's audio or not. When the user clicks the toggle audio button for the Subscriber, the following method is called:

-(void)toggleSubscriberAudio
{
    _subscriber.subscribeToAudio = !_subscriber.subscribeToAudio;
    UIImage *buttonImage;
    if (_subscriber.subscribeToAudio) {
        buttonImage = [UIImage imageNamed: @"Subscriber-Speaker-35.png"];
    } else {
        buttonImage = [UIImage imageNamed: @"Subscriber-Speaker-Mute-35.png"];
    }
    [_subscriberAudioBtn setImage:buttonImage forState:UIControlStateNormal];
}

Changing the camera used by the publisher

When the user clicks the toggle camera button, the [self swapCamra] method is called:

-(void)swapCamera
{
    if (_publisher.cameraPosition == AVCaptureDevicePositionFront) {
        _publisher.cameraPosition = AVCaptureDevicePositionBack;
    } else {
        _publisher.cameraPosition = AVCaptureDevicePositionFront;
    }
}

Setting the cameraPosition property of the OTPublisher object sets the camera used by the publisher. The AVCaptureDevicePositionFront and AVCaptureDevicePositionBack constants are defined in the AVCaptureDevice class.

  1. 1
    Basic Video Chat Step 1:
    Setting up the test web service
  2. 2
    Basic Video Chat Step 2:
    Configuring and testing the app
  3. 3
    Basic Video Chat Step 3:
    Initializing an OpenTok session
  4. 4
    Basic Video Chat Step 4:
    Connecting to the session
  5. 5
    Basic Video Chat Step 5:
    Publishing a stream to the session
  6. 6
    Basic Video Chat Step 6:
    Subscribing to audio-video streams
  7. 7
    Basic Video Chat Step 7:
    Customizing the UI