实现简易的直播功能鸿蒙示例代码

本文原创发布在华为开发者社区，更多鸿蒙场景化示例请见华为开发者联盟官网“行业实践与常见问题”专题页。

介绍

本示例使用声网SDK构建了一个简易的直播场景，模拟主播开、关直播以及观众进入、离开直播间时的弹幕互动。

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

实现简易的直播功能源码链接

效果预览

使用说明

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

实现思路

1. 声网开通服务。

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

      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 引擎实例，并启用视频功能。
• 如果当前用户是主播，设置本地视频并开始预览。

    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对象。

    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功能时，正确清理相关对象和资源，避免内存泄漏等问题。

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