伯索开放平台
首页API文档SDK文档伯索官网
首页API文档SDK文档伯索官网
  1. 批注SDK接入
  • 直播SDK接入
    • WEB版本
      • WEB版本
    • iOS版本
      • IOS版本
    • Android版本
      • Android版本
  • 微课SDK接入
    • WEB版本
      • WEB版本
    • iOS版本
      • IOS版本
    • Android版本
      • Android版本
  • 批注SDK接入
    • Web版本
      • Web版本
    • iOS版本
      • IOS版本
    • Android版本
      • Android版本
  • 签名加密
    • 签名加密
  • 回调接口接入流程
    • 回调接口接入流程
  • 文档解析接入方式
    • 文档解析接入方式
  • 历史课堂接入方式
    • 历史课堂接入方式
  • 历史课堂转视频接入方式
    • 历史课堂转视频接入方式
  • 历史课堂/微课下载接口
    • 历史课堂/微课下载接口
  1. 批注SDK接入

Web版本

一. 引用在线JS库资源
<script type='text/javascript' src='https://wwwr.plaso.cn/static/sdk/annotate/5.00/js/plasoAPI/annotateSDK.js'></script>
annotateSDK.js会在window上注入AnnotateSDK对象
二. 启动页面
new AnnotateSDK(config, apiList);
configconfig是Object类型,包含以下参数
参数名参数类型是否必填说明
urlstring是批注页面url,拼接方式请查阅 这里
multiOutputbool否是否返回多个结果(一张图片对应一个结果), 默认值为false
apiList定义了一些需要和批改页面交互的API,示例代码如下:
 // apiList API汇总

   var apiList = {
        // 用于批改页面获取待批改的图片,图片需要配置跨域访问
        getInitImageList: function() {
            return ['https://download.plaso.cn/static/sdk/websdkdemo/imgs/zuoye_demo1.jpeg',
            'https://download.plaso.cn/static/sdk/websdkdemo/imgs/zuoye_demo2.jpeg',
            'https://download.plaso.cn/static/sdk/websdkdemo/imgs/zuoye_demo3.jpg'];
        },

        // 发送作业所需的query,会在点击发送按钮的时候被批改页面调用
        getSendQuery: function() {
            /*
            * beginTime:时间戳(秒) 签名生效的开始时间
            * validTime:签名的有效时长,单位是秒
            * signature:签名
            */
            //生成签名示例
            var params = {
                appId: 'demo',
                exerciseId: zyId,
                beginTime: parseInt(Date.now() / 1000),
                validTime: 3600
            }

            var query = genQuery(params);
            var signature = sign(query);
            return `${query}&signature=${signature}`;
        },

        // 发送完成后,批改页面会调用此方法,让使用者可以保存作业的关键信息,使用者保存完成后需要返回true或者Promise.resolve()
        saveResult: function(result) {
            // result = {
            // recordId: 5d6492469e95d05722159626, //伯索生成的作业记录的id,在播放作业的时候用到,使用者可以配合exerciseId作一一对应来存放
            // accuracy: 0.5, // 正确率
            // grade: 0, // ['努力', '过关', '不错', '良好', '优秀'],返回的数字和数组下标对应
            // }

            // 注意!!!: 如果为多结果输出,则result格式为数组,数据元素格式同上,即 result=[{},{},{}]
            if (!(result instanceof Array)) {
                result = [result];
            }
            for (var i = 0; i < result.length; i++) {
                // 播放
                console.log("https://wwwr.plaso.cn/static/sdk/annotate/5.00/?" + this.getWeikeQuery(result[i].recordId))
            }

            return Promise.resolve();
        },

        // 点击批改页面‘录制微课’会调用此方法,获取录制微课的地址
        getWeikeUrl: function() {
            /**
             * appId:应用标识(必填)
             * meetingType:会议标识,mini代表制作微课(必填)
             * meetingId: 微课id,唯一标识该微课;使用ASSIIC字符,不得包含/,\,空格等(必填)
             * userType:speaker,填写此参数会进入多页模式,否则是单页模式(非必填)
             * userName:会议登录的用户名(必填)
             * autoClose:1,填写此参数会在点击完成时自动关闭录制页面(非必填)
             * beginTime:时间戳(秒) 签名生效的开始时间
             * validTime:签名的有效时长,单位是秒
             * signature:签名
            */

            var params = {
                appId: 'demo',
                meetingType: 'mini',
                meetingId: '1234',
                userType: 'speaker',
                userName: 'hello',
                autoClose: 1,
                beginTime: parseInt(Date.now() / 1000),
                validTime: 3600
            }
            var query = genQuery(params);
            var signature = sign(query);
            return `https://www.plaso.cn/liveclass/recorder/?${query}&signature=${signature}`;
        },

        // 点击批改页面‘引用收藏’会调用此方法,获取已收藏的微课列表
        getFavoriteList: function() {
            //单个微课格式
            // {
            //     myid, 必须,(使用录制微课sdk页面录制完成时生成的recordId)
            //     name, 必须
            //     url, 可选,封面
            //     duration, 必须, 时长
            //     size,可选,文件大小,单位B
            // }
            return [];
        },

        // 播放作业里的微课时会调用此方法
        getWeikeQuery: function(recordId) {
            /**
             * appType:player,表示调用微课播放器(必填)
             * appId:应用标识(必填)
             * recordId:伯索生成的微课ID(必填)
             * withoutC:true,true表示播放器不显示关闭按钮(非必填)
             * beginTime:时间戳(秒) 签名生效的开始时间
             * validTime:签名的有效时长,单位是秒
             * signature:签名
            */

            var params = {
                appType: 'annotateSDKPlayer',
                appId: 'demo',
                recordId: recordId,
                withoutC: true,
                beginTime: parseInt(Date.now() / 1000),
                validTime: 3600
            }
            var query = genQuery(params);
            var signature = sign(query);
            return `${query}&signature=${signature}`;
        }
    }
三.注一:拼接批注页面URL
url一定要使用https协议,前缀为: https://wwwr.plaso.cn/static/sdk/annotate/5.00/? 后跟参数,使用 & 符号拼接, 示例: https://wwwr.plaso.cn/static/sdk/annotate/5.00/?appType=annotateSDK&appId=plaso-sdk-demo-id&exerciseId=abcd1234
参数名参数类型是否必填说明
appTypestring是固定值 annotateSDK ,不能变更。
appIdstring是由伯索分配的开发者账号id。
exerciseIdstring是一份作业的唯一标识,由使用者生成。
四.注二:生成签名
apiList中的getSendQuery里需要的生成签名,请参考 签名加密 |
需要参与签名的业务参数有:
参数名说明
exerciseId客户自己生成的唯一作业id。
beginTime签名起效时间, Unix epoch格式,单位秒。
签名函数一定调用服务端服务, 进行基本鉴权, 一定不要将 appkey 明文暴露在js代码里。
五. Demo示例
请访问 Demo示例
修改于 2023-11-17 06:42:31
上一页
批注SDK接入
下一页
Web版本
Built with