Play Transparent Gift Effects

Feature Introduction

In scenarios such as audio chat rooms and live streaming, gifts are an important part of the interaction between streamers 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 gradually evolved from static to dynamic, and from opaque to transparent.

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

The ZEGO Express SDK media player provides the function of playing MP4 materials (MP4 materials after splicing RGB and Alpha) with separated RGB channel and Alpha channel, achieving the dynamic effect of playing transparent gifts. That is, when playing gift effects, it will not block the content of the live room, greatly improving the 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 achieve playing transparent gift effects, improving development efficiency and effects.

• High animation restoration

  Help designers achieve WYSIWYG output materials. That is, when designers design 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 methods, low performance, large compatibility issues with some models, and high difficulty in later maintenance 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 pixels 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 client playback, the R channel of the video on the right will be extracted and used as the value of the Alpha channel of the corresponding pixel on the left.

During rendering, the value of the Alpha channel 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

Please refer to Download Sample Source Code to get 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 achieve playing transparent gift effects, please ensure:

• You have created a project in the ZEGOCLOUD Console and applied for a valid AppID and AppSign. For details, please refer to Console - Project Information.
• You have integrated ZEGO Express SDK in the project and implemented basic audio and video publishing and playing functions. For details, please refer to Quick Start - Integration and Quick Start - Implementation Flow.

Implementation Flow

1 Output materials

Taking outputting materials in AE software as an example.

1. Normally create a video with transparent effects in AE, and output RGB and Alpha channel videos separately.

   • Output RGB channel video.
     
   • Output Alpha channel video.
     

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

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

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

2 Make special settings for view

Before playing transparent gift effects, you need to set the view used by the player to render transparent effects, that is, call setBackgroundColor to set the backgroundColor property to clearColor.

@property (weak, nonatomic) IBOutlet UIView *mediaPlayerView;
[self.mediaPlayerView setBackgroundColor:UIColor.clearColor];

@property (weak, nonatomic) IBOutlet UIView *mediaPlayerView;
[self.mediaPlayerView setBackgroundColor:UIColor.clearColor];

3 Create media player

Call createMediaPlayer to create a media player. Call setPlayerCanvas to set the alphaBlend property of the player canvas to YES.

ZegoCanvas *canvas = [ZegoCanvas canvasWithView:self.mediaPlayerView];
canvas.alphaBlend = YES;//Support Alpha channel rendering
[self.mediaPlayer setPlayerCanvas:canvas];

ZegoCanvas *canvas = [ZegoCanvas canvasWithView:self.mediaPlayerView];
canvas.alphaBlend = YES;//Support Alpha channel rendering
[self.mediaPlayer setPlayerCanvas:canvas];

4 Load materials

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

  ZegoMediaPlayerResource *resource = [[ZegoMediaPlayerResource alloc]init];
  resource.loadType = ZegoMultimediaLoadTypeFilePath;//Loading method selects file path loading
  resource.filePath = @"fileURL";//File path
  resource.alphaLayout = ZegoAlphaLayoutTypeLeft;//Select Alpha channel layout according to actual resources
  [self.mediaPlayer loadResourceWithConfig:resource callback:^(int errorCode) {
      //Resource loading result
      // Can perform logic such as updating UI
      if (errorCode == 0) {
          //File loaded successfully, now you can start playing media resources
          [self.mediaPlayer start];
      }
  }];

  ZegoMediaPlayerResource *resource = [[ZegoMediaPlayerResource alloc]init];
  resource.loadType = ZegoMultimediaLoadTypeFilePath;//Loading method selects file path loading
  resource.filePath = @"fileURL";//File path
  resource.alphaLayout = ZegoAlphaLayoutTypeLeft;//Select Alpha channel layout according to actual resources
  [self.mediaPlayer loadResourceWithConfig:resource callback:^(int errorCode) {
      //Resource loading result
      // Can perform logic such as updating UI
      if (errorCode == 0) {
          //File loaded successfully, now you can start playing media resources
          [self.mediaPlayer start];
      }
  }];

5 Play materials

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

Users can also call currentState to get the current state of the player at any time.

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

// Start playing, you need to call the interface to load media files before playing
[self.mediaPlayer start];
// Pause
[self.mediaPlayer pause];
// Resume
[self.mediaPlayer resume];
// Stop
[self.mediaPlayer stop];

// Start playing, you need to call the interface to load media files before playing
[self.mediaPlayer start];
// Pause
[self.mediaPlayer pause];
// Resume
[self.mediaPlayer resume];
// Stop
[self.mediaPlayer stop];