Play Transparent Gift Effects

Feature Overview

In scenarios such as audio chat rooms and live streaming, gifts are an important part of the interaction between hosts and viewers. Exquisite gift effects can enhance the sense of interaction and improve the viewing experience. With the vigorous development of the industry, gift effects have also evolved from static to dynamic, and from opaque to transparent.

Playing gift videos in MP4 format to achieve dynamic gift effects is a relatively common approach. Since MP4 does not support Alpha channels, when playing gift effects in full screen, it will block the live room content, thereby affecting user experience. Therefore, the ZEGO Express SDK media player provides transparent rendering capability, which can implement the function of playing transparent dynamic gifts.

The ZEGO Express SDK media player provides the capability to play MP4 materials with separated RGB and Alpha channels (MP4 materials after splicing RGB and Alpha), achieving the dynamic effect of playing transparent gifts. That is, when playing gift effects, it will not block the live room content, greatly improving user experience.

Feature Advantages

• Low Development Cost

  Developers do not need to learn complex animation implementation solutions. They only need to use materials processed by designers to implement playing transparent gift effects, improving development efficiency and effectiveness.

• High Animation Fidelity

  Help designers achieve WYSIWYG output materials. That is, when designers are designing motion effects, they do not need to worry about whether the technology stack used by developers can restore complex 3D effects, strokes, particle effects, etc.

• Good Compatibility

  Avoid the problems of complex implementation, low performance, poor compatibility with some device models, and high maintenance difficulty in the later stage of semi-transparent motion effects such as Lottie and Cocos2d-X.

Implementation Principle

As shown in the figure below, the upper part of the figure shows some pixel points of a material with Alpha channel separation. The left side uses the RGB channel to store the RGB channel information of the gift material, and the right side uses the RGB channel to store the Alpha channel information of the gift material.

During playback, the client extracts the R channel of the video on the right as the value of the Alpha channel of the corresponding pixel on the left.

During rendering, the Alpha channel value is divided by 255 for normalization to obtain an Alpha value between 0 and 1. Finally, each pixel is rendered on the screen according to the RGBA value to achieve a semi-transparent effect.

Sample Source Code Download

Please refer to Download Sample Source Code to obtain the source code.

For related source code, please check the files in the "/ZegoExpressExample/Examples/Others/MediaPlayer" directory.

Prerequisites

Before using the media player to play MP4 dynamic effects, that is, to implement playing transparent gift effects, please ensure:

• A project has been created in the ZEGOCLOUD Console, and valid AppID and AppSign have been obtained. For details, please refer to Console - Project Information.
• ZEGO Express SDK has been integrated into the project, and basic audio/video publishing and playing functionality has been implemented. For details, please refer to Quick Start - Integration and Quick Start - Implementation.

Implementation Steps

1 Export Materials

Taking exporting materials in AE software as an example.

1. In AE, normally create a video with transparency effects, and export RGB and Alpha channel videos separately.

   • Export the RGB channel video.
     
   • Export the Alpha channel video.
     

2. In AE, splice the exported RGB and Alpha channel videos into one video.

   ZEGO media player supports the following four splicing methods. The more square the spliced video is, the better the performance. Developers can choose the appropriate splicing method according to the proportion of the source material:

   • Alpha channel at the bottom.
     
   • Alpha channel on the left.
     
   • Alpha channel on the right.
     
   • Alpha channel at the top right, Alpha channel only supports 0.5x scaling rate.
     

2 Create Media Player

Call createMediaPlayer to create a media player, and call setPlayerCanvas to set the alphaBlend property of the player canvas to true.

ZegoCanvas canvas(mediaPlayerView);// mediaPlayerView is the media player view
canvas.alphaBlend = true;// Support Alpha channel rendering
mediaPlayer->setPlayerCanvas(&canvas);

ZegoCanvas canvas(mediaPlayerView);// mediaPlayerView is the media player view
canvas.alphaBlend = true;// Support Alpha channel rendering
mediaPlayer->setPlayerCanvas(&canvas);

3 Load Materials

After calling createMediaPlayer to create a media player, use the loadResourceWithConfig interface to play the spliced effect materials through file path or binary memory data.

  ZegoMediaPlayerResource resource;
  resource.loadType = ZEGO_MULTIMEDIA_LOAD_TYPE_MEMORY;// Select file path loading method
  resource.filePath = "filePath";// File path
  resource.alphaLayout = ZEGO_ALPHA_LAYOUT_TYPE_LEFT;// Select Alpha channel layout according to actual resources
  mediaPlayer->loadResourceWithConfig(resource, [=](int errorCode){
      // Resource loading result
      // Can perform logic such as updating UI
      if (errorCode == 0) {
          // File loaded successfully, can start playing media resources at this time
          mediaPlayer->start();
      }
  });

  ZegoMediaPlayerResource resource;
  resource.loadType = ZEGO_MULTIMEDIA_LOAD_TYPE_MEMORY;// Select file path loading method
  resource.filePath = "filePath";// File path
  resource.alphaLayout = ZEGO_ALPHA_LAYOUT_TYPE_LEFT;// Select Alpha channel layout according to actual resources
  mediaPlayer->loadResourceWithConfig(resource, [=](int errorCode){
      // Resource loading result
      // Can perform logic such as updating UI
      if (errorCode == 0) {
          // File loaded successfully, can start playing media resources at this time
          mediaPlayer->start();
      }
  });

4 Play Materials

After successfully loading the file by calling loadResourceWithConfig, you can call start, pause, resume, stop to start and stop playback. Once the player's internal state changes, the onMediaPlayerStateUpdate callback of IZegoMediaPlayer will be triggered.

Developers can also call getCurrentState at any time to get the current state of the player.

If enableRepeat is set to true, the player will automatically replay after finishing playing the file.

// Start playback, need to call the interface to load media file first before playing
mediaPlayer->start();
// Pause
mediaPlayer->pause();
// Resume
mediaPlayer->resume();
// Stop
mediaPlayer->stop();

// Start playback, need to call the interface to load media file first before playing
mediaPlayer->start();
// Pause
mediaPlayer->pause();
// Resume
mediaPlayer->resume();
// Stop
mediaPlayer->stop();