百家云双师课堂
产品文档 直播技术文档 webpage弹窗提示

小班课第三方弹窗

简介

** 功能介绍 **

联系百家云技术支持在账号级别配置一个url地址，百家云在小班课教室内使用iframe嵌套这个链接，实现百家云教室与客户网页间的通信

** 注意事项 **

仅支持小班课PC端使用，后续版本会支持APP以及大班课

通信机制

BJYWebpage提供了iframe和外层交互的桥梁，BJYWebpage是单例模式，一个页面中只能存在一个instance实例。

百家云会在您提供的链接后面拼上教室信息参数，如您提供的域名为https://www.baijiayun.com，百家云在教室内访问时使用的地址为https://www.baijiayun.com?classId=xxx&userId=123&userNumber=123&userName=123&userType=1

请引入以下地址的桥接文件:

https://www.baijiayun.com/js-sdk/1.25.0/tool/bjyBridge/BJYWebpage.js

BJYWebpage

*** 在页面onload回调中执行 ***

  • 使用getInstance获取示例对象，onMessageReceive接收百家云页面发送的消息
instance = BJYWebpage.getInstance({
    onMessageReceive: function (data) {
        console.log(JSON.stringify(data));
    }
})
  • 调用instance。getReady()通知百家云页面加载完成
  • 调用instance.sendMessage() 向百家云页面发送消息

完整示例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试webpage</title>
</head>

<body>
    <script src="https://www.baijiayun.com/js-sdk/1.25.0/tool/bjyBridge/BJYWebpage.js"></script>
    <script>
        var instance;

        var USER_TYPE = {
            STUDENT: 0,
            TEACHER: 1,
            ADMIN: 2
        }
        var url = location.search;
        var query = {};
        if (url.indexOf("?") != -1) {
            var str = url.substr(1);
            strs = str.split("&");
            for (var i = 0; i < strs.length; i++) {
                query[strs[i].split("=")[0]] = strs[i].split("=")[1];
            }
        }
        // query数据格式示例 {classId: "20060393794752", userId: "17916900", userNumber: "937947521", userName: "123", userType: "1"}
        // userType代表当前的用户类型 0 学生 1 老师 2 助教

        window.onload = function () {
            instance = BJYWebpage.getInstance({
                onMessageReceive: function (data) {
                    console.log(JSON.stringify(data));
                    // 接收到老师点击上课的通知
                    if (data.key == 'class_start') {
                        // 判断是老师发送以下提示
                        if (query.userType == USER_TYPE.TEACHER) {
                            setTimeout(function () {
                                instance.sendMessage({
                                    key: 'webpage_alert',
                                    content: '请给学生点赞'
                                })
                            }, 60 * 1000);
                            setTimeout(function () {
                                instance.sendMessage({
                                    key: 'webpage_alert',
                                    content: '请发布答题器'
                                })
                            }, 3 * 60 * 1000);
                            setTimeout(function () {
                                instance.sendMessage({
                                    key: 'webpage_alert',
                                    content: '请邀请学生发言'
                                })
                            }, 5 * 60 * 1000);
                        } else if (query.userType == USER_TYPE.STUDENT) {
                            setTimeout(function () {
                                instance.sendMessage({
                                    key: 'webpage_alert',
                                    content: '请举手'
                                })
                            }, 60 * 1000);
                        }
                    }
                }
            });
            instance.getReady();
        }

    </script>
</body>

</html>