HarmonyOS 鸿蒙Next 如何实现直播

HarmonyOS 鸿蒙Next 简单直播Demo

介绍

鸿蒙生态伙伴SDK专区-直播/实时通话

上述其他SDK可自行查看选择使用，该Demo使用了声网SDK，需要下载并放在工程entry/libs目录下。

SDK的使用，参考各官网文档。

简单直播案例源码链接

效果图

使用说明

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

相关权限

• ohos.permission.INTERNET
• ohos.permission.MICROPHONE
• ohos.permission.CAMERA

实现思路

1. 声网开通服务。

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

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

1. RTC 引擎初始化：

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

    this.rtcEngine = RtcEngine.create(config);
    this.rtcEngine.enableVideo();
<span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.isLiveStreamer) {
<span class="hljs-keyword">let</span> canvas: VideoCanvas = <span class="hljs-keyword">new</span> VideoCanvas(<span class="hljs-string">"local"</span>);
canvas.uid = <span class="hljs-keyword">this</span>.liveStreamerUid;
canvas.renderMode = VideoCanvas.RENDER_MODE_HIDDEN;
canvas.mirrorMode = VideoCanvas.VIDEO_MIRROR_MODE_ENABLED;
<span class="hljs-keyword">this</span>.rtcEngine.setupLocalVideo(canvas);
<span class="hljs-keyword">this</span>.rtcEngine.startPreview();
}

1. 加入频道：

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

    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);

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

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

工程目录

├──entry                                          // 入口模块
│  ├──build-profile.json5       
│  ├──oh-package.json5       
│  ├──libs
│  │  └──AgoraRtcSdk.har                          // 声网SDK
│  ├──src/main/ets
│  │  ├──entryability
│  │  │  └──EntryAbility.ets
│  │  └──pages
│  │     ├──Index.ets                             // 首页
│  │     └──LivePage.ets                          // 直播页
│  └──src/main/resources                          // 资源目录