Tencent Cloud AV Chat Room

A room where users can join and leave freely, with no limit on the number of users, and without storing historical messages.

More languages: 简体中文

Experience DEMO #

You can experience our Chat and Live modules via the following demos.

Those following versions of demo have been built by the same Flutter project with our SDKs and extensions.

Introduction #

Tencent Cloud AV Chat Room is a UI component based on Tencent Cloud Chat SDK and implemented around the business of live streaming scenarios. It includes features such as on-screen comment chat, gift giving, likes, number of people online, etc.

You can use this UI component to quickly implement a live streaming application.

Get started #

What needs to be done before we start #

Signed up for a Tencent Cloud account and completed identity verification.
Created a chat application as instructed in Creating and Upgrading an Application and recorded the SDKAppID.
Select Auxiliary Tools > UserSig Generation and Verification on the left sidebar. Generate "UserID" and the corresponding "UserSig", and copy the "key" information. Refer to here.
Create a Flutter application.
Add tencent_cloud_av_chat_room to dependencies in pubspec.yaml file. Or by executing the following commands.

/// step 1:
flutter pub add tencent_cloud_av_chat_room

/// step 2:
flutter pub get

There are two ways to initialize and log in to Chat:

outside the component: Initialize and log in once in your flutter app.
inside the component: Parameters are passed into the component through configuration.

If you are integrating this component in an existing Chat flutter project, you can skip this step.

Outside the component(recommend)

Initialize Chat in the flutter app you created, note that the Chat app only needs to be initialized once. This step can be skipped if integrating in an existing Chat project.

import 'package:tencent_av_chat_room_kit/tencent_cloud_chat_sdk_type.dart';

class _MyHomePageState extends State<MyHomePage> {
    final int _sdkAppID = 0; // Created in the preconditions
    final String _loginUserID = ""; // UserID in preconditions
    final String _userSig = ""; // UserSig in preconditions

	@override
	void initState() {
		super.initState();
		_initAndLoginIm();
	  }

	_initAndLoginIm() async {
		await TencentImSDKPlugin.v2TIMManager.initSDK(
			sdkAppID: _sdkAppID,
			loglevel: LogLevelEnum.V2TIM_LOG_ALL,
			listener: V2TimSDKListener());
		TencentImSDKPlugin.v2TIMManager
          .login(userID: _loginUserID, userSig: _userSig);
	}
}

Inside the component

You can also pass SDKAppID, UserSig, UserID into the component through configuration to initialize and log in Chat.

import 'package:tencent_cloud_av_chat_room/tencent_cloud_av_chat_room.dart';

class _TencentAVChatRoomKitState extends State<TencentCloudAVChatRoom> {
	final int _sdkAppID = 0; // Created in the preconditions
    final String _loginUserID = ""; // UserID in preconditions
    final String _userSig = ""; // UserSig in preconditions
	@override
  	Widget build(BuildContext context) {
		return TencentCloudAVChatRoom(
			config: TencentCloudAvChatRoomConfig(
				loginUserID: _loginUserID, sdkAppID: _sdkAppID, userSig: _userSig));
	}
}

Step 2: Use component #

Use this component in your appropriate module usually, we will integrate with Tencent Cloud Live to build a live room.

import 'package:tencent_cloud_av_chat_room/tencent_cloud_av_chat_room.dart';
...
class _TencentAVChatRoomKitState extends State<TencentCloudAVChatRoom> {
	final int _sdkAppID = 0; // Created in the preconditions
    final String _loginUserID = ""; // UserID in preconditions
    final String _userSig = ""; // UserSig in preconditions
	@override
  	Widget build(BuildContext context) {
		return TencentCloudAVChatRoom(
			data: TencentCloudAvChatRoomData(anchorInfo: AnchorInfo()),
			config: TencentCloudAvChatRoomConfig(
				loginUserID: _loginUserID, sdkAppID: _sdkAppID, userSig: _userSig, avChatRoomID: ''));
	}
}

API Docs #