实现普通 live 直播

简介

普通 live 直播分为支持游客模式的营销直播和非游客模式的课程直播。pc 和部分安卓 web 端使用的 flv 格式直播,部分安卓和全部 ios 使用的 hls 直播。

1. 在页面中提供一个播放器容器

<div id="container"></div>

说明:

  • 容器 id 可以自行设置
  • 建议将容器通过 css 设置,进行铺满,容器自适应

2. 初始化直播间

// 创建直播间实例
const client = BSYLive.createClient({
  tenantId: 1234567890
})

2.1 初始化参数介绍

属性 类型 必填 默认值 说明
+ tenantId Number 租户 id,由系统分配

说明:

  • tenantId 是租户 id,当接入抱石云后,我们会分配一个固定的租户 id
  • +为对象参数,下同

3. 进入直播间

创建直播实例后,后续所有的直播都需要通过 enter 函数进入直播间操作。enter 是一个异步过程,完成操作后会进行回调,回调函数里会返回一下直播间的信息。比如直播间状态、线路信息、机位信息、白板地址等。普通直播和互动直播返回的直播信息不太一样

// 进入直播间
client.enter(
  {
    playerContainer: document.querySelector('#container'),
    enterCode: '1234567890abcdef',
    liveId: 'live-1234567890',
    userId: 12345678,
    userInfo: {
      nickname: 'hello bsy',
      role: 4
    }
  },
  // 进入直播间后进行回调,
  liveDetail => {
    console.log(liveDetail)
  }
)

说明:

  • liveId 是通过接入服务端 api 后获得
  • enterCode 是通过接入服务端 api 后获得
  • userId 是进入直播间用户的 uid
  • 示例中除 userId 和 userInfo 外,其他参数均为必须参数,如果是非营销直播 userId 也是必须参数

进入直播间参数:

属性 类型 必填 默认值 说明
playerContainer HTMLElement 直播间播放器容器
liveId String 直播间 id,live-1234567890 或者 oper-1234567890
enterCode String 进入直播口令
userId String 用户 id,除营销直播,其他直播类型都必传
userInfo Object {} 用户信息。未传则代表当前为游客模式
+ avatar String 默认头像 用户头像
+ nickname String 游客 用户昵称
+ role Number 4 当前登录人的角色,1 讲师、2 助教 、3 班主任、4 学生
player Object {} 播放器相关参数
+ danmu Boolean true 是否开启弹幕
+ volume Number 1 音量,取值范围 0 - 1
+ controls Boolean true 是否展示播放器控制栏
+ poster String 视频封面
+ feedBack Boolean false 是否显示直播反馈
liveMode String 直播模式,'im':只有聊天区域,不包含播放器。
customStaticData String 用户初始化自定义参数,在获取在线人员列表中会含有此参数

enter具体参数请查看详情

3.1 直播播放器操作

进入直播间后就可以对直播间的播放器进行操作了,比如控制音量、切换线路、切换清晰度、监听播放器事件等。

首先要拿到播放器实例:

// 一定要在player-ready事件中才能拿到播放器实例
client.on('player-ready', () => {
  const player = client.livePlayer
  // 设置音量
  player.volume(0.8)
  // 监听事件
  player.on('timeupdate', () => {
    console.log('播放时间更新')
  })
})

results matching ""

    No results matching ""