火山 RTC 抖音小程序端 SDK 处于 Beta 内测阶段,请通过 RTC 工单 咨询。

你可以使用抖音小程序中提供的 RTC 能力快速构建你的小程序,实现音视频通话功能;你也能通过阅读代码,了解实现音视频通话的最佳实践。

前提条件
在你的小程序中,实现音视频通话
步骤 1:创建抖音小程序项目

如果已有小程序项目,跳过此步骤;如果没有小程序项目,在抖音开发者工具中,创建小程序。

示例工程通过 JavaScript 实现,你也可以自行通过 TypeScript 实现。

步骤 2:在小程序中,实现音视频通话功能

参考示例工程,实现简单的音视频通话功能。

逻辑层实现流程图

参考以下的时序图,实现音视频通话的基础功能:

alt

逻辑层实现步骤
  1. 创建 RtcRoomContext 实例。

调用 tt.createRtcRoomContext 创建此实例。
你可以通过 RtcRoomContext 的相关接口,实现音视频通话。关于详细的类和接口文档,参考:RTC对外接入文档。

const RtcContext = tt.createRtcRoomContext({
    appId:'Your_AppId' //需要修改为在 RTC 控制台上申请的 AppID。不是小程序的 AppID。
})
javascript
  1. 创建/加入音视频通话的房间,并进行自动发布,自动订阅等的设置。
// 创建/加入 RTC 房间
RtcContext.joinRtcRoom({
    roomId: `Your_RoomId`,
    token: `Your_Token`,
    userId: `Your_UserId`,
    roomConfig:{
        autoPublish:true, // 支持采集后自动发布
        autoSubscribe:true, // 支持远端用户发布后自动订阅
    },
})
javascript
  1. 设置音视频流的发布状态。如果创建/加入房间时设置了采集后自动发布,那么这边的逻辑可以跳过。
// 开启/关闭音频采集
RtcContext.changeAudioCapture({
    // 开启
    state:1,   // 0 为关闭
    success() {
        // 如果进房时没有自动发布,需要在采集成功后主动发布
        RtcContext.changeStreamPublishState({
            // 开启
             state: 1,
             streamType:"audio"
        })
    },
})

// 开启/关闭视频采集
RtcContext.changeVideoCapture({
    // 开启
    state:1 // 0 为关闭
    success() {
        // 如果进房时没有自动发布,需要在采集成功后主动发布
        RtcContext.changeStreamPublishState({
            // 开启
             state: 1,
             streamType:"video"
        })
    },
})
javascript
  1. 设置音视频流的订阅状态。如果创建/加入房间时设置了自动订阅,那么这边的逻辑可以跳过。
let subscribedSpeakers = [];

let subscribedVideoss = [];

// 有成员开始/停止说话
RtcContext.onRtcChatSpeakersChanged((userIdList)=>{
    userIdList.forEach(userId=>{
        if(!subscribedSpeakers.includes(userId)){
            // 如果进房时没有自动订阅,需要在远端用户发布后主动订阅
             RtcContext.changeStreamPublishState({
                 // 开启
                 state: 1,
                 streamType:"audio"
                 userId
            })
        }
    })
    subscribedSpeakers = userIdList
})


RtcContext.onRtcChatSpeakersChanged((userIdList)=>{
    userIdList.forEach(userId=>{
        if(!subscribedVideoss.includes(userId)){
            // 如果进房时没有自动订阅,需要在远端用户发布后主动订阅
             RtcContext.changeStreamPublishState({
                 state: 1,
                 streamType:"video"
                 userId
            })
        }
    })
    subscribedVideoss = userIdList
})
javascript
视图层实现
  1. 在视图层的 .ttml 文件中,添加 rtc-room 组件,以展示多人音视频通话的视频画面。关于 rtc-room 组件,参看 RTC对外接入文档。
  2. 为 rtc-room 组件关联相关逻辑。
  3. 添加加入/退出房间,开启/关闭视频采集和发布等按键,并关联相关逻辑。
调试和发布
  1. 连接真机,并调试小程序。参考真机调试。

  2. 发布小程序。参考发布小程序。