实现互动直播

简介

互动直播是一种低延时的老师可以和学生进行实时互动的直播类型,目前最多支持可以 3 个学生进行互动。

互动直播有以下几个概念

  • 席位队列:队列中的学生是正在和老师进行互动的学生
  • 等候队列:队列中的学生是等待上台和老师进行互动的学生
  • 白板:相当于教室中黑板的功能,老师在上面写写画画,学生可以实时看到

1.实现一个互动直播

和实现一个普通 live 直播是一样的,但是这里进行 enter 操作后,无法拿到 livePlayer 实例,相对应的可以拿到一个 interactLive 实例

client.enter({
  enterCode: '1234567890abcdef',
  liveId: 'live-1234567890',
  userId: 12345678,
  userInfo: {
    nickname: 'hello bsy',
    role: 4
  }
})
let interactLive
client.on('player-ready', () => {
  // player-ready事件中拿到互动直播实例
  interactLive = client.interactLive.rtc
})

2.获取浏览器权限

实现互动直播前需要获取浏览器的麦克风和摄像头权限

// 获得麦克风权限
const audioPro = interactLive.getBrowserAuth('audio')
// 获得摄像头权限
const videoPro = interactLive.getBrowserAuth('video')

Promise.all([audioPro, videoPro])
  .then(() => {
    console.log('获得权限成功')
  })
  .catch(err => {
    console.log('获得权限失败')
  })

3.播放老师和席位上学生的音视频

老师上线和学生上到席位上都会发布本地音视频流,其他学生会监听到他们的上线,然后播放他们的音视频流

let interactLive
client.on('player-ready', () => {
  // player-ready事件中拿到互动直播实例
  interactLive = client.interactLive.rtc
})
// 互动直播下,监听老师的发布流
client.on('teacher-online', ({ uid }) => {
  // containerId是需要播放器音视频的容器id
  interactLive.playStream(uid, containerId)
})
// 互动直播下,监听席位上的学生发布的流
client.on('student-online', ({ uid }) => {
  // containerId是需要播放器音视频的容器id
  interactLive.playStream(uid, containerId)
})

说明: 不管是 一开始 或是 中途 进入互动直播间,只要老师在推流或是席位上有学生在推流,都会收到 teacher-online 和 student-online 事件

4.学生上台和老师互动

学生上台有两种形式,一种是学生主动举手,老师同意后上台和老师互动。另一种是老师邀请学生,学生接受邀请后上台和老师互动

学生主动举手

// 学生举手操作
client.raiseHands().then(() => {
  console.log('举手操作成功')
})

举手成功后,会触发等候队列更新事件

client.on('queue-update', () => {
  client.getQueueList().then(() => {
    console.log('获取最新的等候队列')
  })
})

当席位列表未满时,老师就可以让学生上到席位上,助教也可以协助老师进行操作。同时会触发 seat-list-update 事件

// 老师等管理端使学生上台互动,uid为学生uid
client.studentOnSeatFromQueue(uid)

学生会收到 seat-list-update 事件,如果列表中有自己,则进行上台操作。上台操作完后会触发 student-online 事件,然后就可以播放自己的音视频流了。

const selfUid = 123456
client.on('seat-list-update', list => {
  // 更新list view

  const filterList = list.filter(item => item.uid === selfUid)
  // 自己在席位上
  if (filterList.length) {
    // 互动直播实例进行上台操作
    interactLive.switchOnSeat()
  }
})

client.on('student-online', ({ uid }) => {
  // containerId是需要播放器音视频的容器id,需提前准备
  interactLive.playStream(uid, containerId)
})

老师邀请上台

// 老师邀请学生上台,uid为学生id
client.inviteStudent(uid)

被邀请的学生会收到 invited-on-seat 事件

// 收到被邀请上台事件
client.on('invited-on-seat', ({ fromId }) => {
  // 接受邀请
  client.responseInvited(true, fromId)
  // 接收邀请后就可以进行上台操作了,后面的流程和之前一样
  ...

  // 拒绝邀请
  client.responseInvited(false, fromId)
})

5.权限控制

老师等管理端可以对学生进行音视频的控制,包括对麦克风和摄像头的开关,让学生下台等。

// 老师禁用/启用学生摄像头
client.muteStudentVideo(uid, status)
// 老师禁用/启用学生麦克风
client.muteStudentAudio(uid, status)

学生端会收到相对应的事件

client.on('seat-video-status-change', ({ videoDisable }) => {
  console.log('video状态:', videoDisable)
})

client.on('seat-audio-status-change', ({ audioDisable }) => {
  console.log('audio状态:', videoDisable)
})

6.白板功能

互动直播中有一个白板功能,需要提供一个 iframe 容器,宽度自己定义,通过 getWhiteBoard 函数拿到白板地址,学生端不能操作,只能观看。

const whiteBoardSrc = client.getWhiteBoard()

iframeElement.src = whiteBoardSrc

results matching ""

    No results matching ""