Overlay UI on Video Stream

Often times, a project may require to overlay video/audio controls and camera controls on-top of a video stream. You can see examples of this, inside of FaceTime, Google Hangouts and other popular WebRTC-like applications.

How it works

Within NativeScript, we have powerful layout structures available to us, to help control the overall positioning and look over UI elements on the native device. You may first gravitate towards using an AbsoluteLayout to accomplish placing your buttons over the stream, but there is an easier way: GridLayout. By using the concept of placing elements on the same row, we can easily control overlaying UI, while still having an auto-sizing element that behaves consistently on different screen sizes.

Step 1 - Define a Parent GridLayout

You will need to define a layout that fills the device container space (if you want a full screen video stream), this can be accomplished with a GridLayout.

Example:

<GridLayout rows="*,auto,auto">
    <!-- Content will go here -->
</GridLayout>

Step 2 - Build Video Stream UI

Next you will need to construct the video stream elements for the publisher and optionally the subscriber. As a good practice, I additionally wrap these elements in a GridLayout.

<GridLayout>
    <StackLayout id="subscriber" width="100%" height="100%"></StackLayout>
    <OT:TNSOTPublisher id="publisher" sessionId="{{ sessionId }}" api="{{ api }}" token="{{ publisherToken }}" verticalAlignment="top" horizontalAlignment="right" margin="10" width="100" height="100"></OT:TNSOTPublisher>
</GridLayout>

There's nothing too special about this structure. By not using the row property to specify a row for the elements to render to, they will automatically render on-top of each other on row 0. It is important to define the bottom UI first, as the XML will render top-to-bottom.

Note: The only way for the plugin to recognize the subscriber container, is by defining id="subscriber". Do not forget to include this definition.

Step 3 - Build Overlay UI

Now we will define our overlaying UI. You can use any layout structure that you wish. I personally used a StackLayout to arrange the buttons together in a consistent way.

<StackLayout verticalAlignment="bottom" marginBottom="50">
    <StackLayout>
        <Button text="Switch Camera" tap="{{ switchCamera }}" />
        <Button text="Toggle Camera" tap="{{ toggleVideo }}" />
        <Button text="Toggle Mute" tap="{{ toggleMute }}" />
    </StackLayout>
</StackLayout>

---

Having issues or questions?

Move over to the issues section to open up a question request. Thank you for using NativeScript OpenTok plugin.