产品文档 直播技术文档 直播进教室的方式

进入直播教室方式

方式1: 通过web页面进入教室

【功能描述】

百家云提供了一套进入教室的web页面,用户可以自己拼参数进入直播间。

使用场景:合作方在网站上提供每节课进入教室的入口,当用户点击进入教室按钮时,合作方将相关参数拼写为进教室URL,打开URL便可进入教室并使用直播功能。

【调用方法】

http://${private_domain}.at.baijiayun.com/web/room/enter?room_id=<room_id>&user_number=<user_number>&user_name=<user_name>&user_role=<user_role>&user_avatar=<user_avatar>&sign=<sign>

注:其中user_nameuser_avatar的值在拼链接时需要进行url编码(只有在网页或电脑客户端进教室的情况,拼url需要对参数进行urlencode,算签名及app-sdk对接都不需要进行encode),如

room_id=1234567890
user_number=123
user_role=0
user_name=张三
user_avatar=https://img.qq1234.org/uploads/allimg/140426/155540J58-13.jpg
sign=xxxxxx

则拼出来的进入教室的url为

http://${private_domain}.at.baijiayun.com/web/room/enter?room_id=1234567890&user_number=123&user_name=%E5%BC%A0%E4%B8%89&user_role=0&user_avatar=http%3A%2F%2Fimg.qq1234.org%2Fuploads%2Fallimg%2F140426%2F155540J58-13.jpg&sign=xxxxxx

注:实际上根据http协议拼url的时候所有的参数都需要进入url编码,不过room_id/user_number/user_role/sign这些参数的值只有数字或字母,url编码前和编码后的值是一样的。

参数说明

参数 类型 是否必填 默认值 描述
room_id string 房间ID
user_number int 合作方账号体系下的用户ID号
user_name string 显示的用户昵称
user_role int 0:学生 1:老师 2:管理员
user_avatar string 用户头像
group_id int 0 分组号,默认0不分组,只有分组直播才用到
sign string 签名

签名字段,需要在后端算好,计算规则参考直播进教室签名计算文档

方式2: 合作方网站调起百家云客户端进入房间

【功能描述】

百家云提供了在网页端(合作方网站)调起电脑客户端进入教室,客户端在安装时将特定协议写入注册表,网页端通过js代码或<a>标签指定特定协议拉起百家云客户端

【协议格式】

调起百家云客户端的协议格式为:

<protocol>://urlpath=<urlpath>&token=token&ts=ts
  • <protocol>:协议头
    • 云端课堂客户端:baijiacloud://
    • 云端直播客户端:bjylive://
    • 如果是定制的客户端,则协议头需要换成相应定制客户端的协议头
  • <urlpath>:方式1中拼的web页面地址进行url encode后的值
  • token: 固定字符串token,不需要替换
  • ts: 固定字符串ts,不需要替换

【调用方法】

//1. 先按方式1拼好web进入教室的url
web_url = 'http://${private_domain}.at.baijiayun.com/web/room/enter?room_id=1234567890&user_number=123&user_name=%E5%BC%A0%E4%B8%89&user_role=0&user_avatar=http%3A%2F%2Fimg.qq1234.org%2Fuploads%2Fallimg%2F140426%2F155540J58-13.jpg&sign=xxxxxx';

//2. 按百家云客户端私有协议拼调起百家云客户端的地址
client_url = 'baijiacloud://urlpath=' + encodeURIComponent(web_url) + '&token=token&ts=ts'

// 则拼好的client_url值为
// baijiacloud://urlpath=http%3A%2F%2F${private_domain}.at.baijiayun.com%2Fweb%2Froom%2Fenter%3Froom_id%3D1234567890%26user_number%3D123%26user_name%3D%25E5%25BC%25A0%25E4%25B8%2589%26user_role%3D0%26user_avatar%3Dhttp%253A%252F%252Fimg.qq1234.org%252Fuploads%252Fallimg%252F140426%252F155540J58-13.jpg%26sign%3Dxxxxxx&token=token&ts=ts

怎样判断用户有没有安装客户端,请参考常见问题1

【网页中调起百家云客户端示例】

  1. 通过js调起百家云客户端(需要先安装百家云客户端才能调起)
client_url = 'baijiacloud://urlpath=http%3A%2F%2F${private_domain}.at.baijiayun.com%2Fweb%2Froom%2Fenter%3Froom_id%3D1234567890%26user_number%3D123%26user_name%3D%25E5%25BC%25A0%25E4%25B8%2589%26user_role%3D0%26user_avatar%3Dhttp%253A%252F%252Fimg.qq1234.org%252Fuploads%252Fallimg%252F140426%252F155540J58-13.jpg%26sign%3Dxxxxxx&token=token&ts=ts';

window.open(client_url);
  1. 将拼好的地址放在<a>标签的href属性里面,如
<a href="baijiacloud://urlpath=http%3A%2F%2F${private_domain}.at.baijiayun.com%2Fweb%2Froom%2Fenter%3Froom_id%3D1234567890%26user_number%3D123%26user_name%3D%25E5%25BC%25A0%25E4%25B8%2589%26user_role%3D0%26user_avatar%3Dhttp%253A%252F%252Fimg.qq1234.org%252Fuploads%252Fallimg%252F140426%252F155540J58-13.jpg%26sign%3Dxxxxxx&token=token&ts=ts">
    进入教室
</a>

【移动端网页调用 APP 示例】

通过下面的函数获取 url,然后和刚才介绍的网页调起客户端的方式相同,用 window.open(url)<a href="url"></a> 的方式调起云端课堂或云端直播 APP。

/**
 * 通过此函数获取调起 url
 *
 * @param {boolean} isLive true 表示云端直播,false 表示云端课堂
 * @param {object} query 参数信息
 * @return {string}
 */
function getAppUrl(isLive, query) {
    var params = { };
    // 通过参加码进入
    if (query.code) {
        params.joinCode = query.code;
        params.userName = query.userName;
        params.userType = query.userType;
        //如果为分组直播,请传入分组号,非分组直播则不用传此参数
        params.group_id = query.group_id;
       // 如果您拥有个性域名,需要传入个性域名,没有则不用传值,不参与签名计算
        params.privateDomain = 'xxx';
        // 教室类型,不传默认大班课,班级类型参考服务端班级类型,不参与签名计算
       params.classType = 4;   
    }
    // 通过 sign 进入
    else {
        params.roomId = query.roomId;
        params.userNumber = query.userNumber;
        params.userName = query.userName;
        params.userType = query.userType;
        params.userAvatar = query.userAvatar;
        // 签名计算参数参考直播进教室签名计算文档,参数名一般使用下划线格式
        params.sign = query.sign;
        //如果为分组直播,请传入分组号,非分组直播则不用传此参数
        params.group_id = query.group_id;
        // 如果您拥有个性域名,需要传入个性域名,没有则不用传值,不参与签名计算
        params.privateDomain = 'xxx';
        // 教室类型,不传默认大班课,班级类型参考服务端班级类型,不参与签名计算
       params.classType = 4;   
    }
    if (isLive) {
        // 云端直播 app
        return 'bjlivemeeting://room.join?' + $.param(params);
    }
    else {
        // 云端课堂 app
        return 'bjhlliveapp://room.join?' + $.param(params);
    }
}

方式3: 使用客户端通过参加码进入房间

【功能描述】

百家云提供了一个凭参加码快速进入房间的方式(参加码生成见API-3API-7),参加码由合作方通过适当的方式传递给用户。

使用场景:用户打开百家云客户端,在登陆页输入参加码和用户昵称后进入房间

注意:

  1. 用户昵称建议不超过12个字
  2. 管理员可凭管理员参加码进入,多个管理员可以使用同一个参加码进入教室。
  3. 老师可凭老师参加码进入,老师参加码只支持一位老师使用,如果多人使用同一个老师参加码进入教室,则后进入的老师会将先进入的老师挤出教室
  4. 收费课场景:学生参加码是使用每个学生用户的user_number生成的,每个学生参加码只能有一人使用,如果多人使用同一个学生参加码进入教室,则后进入的学生会将先进入的学生挤出教室
  5. 免费课场景:使用user_number=0生成一个学生参加码,此学生参加码支持多人同时使用进入教室,无互挤机制

方式4: 移动端调用SDK进入房间

集成Android SDK进入房间

具体集成方式参考Android直播核心SDK

集成iOS SDK进入房间

具体集成方式参考iOS直播核心SDK

集成JS SDK进入房间

具体集成方式参考JS-SDK集成文档

常见问题

1. 怎样通过js判断用户有没有安装客户端

事实上,我们没办法判断客户有没有安装直播客户端,但我们可以通过另外一种方式解决这个问题。 在调起直播客户端的时候,我们设置一个定时器,过5s后弹出一个框,提示用户来下载客户端(或通过网页进教室)

  1. 如果用户已经安装过客户端,应该就是直接调起了,他不会注意到这个弹框。
  2. 如果用户没有安装客户端,尝试调起客户端会没有反应,过5s后他就会看到这样一个提示框,下载客户端(或通过网页进教室)

相关代码如下:

if (browser.ie || browser.firefox) {
    // IE和火狐用window.open打开
    // 调起客户端 5秒之后自动关闭调起窗口
    var client = window.open(enterClassroomClientURL);

    setTimeout(function () {
        if (client) {
            client.close(); //关闭新打开的浏览器窗口,避免留下一个空白窗口
        }
    }, 5000);
} else {
    //其它浏览器使用模拟<a>标签`click`事件的形式调起
    var a = document.createElement("a");
    a.setAttribute("href", enterClassroomClientURL);
    document.body.appendChild(a);
    a.click();
}

setTimeout(function () {
    // 5秒之后不管有没有调起都弹窗提示下载客户端
    dialog.open();
}, 5000);