Mountain View
Jabber SDK API Documentation

Tutorial: Native Video Window Overview

Native Video Window Overview

Title Native Video Window is native window in which different types of video are rendered. There are in total three native window: In this tutorial it will be covered an overview of native video window API.

Dock/Undock

One of the most important native window features. As mentioned in video-window tutorial, native window can be docked to designated HTML element. Support for this feature can be checked through NativeWindowDockingSupport property. When docked native window will appear as if it is an in-browser video. In the snippet below it is shown how to dock native window: 

        // In this example it is assumed that element with id "docking-element" exists
        var video-container = document.getElementById("docking-element");

        // In this example native preview window will be used.
        var nativePreviewWindow = cwic.WindowController.getNativePreviewWindow();

        // Check if docking is supported
        var capabilities = cwic.SystemController.getCapabilities();

        if(capabilities.nativeWindowDockingSupport)
        {
            nativePreviewWindow.dock();
        }
Docked native window can be undocked. Undocking of native window is shown in the snippet below: 

        if(capabilities.nativeWindowDockingSupport)
        {
            nativePreviewWindow.undock();
        }

Docking Target Color (Mac OS)

On Mac OS Docking is implemented somewhat different then on Windows. On Mac CWIC will create a small div in top left corner of the docking target element. That div will consist of two squares. First square will represent target docking color which can be set through NativeVideoWindow.setDockTargetColor method and second square will be black. Docking target color is used to locate target HTML element on the screen and position native window. This capability can be checked via NativeWindowDockingTargetSupport property. In the snippet below it is shown how to set docking target color: 

         // In this example it is assumed that element with id "docking-element" exists
         var video-container = document.getElementById("docking-element");

         // In this example native preview window will be used.
         var nativePreviewWindow = cwic.WindowController.getNativePreviewWindow();

         // Check if docking is supported
         var capabilities = cwic.SystemController.getCapabilities();

         if(capabilities.nativeWindowDockingTargetSupport)
         {
            nativePreviewWindow.setDockTargetColor(0,0,255);
         }

Show/Hide

Native Video Window can be hidden or shown. In the snippet bellow it is shown how to show/hide native window: 

        // In this example native preview window will be used.
        var nativePreviewWindow = cwic.WindowController.getNativePreviewWindow();

        // Show native window
        nativePreviewWindow.show();

        // Hide native window
        nativePreviewWindow.hide();

Other Features

Rest of Native Video Window's features are:
  • Change native window title.
  • Show/Hide native controls.
  • Set native window on top of Z order.
In the snippet bellow example is given how to use these features: 


        // In this example native preview window will be used.
        var nativePreviewWindow = cwic.WindowController.getNativePreviewWindow();

        // Set Title
        nativePreviewWindow.setTitle("Jabber SDK");

        // Show native controls
        nativePreviewWindow.showControls();

        // Hide native controls
        nativePreviewWindow.hideControls();

        // Set on top of Z order.
        nativePreviewWindow.showAlwaysOnTop(true);

Next

Previous