火山 RTC 抖音小程序处于 Beta 内测阶段,请通过 RTC 工单 咨询。
你可以使用抖音小程序中提供的 RTC 能力快速构建你的小程序,实现音视频通话功能;你也能通过阅读代码,了解实现音视频通话的最佳实践。
如果已有小程序项目,跳过此步骤;如果没有小程序项目,在抖音开发者工具中,创建小程序。
示例工程通过 JavaScript 实现,你也可以自行通过 TypeScript 实现。
参考示例工程,实现简单的音视频通话功能。
参考以下的时序图,实现音视频通话的基础功能:

RtcRoomContext 实例。调用 tt.createRtcRoomContext 创建此实例。
你可以通过 RtcRoomContext 的相关接口,实现音视频通话。关于详细的类和接口文档,参考:RTC对外接入文档。
const RtcContext = tt.createRtcRoomContext({
appId:'Your_AppId' //需要修改为在 RTC 控制台上申请的 AppID。不是小程序的 AppID。
})
javascript// 创建/加入 RTC 房间
RtcContext.joinRtcRoom({
roomId: `Your_RoomId`,
token: `Your_Token`,
userId: `Your_UserId`,
roomConfig:{
autoPublish:true, // 支持采集后自动发布
autoSubscribe:true, // 支持远端用户发布后自动订阅
},
})
javascript// 开启/关闭音频采集
RtcContext.changeAudioCapture({
// 开启
state:1, // 0 为关闭
success() {
// 如果进房时没有自动发布,需要在采集成功后主动发布
RtcContext.changeStreamPublishState({
// 开启
state: 1,
streamType:"audio"
})
},
})
// 开启/关闭视频采集
RtcContext.changeVideoCapture({
// 开启
state:1 // 0 为关闭
success() {
// 如果进房时没有自动发布,需要在采集成功后主动发布
RtcContext.changeStreamPublishState({
// 开启
state: 1,
streamType:"video"
})
},
})
javascriptlet 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.ttml 文件中,添加 rtc-room 组件,以展示多人音视频通话的视频画面。关于 rtc-room 组件,参看 RTC对外接入文档。rtc-room 组件关联相关逻辑。