产品文档 直播技术文档 微信小程序 直播SDK

概述

小程序sdk提供一套教室内的组件,供用户灵活组合自己的业务逻辑。

说明:由于微信对域名绑定小程序限制,我们将不提供小程序嵌入H5页面业务域名配置与校验文件放置,请悉知。

SDK 下载地址

使用步骤

1)准备工作

SDK代码地址: http://git.baijiashilian.com/open-frontend/live-weixin

1)sdk放到项目根目录下(不要改文件名字和路径)

2)使用组件的页面先注册组件

3) 开通小程序的live-player组件的使用权限。(重要)

详情戳这里

4) 页面onload以后调用bjy.init()

5) 小程序后台配置request合法域名、socket合法域名

微信小程序需要支持https和wss协议,需要配置的如下:

request合法域名

https://www.baijiayun.com

socket合法域名

wss://signal.baijiayun.com

wss://video-cs-2.baijiayun.com

wss://video-cs.baijiayun.com

wss://video-rs-2.baijiayun.com

wss://video-rs.baijiayun.com

wss://video-rs-hz-2.baijiayun.com

wss://video-rs-hz.baijiayun.com

wss://video-ms-2.baijiayun.com

wss://video-ms.baijiayun.com

2)页面的onLoad周期函数中调用BJY.init方法

init方法会初始化教室相关的服务器连接,封装信令层,初始化事件,并提供一些接口。

代码如下


BJY.init({ env: '', // 环境,可选值 test/beta/'',对于客户来说,不传默认线上环境, sign: '签名', noChat: false, // 当不需要聊天功能时,可以通过noChat: true不连接百家云的聊天服务器,少一条websocket连接,默认值为false hasDefaultTip: true, // 支持配置不要直播间的默认提示hasDefaultTip: false,默认值为true class: { id: '教室 id,需要在百家云后台开课,开完课后,把课程 id 传入', // 如果需要在后续用到教室相关的信息,可像这样写在下面 // 如果不用,可省略 name: '课程名称', startTime: '开始时间,精确到毫秒的时间戳', endTime: '结束时间,精确到毫秒的时间戳' }, // 当前进入教室的用户的信息 // 如果是老师进教室,传老师的信息 // 如果是学生进教室,传学生的信息 // number 必须确保是唯一的,如果不唯一,后进的用户会踢掉先进的用户 user: { number: '用户 number', avatar: '头像地址', name: '用户昵称', type: '用户类型 0-学生 1-老师 2-助教' }, // 如果知道当前教室的老师信息,可传入,否则可省略 teacher: { number: '老师 number', avatar: '头像地址', name: '老师昵称', type: 1 } });

3)调用组件,实现功能。

组件具体使用如下:

loading组件

可用于进入教室的服务器连接加载等待

参数

参数 类型 必填 默认 说明
options Object {} 配置信息
roomLoadEnded Event 进入教室成功触发

options默认值

{
     showInfo: true, // 是否显示加载百分比
     strokeWidth: 6, // 进度条的高度
     activeColor: '#1694ff', // 已经加载部分颜色
     backgroundColor: '#d8d9d8' // 进度条背景颜色
}

示例

<loading class="loading-wrapper" options="{{options}}"
         bind:loadEnded="roomLoadEnded">
</loading>

teacherPlayer组件(模拟器不能播放流,查看效果请用真机!用真机!)

1) 老师视频播放器,专门用于老师视频的播放,相对于player组件,teacherPlayer组件有老师音视频状态变化提示等区分学生的行为。 2) 组件宽高,自适应容器宽高,建议宽高比为4:3

参数

参数 类型 必填 默认 说明
optTriggerType string tap 触发操作显示的用户行为(tap、longTap、none)
stopPlay Boolean false 停止播放

事件

teacherPlayerTap

用户操作触发

参数 event event.detail.user 当前player的user信息 event.detail.support 当前流是否可以支持播放

AVStatusChange

音频,视频状态变化触发

参数

event.detail.support 当前流是否在小程序可播放

event.detail.user 用户信息

event.detail.changeInfo={audioTo: true,videoTo: false}

changeInfo有audioTo字段,代表音频状态有变化audioTo==true,表示音频从关闭到打开,audioTo==false,表示音频从打开到关闭
changeInfo有videoTo字段,代表视频状态有变化videoTo==true,表示视频从关闭到打开,videoTo==false,表示视频从打开到关闭

isSupportedChanged

小程序是否可以播放的状态变化,当推流方用网页时候,小程序不支持播放

参数 event.detail.user 用户信息

event.detail.support 是否可以播放

示例

        <teacherPlayer

                bind:playerTap="onPlayerOptTap"
                bind:isSupportedChanged="onTeacherPlayerSupportedChanged"
                bind:AVStatusChange='onTeacherPlayerAVStatusChange'
        >
        </teacherPlayer>

userPlayer组件(模拟器不能播放流,查看效果请用真机!用真机!)

学生发言视频播放。 1)学生发言人数不确定。 2)由于小程序的live-player是原生组件,不能放到scroll-view里面滚动,所以在学生发言人数过多,指定容器(styleInfo.wrapWidth)放不下时候, 会将视频的默认宽度变小,保持高度不变。当宽度缩小为1/2时,会将高度也折半,视频会变成两行显示。

参数

参数 类型 必填 默认 说明
excludeUsers Array [] 不显示的用户,数组值为用户的id,如[122,345]
styleInfo Object 详情 样式信息

styleInfo.wrapWidth 容器宽度,默认值 300

styleInfo.playerWidth 单个播放器的宽度,默认值100

styleInfo.playerHeight 单个播放器的高度,默认值75

styleInfo.fontSize 字体大小,默认值12

事件

onUserPlayerTap

用户操作触发

参数 event event.detail.user 当前player的user信息 event.detail.support 当前流是否可以支持播放

AVStatusChange

音频,视频状态变化触发

参数

event.detail.support 当前流是否在小程序可播放

event.detail.user 用户信息

event.detail.changeInfo={audioTo: true,videoTo: false}

changeInfo有audioTo字段,代表音频状态有变化audioTo==true,表示音频从关闭到打开,audioTo==false,表示音频从打开到关闭
changeInfo有videoTo字段,代表视频状态有变化videoTo==true,表示视频从关闭到打开,videoTo==false,表示视频从打开到关闭

isSupportedChanged

小程序是否可以播放的状态变化,当推流方用网页时候,小程序不支持播放

参数 event.detail.user 用户信息

event.detail.support 是否可以播放

setUserList

设置用户信息时触发,可用于获取当前发言用户

event.detail.userList 当前显示的用户信息列表

event.detail.allUserList 所有发言用户的信息,包含通过excludeUser属性设置不显示的

示例

      <userPlayer
            styleInfo="{{styleInfo}}"
            excludeUsers="{{excludeUsers}}"
            bind:setUserList="onSetUserList"
            bind:userPlayerTap="onUserPlayerTap"
            bind:AVStatusChange="onAVStatusChange"
            bind:isSupportedChanged="onIsSupportedChanged"
    >
    </userPlayer>

whiteboard

课件组件,用户教室内的课件显示

参数

参数 类型 必填 默认 说明
hidePageCount Boolean true 是否显示页码信息
size Object 屏幕宽,高信息 宽度,单位px,size.width宽度,size.height高度
styleInfo Object {} 样式
drawing Boolean false 是否处于白板可写模式,百家云课堂逻辑是只有发言用户才能写白板

styleInfo默认值


{ backgroundColor: 'black', pageCountColor: 'white', // 页码信息字体颜色 pageCountBackground: '#C2C0C1' // 页码信息背景色 }

事件

whiteboardTap

用户操作触发

参数 event

示例

<whiteboard id="whiteboard" class="{{whiteboardClass}}"
            hidePageCount="{{hidePageCount}}"
            styleInfo="{{styleInfo}}"
            width="{{width}}"
            height="{{height}}"
            drawing="{{drawing}}"
            bind:whiteboardTap="onWhiteboardTap"
>
</whiteboard>

messageList

聊天消息列表

用户教室内的聊天消息的显示

自适应容器宽高显示

参数

参数 类型 必填 默认 说明
maxCount Number 500 消失的最大消息数,消息超出会将最早的消息移除
historySize Number 10 进教室请求的历史消息的条数
styleInfo Object 自定义样式

styleInfo默认值


{ messageBackground: 'white', fromColor: '#9E9DA0', contentColor: 'black' }

事件

addMessage

有新消息触发

参数 event.detail.message 消息信息

示例

    <messageList bind:addMessage="onAddMessage"
                 historySize="{{historySize}}"
                 maxCount="{{maxCount}}"
                 styleInfo="{{styleInfo}}">
    </messageList>      

messageSender

消息发送

参数

参数 类型 必填 默认 说明
placeholder String '' 输入框的placeholder
messageMaxLength Numnber 140 输入框最大输入长度
focus Boolean false 是否聚焦

事件

heightChange

组件高度变化,显示表情高度会发生变化

参数

event.detail.height 组件高度

event.detail.top 组件top

event.detail.showEmotion 表情当前是否显示

sendMessage

发送消息事件

参数

event.detail.content 消息内容

示例

    <messageSender  placeholder="{{placeholder}}"
                messageMaxLength="{{messageMaxLength}}"
                heightChange="onHeightChange"
                sendMessage="onSendMessage"
                focus="{{focus}}">
    </messageSender>   

notice

教室里通知显示

参数

参数 类型 必填 默认 说明
styleInfo Object 自定义样式

styleInfo默认值


{ titleColor: 'black', contentBackground: '#9E9DA0', contentColor: 'black' }

示例

 <notice styleInfo="{{styleInfo}}"></notice>

questionAnswer

问答模块,仅支持提问

参数

参数 类型 必填 默认 说明
maxCount Number 20 列表最多显示的问题数量,注:一个问题下有多个回答只算作一条
inputMaxLength Number 140 提问的字数限制
limitPerMinute Number 15 每分钟最多提问的次数

示例

<questionAnswer maxCount="{{maxCount}}"
                inputMaxLength="{{inputMaxLength}}"
                limitPerMinute="{{limitPerMinute}}">
</questionAnswer>

上麦功能

上麦(这里指能发布自己的音视频)分两种:

1 自动上麦,不需要主讲(老师)授权

使用publisher组件进行推流即可。摄像头、麦克风的开关控制可以通过自己的交互实现,只需要触发MEDIA_SWITCH_TRIGGER通知publisher组件即可。

关摄像头

        eventEmitter.trigger(eventEmitter.MEDIA_SWITCH_TRIGGER, {
            videoOn: false
        });

2 举手上麦,需要主讲(老师)同意以后才能发布上麦发布自己的音视频流。

  • 实现方式一:举手的交互可以自己设计,触发sdk相应的事件即可。

  • 实现方式二:用我们提供的handup组件

实现方式一的事件:

学生(观众)操作

举手操作   

    eventEmitter.trigger(eventEmitter.SPEAK_START_TRIGGER, {
          timeout: 3000  // 举手后的等待响应时间,单位毫秒,该时间内老师未响应,视为超时,需要重新举手
      });


取消举手(在老师(主讲)处理举手之前,取消举手操作) eventEmitter.trigger(eventEmitter.SPEAK_CANCEL_TRIGGER);
终止上麦

     eventEmitter.trigger(eventEmitter.SPEAK_STOP_TRIGGER); 

     // 如果用户处理上麦状态的时候,小程序后台了,此时需要终止发言状态,触发一下该事件

老师(主讲)处理结果,通过监听事件实现

 老师(主讲)同意上麦请求

    eventEmitter.on(
                    eventEmitter.SPEAK_APPLY_RESULT_ACCEPT,
                    function () {
                     // 这里实现业务逻辑
                    }
         )

老师(主讲)拒绝上麦请求

   eventEmitter.on(
                    eventEmitter.SPEAK_APPLY_RESULT_REJECT,
                    function () {
                     // 这里实现业务逻辑
                    }
         )

老师(主讲)超时未处理

   eventEmitter.on(
                    eventEmitter.SPEAK_APPLY_RESULT_TIMEOUT,
                    function () {
                     // 这里实现业务逻辑
                    }
         )

publisher组件(模拟器不能预览,查看效果请用真机!用真机!)

1) 本地视频采集推流。

2) 组件宽高自适应容器宽高

3) 由于小程序的限制,只能推出16:9的视频,容器高度应该设置成16:9比例,否则本地预览可能不全

参数

参数 类型 必填 默认 说明
beauty Number 0 是否开启美颜
whiteness Number 0 是否开启美白
autoFocus Boolean true 自动聚集
backgroundMute Boolean false 进入后台时是否静音
orientation Boolean vertical vertical,horizontal
minBitrate Number 200 最小码率
maxBitrate Number 1000 最大码率
zoom Boolean false 调整焦距
styleInfo Obejct {fontSize: 12,color: 'black'} 字体样式

事件

statusChange

音视频状态变化 (老师(主讲)端有“结束发言”的操作,也会导致用户音视频状态变化)

参数 event

event.detail.newValue 新的状态

event.detail.oldValue 旧状态

publisherTap

tap事件

参数 event

event.detail.event 事件源

event.detail.user user信息

stateChange

状态变化事件

同小程序的publisher组件的bindstatechange

netStatusInfo

网络状态

同小程序的publisher组件的bindnetstatus

error

渲染错误事件

同小程序的publisher组件的binderror

交互

开关麦克风,摄像头通过触发事件
    eventEmitter.trigger(eventEmitter.MEDIA_SWITCH_TRIGGER, {
      videoOn: true,
      audioOn: true
    });
切换前后摄像头
 eventEmitter.trigger(eventEmitter.SWITCH_CAMERA);  

示例

    <publisher
            bind:netStatusInfo="onNetStatusInfo"
            bind:statusChange="onStatusChange"
            bind:publisherTap="onPublisherTap"
            beauty="{{beauty}}"
            whiteness="{{beauty}}"

    >
    </publisher>

handup组件

用于实现举手功能

<handup></handup>

事件

speakApplyAccect

老师(主讲)同意举手触发

参数 event.user 当前用户

speakApplyReject

老师(主讲)拒绝举手触发

参数 event.user 当前用户

注意

页面后台时候,推拉流会异常,此时需要触发eventEmitter.PAGE_HIDE事件,组件收到事件后会关闭音视频
eventEmitter.trigger(eventEmitter.PAGE_HIDE);

change log

  • tag 1.0.0

    初始版本 基础sdk,组件主讲视频、白板、聊天、公告、加载、上麦用户视频列表显示

  • tag 1.0.1

    升级BJY.init方法,支持noChat配置。

    当不需要聊天功能时,可以通过noChat=true不连接百家云的聊天服务器,少一条websocket连接

  • tag 1.0.2

    升级BJY.init方法,支持hasDefaultTip配置。支持设置不要直播间的默认提示

  • tag 1.2.0

    新增publisher,handup等组件和API,支持发言,举手

    白板支持涂鸦

  • tag 1.3.0

    新增问答的组件