Playing Transparent Gift Effects
Introduction
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 interactivity and improve the viewing experience. With the booming development of the industry, gift effects have gradually evolved from static to dynamic, and from opaque to transparent.
Playing MP4 gift videos to achieve dynamic gift effects is a relatively common method. Since MP4 does not support Alpha channels, when playing gift effects in full screen, it will block the content of the live streaming room, thereby affecting user experience. Therefore, ZEGO Express SDK media player provides transparent rendering capability, which can achieve the function of playing transparent dynamic gifts.
ZEGO Express SDK media player provides the function of playing MP4 materials (MP4 materials after splicing RGB and Alpha) by separating RGB channel and Alpha channel, achieving the dynamic effect of playing transparent gifts, that is, when playing gift effects, it will not block the live streaming 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 achieve playing transparent gift effects, improving development efficiency and effects.
-
High Animation Fidelity
Helps designers achieve WYSIWYG output of materials. That is, when designing motion effects, designers do not need to worry about whether the technology stack used by developers can restore complex 3D effects, stroke effects, particle effects, etc.
-
Good Compatibility
Avoids the problems of complex implementation, low performance, large compatibility issues with some models, and high maintenance difficulty 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 that has undergone 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 Alpha channel value 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 based on the RGBA value to achieve the semi-transparent effect.
Sample Source Code
Please refer to Download Sample Source Code to obtain the source code.
For related source code, please check 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:
- A project has been created in the ZEGO 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 streaming functionality has been implemented. 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.
-
Normally create a video with transparency effects in AE, and output RGB and Alpha channel videos separately.
- Output the RGB channel video.
- Output the Alpha channel video.
- Output the RGB channel video.
-
In AE, splice the output RGB and Alpha channel videos into one video.
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 source materials:
- 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.
- Alpha channel at the bottom.
1 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;//Supports Alpha channel rendering
[self.mediaPlayer setPlayerCanvas:canvas];4 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.
Although the loadResourceWithConfig interface supports loading multimedia resources through copyrighted music resource IDs, copyrighted music currently does not support video, so gift effects cannot be loaded through the copyrighted music resource ID loading method.
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 resource
[self.mediaPlayer loadResourceWithConfig:resource callback:^(int errorCode) {
//Resource loading result
// Can execute logic such as updating UI
if (errorCode == 0) {
//File loaded successfully, can now start playing media resource
[self.mediaPlayer start];
}
}];5 Play Materials
After successfully calling loadResourceWithConfig to load the file, 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 at any time to get the current state of the player.
If enableRepeat is set to YES, the player will automatically replay after finishing playing the file.
// Start playing, need to call interface to load media file before playing
[self.mediaPlayer start];
// Pause
[self.mediaPlayer pause];
// Resume
[self.mediaPlayer resume];
// Stop
[self.mediaPlayer stop];