Node2D plugin example

This example is a use case for using Kanzi Engine plugins. The example shows how to create a custom 2D node VideoView2D in a Kanzi Engine plugin. The VideoView2D node renders video files whose resolution is divisible by 2 and are encoded with the MPEG-4 codec. The VideoView2D node does not play the audio track in video files. On Android, the example uses a shared image texture utilizing OES_EGL_image_external extension for streaming the video from an external context.

The example runs on Windows and Android platforms:

  • Windows platform uses Microsoft Media Foundation for video playback. You can find the source files for the Windows platform in <KanziWorkspace>/Examples/Node2D_plugin/Application/src/platform_specific/win32/src.

    Note

    To run the Node2D plugin example on Windows 10 N and Windows 10 KN versions, you must install the Media feature pack provided by Microsoft.

  • Android platform uses the native media player. You can find the source files for the Android platform in <KanziWorkspace>/Examples/Node2D_plugin/Application/src/platform_specific/android/src.

  • You can find the code common to both platforms in <KanziWorkspace>/Examples/Node2D_plugin/Application/src/plugin.

You can find the example in the <KanziWorkspace>/Examples/Node2D_plugin directory. The video file is stored in the Application/bin directory.

To learn how to create a Kanzi Engine plugin, see Creating Kanzi Engine plugins.

Using the external texture handle

Android native code and Kanzi application framework run in different context, which is why they cannot share the GPU resources. A widely available OpenGL extension (GL_TEXTURE_EXTERNAL_OES) provides the support for external texture resources that can be shared between contexts with few limitations. The Node2D_plugin example uses the Android media player to render a video stream to a surface view that is bound to the external texture handle. On the Kanzi side, the texture of the node that renders the video is bound to the same external texture handle, and displayed in the render loop.

You can use this approach on other platforms where:

  • The device supports the GL_TEXTURE_EXTERNAL_OES extension.

  • A service in another context is capable of providing a texture bound to an external texture handle.

A typical example is a streaming video.

Running the example

To run the example:

  1. Open the command line in the <KanziWorkspace>/Examples/Node2D_plugin/Application directory and run

    generate_cmake_vs2017_solution.bat

    This script generates a Visual Studio solution for the application in the directory <KanziWorkspace>/Examples/Node2D_plugin/Application/build_vs2017.

    Tip

    You can open the project directory from Kanzi Studio by selecting File > Open in Windows Explorer.

    ../../_images/open-in-windows-explorer1.png

  2. In Visual Studio open the <KanziWorkspace>/Examples/Node2D_plugin/Application/build_vs2017/Node2D_plugin.sln Visual Studio solution.

  3. In Visual Studio in the Solution Explorer right-click the Node2D_plugin_executable project and select Set as StartUp Project.

  4. Select the solution configuration that you want to use and run your application.

    During development select the Debug configuration. When you are ready to create a version for production, select the Release configuration.

    ../../_images/debug-configuration1.png