Note:
TUIKit 5.0.10 and later versions provide the TUIKit_live UI component, which supports the livestreaming feature based on Tencent Real-Time Communication (TRTC).
After importing TUIKit to your project, you can quickly enable the livestreaming feature in several simple steps. If you have not imported TUIKit, import tuikit
and tuiki-live
using the method in Step 2: Import TUIKit.
We recommend that you use source code to integrate tuikit
and tuikit-live
. In this way, you can modify the source code to meet your business needs.
Copy the tuikit
and tuikit-live
code to your project, add tuikit
and tuikit-live module
to settings.gradle
, and import dependencies to your project.
implementation project(':tuikit')
implementation project(':tuikit-live')
Import the SDKAppID generated in Step 1 to initialize TUIKit and call the login
API to log in to TUIKit. For more information on how to generate UserSig, see UserSig.
TUIKitConfigs config = new ConfigHelper().getConfigs();
TUIKit.init(this, SDKAPPID, config);
TUIKit.login(userID, userSig, new IUIKitCallBack() {
@Override
public void onError(String module, final int code, final String desc) {
// Login failed
}
@Override
public void onSuccess(Object data) {
// Login successful
}
});
Create an anchor. To start livestreaming at the anchor end, create TUILiveRoomAnchorLayout
and set a unique roomid.
TUILiveRoomAnchorLayout layoutTuiLiverRomAnchor = findViewById(R.id.tui_liveroom_anchor_layout);
// Callback for receiving successful anchor creation/exit
layoutTuiLiverRomAnchor.setLiveRoomAnchorLayoutDelegate(this);
// roomId: 123456. A viewer needs to set the same roomid as that at the anchor end to view the anchor's livestream. The roomid used here is only an example. The actual value must be unique.
layoutTuiLiverRomAnchor.initWithRoomId(getSupportFragmentManager(), 12345);
Create a viewer. To view an anchor's livestream, create TUILiveRoomAudienceLayout
and set the same roomid as that at the anchor end.
TUILiveRoomAudienceLayout roomAudienceLayout = findViewById(R.id.layout_room_audience);
// Initialize the viewer page and set the same roomId as that at the anchor end to view the anchor's livestream. anchorId is the anchor ID.
// Set useCDN to false. If you need CDN for playback, refer to the following section.
roomAudienceLayout.initWithRoomId(getSupportFragmentManager(), 12345, “1280”, false, “”);
After you create an anchor and a viewer, a live room list is required to associate them.
Room lists can vary, and we do not provide an example of how to build a room list at the server end. You can see RoomManager
in the demo to implement the logic by which the client reports the room creation result.
After the anchor is created, livestream enabled or disabled information is reported in the callback function at the anchor end.
// TUILiveRoomAnchorLayoutDelegate
// Callback for successful room creation
public void onRoomCreate(final TRTCLiveRoomDef.TRTCLiveRoomInfo roomInfo) {
// Reports successful live room creation
RoomManager.getInstance().createRoom(roomInfo.roomId, RoomManager.TYPE_LIVE_ROOM, null);
}
// Callback for exiting/stopping livestreaming
public void onRoomDestroy(TRTCLiveRoomDef.TRTCLiveRoomInfo roomInfo) {
// Terminating a room
RoomManager.getInstance().destroyRoom(roomInfo.roomId, RoomManager.TYPE_LIVE_ROOM, null);
}
Create the live room list page UI.
The live room list page displays livestreams. For more information on the implementation, see LiveRoomFragment.java
implementation in the demo.
Click a room to view.
On the live room list page, click a room. Create a viewer by referring to Step 5: View Livestreams at the Viewer End to view livestreams.
When TUILiveRoomAudienceLayout is created at the viewer end, TRTC is used to view livestreams by default if useCdn is set to false, and CDN is used to view livestreams if useCdn is set to true.
TRTC uses UDP to transmit audio and video data, and standard LVB CDN uses RTMP, HLS, FLV, or other protocols to transmit data. TRTC provides a shorter delay and smoother microphone on/off experience than LVB CDN. However, TRTC is more expensive than LVB CDN.
If you do not have high delay requirements, use CDN to view livestreams to reduce costs.
You have activated Tencent Cloud LVB. You need to configure a playback domain name for livestream playback according to the requirements of applicable authorities. For more information, please see Adding Domain Name.
// eg: If you configure a playback domain name and set the domain name to my.com in CNAME, the default playback URL is http://[playback domain name]/live/[sdkappid]_[roomId]_[userID]_main.flv.
TUILiveRoomAudienceLayout roomAudienceLayout = findViewById(R.id.layout_room_audience);
roomAudienceLayout.initWithRoomId(getSupportFragmentManager(), 12345, "12565", true, "http://[playback domain name]/live/[sdkappid]_[roomId]_[userID]_main.flv");
Note:
For more information on TRTC relayed livestreaming, see CDN Relayed Livestreaming and On-Cloud MixTranscoding.
The TUIKit_live SDK allows users to customize gifts. To modify the gift content or source, modify the server request address or logic in the DefaultGiftAdapterImp.java
file of TUIKit_live. Ensure that the returned data has the same format as the existing data.
//eg data format. Complete reference link: https://liteav-test-1252463788.cos.ap-guangzhou.myqcloud.com/gift_data.json. The JSON character string content is as follows:
{
"giftList": [
{
"giftId": "1", // Gift ID. Each gift has a unique ID.
"giftImageUrl": "https://8.url.cn/huayang/resource/now/new_gift/1590482989_25.png", // Image displayed on the gift panel
"lottieUrl": "https://assets5.lottiefiles.com/packages/lf20_t9v3tO.json", // Large gift animation file
"price": 2989, // Price of a virtual gift
"title": "rocket", // Gift title
"type": 1 // Gift type. 1: large gift, displayed in full screen mode. 2: small gift, dynamically displayed on the top of the message list
},
{
"giftId": "2",
"giftImageUrl": "https://8.url.cn/huayang/resource/now/new_gift/1507876726_3",
"lottieUrl": "",
"price": 298,
"title": "egg",
"type": 0
}
}
To implement the PK feature, perform the following steps:
Enable PK when TUILiveRoomAnchorLayout is created at the anchor end.
TUILiveRoomAnchorLayout layoutTuiLiverRomAnchor = findViewById(R.id.tui_liveroom_anchor_layout);
mLayoutTuiLiverRomAnchor.initWithRoomId(getSupportFragmentManager(), 12345);
// Enable PK.
layoutTuiLiverRomAnchor.enablePK(true);
layoutTuiLiverRomAnchor.setLiveRoomAnchorLayoutDelegate(this);
Set PK list data in the getRoomPKList callback of UILiveRoomAnchorLayout at the anchor end.
public void getRoomPKList(final TUILiveRoomAnchorLayout.OnRoomListCallback callback) {
/// If your room requires the PK feature, return the anchor's room ID array that supports PK through callback in this callback function.
RoomManager.getInstance().getRoomList(RoomManager.TYPE_LIVE_ROOM, new RoomManager.GetRoomListCallback() {
@Override
public void onSuccess(List<String> roomIdList) {
if (callback != null) {
callback.onSuccess(roomIdList);
}
}
@Override
public void onCallback(int code, String msg) {
}
});}
Was this page helpful?