Suggestions

close search

Back to Basic Video Chat Overview

Basic Video Chat Step 5: Publishing an audio visual stream to the session

  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
  1. In Xcode, launch the app in a connected iOS device or in the iOS simulator.

  2. On first run, the app asks you for access to the camera:

    LearningOpenTok would like to Access the Camera: Don't Allow / OK

    iOS OS requires apps to automatically ask the user to grant camera permission to an app.

    The published stream appears in the lower-lefthand corner of the video view. (The main storyboard of the app defines many of the views and UI controls used by the app.)

  3. Now close the app and find the test.html file in the root of the project. You will use the test.html file (in located in the root directory of this project), to connect to the OpenTok session and publish an audio-video stream from a web browser:

    • Edit the test.html file and set the sessionCredentialsUrl variable to match the SAMPLE_SERVER_BASE_URL property used in the iOS app. Or — if you are using hard-coded session ID, token, and API key settings — set the apiKey,sessionId, and token variables.

    • Add the test.html file to a web server. (You cannot run WebRTC videos in web pages loaded from the desktop.)

    • In a browser, load the test.html file from the web server.

  4. Run the iOS app again. The app will send an audio-video stream to the web client and receive the web client's stream.

  5. Click the mute mic button (below the video views).

    This mutes the microphone and prevents audio from being published. Click the button again to resume publishing audio.

  6. Click the mute mic button in the subscribed stream view.

    This mutes the local playback of the subscribed stream.

  7. Click the swap camera button (below the video views).

    This toggles the camera used (between front and back) for the published stream.

Upon successfully connecting to the OpenTok session (see the previous section), the [OTSessionDelegate session:didConnect:] message is sent. The ViewController.m code implements this delegate method:

- (void)sessionDidConnect:(OTSession*)session
{
    // We have successfully connected, now start pushing an audio-video stream
    // to the OpenTok session.
    [self doPublish];
}

The method calls the [self doPublish] method, which first initializes an OTPublisher object, defined by the OpenTok iOS SDK:

_publisher = [[OTPublisher alloc]
              initWithDelegate:self];

The code calls the [OTSession publish:error:] method to publish an audio-video stream to the session:

OTError *error = nil;
[_session publish:_publisher error:&error];
if (error)
{
    NSLog(@"Unable to publish (%@)",
          error.localizedDescription);
}

It then adds the publisher's view, which contains its video, as a subview of the _publisherView UIView element, defined in the main storyboard.

[_publisher.view setFrame:CGRectMake(0, 0, _publisherView.bounds.size.width,
                                   _publisherView.bounds.size.height)];
[_publisherView addSubview:_publisher.view];

This app sets self to implement the OTPublisherDelegate interface and receive publisher-related events.

Upon successfully publishing the stream, the implementation of the [OTPublisherDelegate publisher:streamCreated] method is called:

- (void)publisher:(OTPublisherKit *)publisher
streamCreated:(OTStream *)stream
{
    NSLog(@"Now publishing.");
}

If the publisher stops sending its stream to the session, the implementation of the [OTPublisherDelegate publisher:streamDestroyed] method is called:

- (void)publisher:(OTPublisherKit*)publisher
streamDestroyed:(OTStream *)stream
{
    [self cleanupPublisher];
}

The [self cleanupPublisher:] method removes the publisher's view (its video) from its superview:

- (void)cleanupPublisher {
    [_publisher.view removeFromSuperview];
    _publisher = nil;
}
  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