# RtcLiveDemo

**Repository Path**: scenario-samples/rtc-live-demo

## Basic Information

- **Project Name**: RtcLiveDemo
- **Description**: 【鸿蒙 Harmony Next 示例 代码】基于声网SDK的简单直播Demo
- **Primary Language**: Unknown
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 4
- **Forks**: 1
- **Created**: 2024-12-08
- **Last Updated**: 2025-06-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 基于声网SDK的简单直播Demo
## 介绍

本示例使用[声网SDK](https://doc.shengwang.cn/doc/rtc/harmonyos/resources)构建了一个简易的直播场景，模拟主播开、关直播以及观众进入、离开直播间时的弹幕互动。

该SDK需要下载并放在工程entry/libs目录下，SDK的使用，参考官网文档。

## 效果预览
![输入图片说明](screenshots/%E5%9F%BA%E4%BA%8E%E5%A3%B0%E7%BD%91SDK%E7%9A%84%E7%AE%80%E5%8D%95%E7%9B%B4%E6%92%ADDemo.gif)


## 使用说明
打开应用，分别有观众端、直播端，点击进入不同页面，进行不同操作。

## 相关权限
ohos.permission.INTERNET

ohos.permission.MICROPHONE

ohos.permission.CAMERA

## 实现思路

1. 声网[开通服务](https://doc.shengwang.cn/doc/rtc/android/get-started/enable-service)。

2. 添加视频渲染组件，rtc sdk使用XComponent作为视频渲染组件。

```typescript
      XComponent({
        id: this.isLiveStreamer ? 'local' : 'remote',
        type: 'surface',
        libraryname: Constants.AGORA_LIB_NAME,
      })
        .onLoad(() => {
        })
```


3. RTC 引擎初始化：
* 首先检查this.rtcEngine是否为null，如果是，则进行初始化。
* 创建一个RtcEngineConfig对象，并设置其属性：
  * mContext：通过getContext(this)获取上下文并赋值。
  * mAppId：设置为特定的应用 ID。
  * mEventHandler：定义了多个事件处理函数，包括：
    * onUserJoined：当有用户加入频道时触发，记录日志并更新消息列表，若当前用户不是主播且加入的用户是主播，则设置远程视频。
    * onJoinChannelSuccess：当成功加入频道时触发，记录日志并更新消息列表，若当前用户不是主播，则设置远程视频。
    * onLeaveChannel：当离开频道时触发，更新状态表示已离开。
* 使用RtcEngine.create(config)创建 RTC 引擎实例，并启用视频功能。
* 如果当前用户是主播，设置本地视频并开始预览。

```typescript
    this.rtcEngine = RtcEngine.create(config);
    this.rtcEngine.enableVideo();

    if (this.isLiveStreamer) {
    let canvas: VideoCanvas = new VideoCanvas("local");
    canvas.uid = this.liveStreamerUid;
    canvas.renderMode = VideoCanvas.RENDER_MODE_HIDDEN;
    canvas.mirrorMode = VideoCanvas.VIDEO_MIRROR_MODE_ENABLED;
    this.rtcEngine.setupLocalVideo(canvas);
    this.rtcEngine.startPreview();
    }
```



4. 加入频道：
* 创建一个ChannelMediaOptions对象，并设置其属性：
  * autoSubscribeAudio和autoSubscribeVideo：根据当前用户是否为主播决定是否自动订阅音频和视频。
  * publishCameraTrack和publishMicrophoneTrack：根据当前用户是否为主播决定是否发布摄像头和麦克风轨道。
  * channelProfile：设置频道模式为直播模式。
  * clientRoleType：未明确设置，代码中可能有其他地方定义。
* 使用this.rtcEngine.joinChannelWithOptions方法加入频道，传入参数包括token空字符串）、频道 ID、用户 ID（主播使用主播 ID，否则为0由服务器分配）和ChannelMediaOptions对象。

```typescript
    let option: ChannelMediaOptions = new ChannelMediaOptions();
    option.autoSubscribeAudio = this.isLiveStreamer ? false : true;
    option.autoSubscribeVideo = this.isLiveStreamer ? false : true;;
    option.publishCameraTrack = this.isLiveStreamer ? true : false;;
    option.publishMicrophoneTrack = this.isLiveStreamer ? true : false;;
    option.channelProfile = Constants.ChannelProfile.LIVE_BROADCASTING;
    option.clientRoleType =
    // joinChannelWithOptions(token:string, channelId:string, uid:number, options:ChannelMediaOptions)
    // uid 为0，表示由服务器分配uid，分配的uid 将通过onJoinChannelSuccess回调返回
    this.rtcEngine.joinChannelWithOptions("", this.channel, this.isLiveStreamer ? this.liveStreamerUid : 0, option);
```



5. 定义一个名为release的方法，用以释放与实时通信（RTC）引擎相关的资源，确保在不需要使用RTC功能时，正确清理相关对象和资源，避免内存泄漏等问题。

```typescript
  release() {
    if (this.rtcEngine != null) {
      this.rtcEngine!.leaveChannel();
      RtcEngine.destroy();
      this.rtcEngine = null;
    }
  }
```

## 工程目录

```
├──entry                                          // 入口模块
│  ├──build-profile.json5                         // 编译配置文件，其中arkOptions需配置动态import依赖的包名
│  ├──oh-package.json5                            // 依赖配置，需依赖全部子业务模块和RouterModule模块
│  ├──libs
│  │  └──AgoraRtcSdk.har                          // 声网SDK
│  ├──src/main/ets
│  │  ├──entryability
│  │  │  └──EntryAbility.ets
│  │  └──pages
│  │     ├──Index.ets                             // 首页
│  │     └──LivePage.ets                          // 直播页
│  └──src/main/resources                          // 资源目录
```

## 参考文档

[声网SDK](https://doc.shengwang.cn/doc/rtc/harmonyos/resources)

[开通服务](https://doc.shengwang.cn/doc/rtc/android/get-started/enable-service)


## 一份简单的问卷反馈

亲爱的Harmony Next开发者，您好！<br>
为了协助您高效开发，提高鸿蒙场景化示例的质量，希望您在浏览或使用后抽空填写一份简单的问卷，我们将会收集您的宝贵意见进行优化:heart:

[:arrow_right: **点击此处填写问卷** ](https://wj.qq.com/s2/19042938/95ab/)

<div style="text-align: left;">