 |
帮助列表 |
搜索
云导播（活动）页面 新版接入说明
温馨提醒：使用云导播产品系列的api，还未获得授权。请联系官方人员，联系电话：400-663-6063
HTML
<div id="app"></div>
引入js
<script type="text/javascript" src="//cdn.aodianyun.com/static/jquery/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="//cdn.aodianyun.com/lcps-combine/v1/js/comment.js"></script>
配置选项
以下对下列方法的部分信息进行统一说明：
params
活动导播台的调用该方法时固定传入的请求参数
后端可视情况使用，前端可根据自身需要修改
具体传入参数详见各方法体
callback
活动导播台回调函数
调用方法成功后后端回传的res数据需以正确格式传入callback
活动导播台使用回传数据方能进行后续动作
若后端返回的数据不符合要求格式，需在方法体内整理成正确格式后再传入callback
具体格式要求详见各方法体
ajax请求结果success
通过回传数据中的flag（状态码）和flagString（状态说明）区分请求结果
flag为100时即正常请求成功，后续动作可正常进行
flag为100以外的数字时即请求结果异常，活动导播台不进行后续动作并弹出显示flagString
当前在活动导播台中对flag只区分100与非100
ajax请求结果error
界面弹出显示“请求失败”
方法的取舍
实际使用中用到的方法需按照文档要求实现
无需实现的方法则保留空方法体即可
如媒资无需实现时：
var getMediaList = () => {}/**
* 延时播控开启，根据自身需求修改方法体
* @param {*} params 请求参数
* @param {*} callback 回调函数
*/
var delayExtendOpen = (params, callback) => {
// params固定参数如下：
// {
// flowUrl: string; // 活动导播台pgm输出地址，即延时导播台信源
// expiresTime: number; // 活动导播台剩余运行时间（秒）
// projectId: string | number; // 延时导播台工程id，不传入则表示新建延时导播台
// sceneWidth: number; // 活动导播台分辨率，宽
// sceneHeight: number; // 活动导播台分辨率，高
// outEnable: boolean; // 延时是否开启输出
// audioBitrate: string; // 音频码率( 如. 128k )
// audioOnly: boolean; // 只输出音频
// enable: boolean; // 是否启用
// publishToLPS: boolean; // 使用LPS推流服务，以支持 5 路以上推流。(提醒：启用会产生LPS费用)
// publishURL: string; // 输出流地址
// videoBitrate: string; // 视频码率( 如. 1500k )
// videoCBR: boolean; // 视频固定码率CBR
// videoRecord: boolean; // 自动录制到MSS
// videoSize: string; // 视频大小( 如. 320x240 / 320x? / ?x240 后2种格式为等比例缩放 )
// ...urlParams; // 延时导播台页面地址url带的参数全部传入，第一次请求无
// }
$.ajax({
type: 'POST',
url: '请求地址',
data: JSON.stringify(params),
contentType: "JSON",
dataType: 'JSON',
async: true,
success: function (res) {
// res格式要求如下：
// {
// flag: number; // 状态码，100为成功
// flagString: string; // 状态说明
// data: {
// data: string; // 延时导播台页面地址url
// projectId: string | number; // 延时导播台id
// }
// }
if (res格式不符合要求) {
res = res格式整理...
}
callback(res)
},
error: function() {
callback()
}
})
}
/**
* 延时播控关闭，根据自身需求修改方法体
* @param {*} params 请求参数
* @param {*} callback 回调函数
*/
var delayExtendClose = (params, callback) => {
// params固定参数如下：
// {
// id: string | number; // 延时导播台id
// ...urlParams; // 延时导播台页面地址url带的参数全部传入
// }
$.ajax({
type: 'POST',
url: '请求地址',
data: JSON.stringify(params),
contentType: "JSON",
dataType: 'JSON',
async: true,
success: function (res) {
// res格式要求如下：
// {
// flag: number; // 状态码，100为成功
// flagString: string; // 状态说明
// }
if (res格式不符合要求) {
res = res格式整理...
}
callback(res)
},
error: function() {
callback()
}
})
}
/**
* 延时播控延期，根据自身需求修改方法体
* @param {*} params 请求参数
* @param {*} callback 回调函数
*/
var delayExtendDelay = (params, callback) => {
// params固定参数如下：
// {
// id: string | number; // 延时导播台id
// useHours: number; // 延期时间（小时）
// ...urlParams; // 延时导播台页面地址url带的参数全部传入
// }
$.ajax({
type: 'POST',
url: '请求地址',
data: JSON.stringify(params),
contentType: "JSON",
dataType: 'JSON',
async: true,
success: function (res) {
// res格式要求如下：
// {
// flag: number; // 状态码，100为成功
// flagString: string; // 状态说明
// }
if (res格式不符合要求) {
res = res格式整理...
}
callback(res)
},
error: function() {
callback()
}
})
}
/**
* 开启延时导播设置输出信息时调用
* @param {*} params 请求参数
* @param {*} callback 回调函数
*/
var delayExtendChangeOutput = (params, callback) => {
// params固定参数如下：
// {
// formatIndex: 0, // 参数值固定 (输出支持多个，但是一般只能用一个，index为0)
// notRestart: false // 参数值固定(表示发布列表，可以动态增删，不断流)
// audioBitrate: string; // 音频码率( 如. 128k )
// audioOnly: boolean; // 只输出音频
// enable: boolean; // 是否启用
// publishToLPS: boolean; // 使用LPS推流服务，以支持 5 路以上推流。(提醒：启用会产生LPS费用)
// publishURL: string; // 输出流地址
// videoBitrate: string; // 视频码率( 如. 1500k )
// videoCBR: boolean; // 视频固定码率CBR
// videoRecord: boolean; // 自动录制到MSS
// videoSize: string; // 视频大小( 如. 320x240 / 320x? / ?x240 后2种格式为等比例缩放 )
// }
$.ajax({
type: 'POST',
url: '请求地址',
data: JSON.stringify(params),
contentType: 'JSON',
dataType: 'JSON',
async: true,
success: function(res) {
// res格式要求如下：
// {
// flag: number; // 状态码，100为成功
// flagString: string; // 状态说明
// }
if (res格式不符合要求) {
res = res格式整理...
}
callback(res)
},
error: function() {
callback()
}
})
}
/**
* 活动导播台横竖屏切换时调用
* @param {*} params 请求参数
* @param {*} callback 回调函数
*/
var delayExtendSizeChangeOutput = (params, callback) => {
// params固定参数如下：
// {
// id : number // 延时导播台工程 id
// sceneWidth : number // 输出分辨率(宽)
// sceneHeight : number // 输出分辨率(高)
// }
$.ajax({
type: 'POST',
url: '请求地址',
data: JSON.stringify(params),
contentType: 'JSON',
dataType: 'JSON',
async: true,
success: function (res) {
// res格式要求如下：
// {
// flag: number; // 状态码，100为成功
// flagString: string; // 状态说明
// }
if (res格式不符合要求) {
res = res格式整理...
}
callback(res)
},
error: function() {
callback()
}
})
}
/**
* 自定义延期回调，根据自身需求修改方法体，延期时间(小时)自动传入，成功后会自动调用延时播控的延期方法 delayExtendDelay
* @param {*} delayTime 请求参数
*/
const delayCustom = (delayTime) => {
// delayTime : number // 延期时间(小时)
return new Promise((resolve, reject) => {
// res格式要求如下：
// {
// flag: number; // 状态码，100为成功
// flagString: string; // 状态说明
// }
resolve(res)
})
}
/**
* 自定义关闭导播台回调，根据自身需求修改方法体，成功后会跳转到关闭页面
*/
const closeCustom = () => {
return new Promise((resolve, reject) => {
// res格式要求如下：
// {
// flag: number; // 状态码，100为成功
// flagString: string; // 状态说明
// }
resolve(res)
})
}
/**
* 自定义媒资按钮触发回调，需要设置 mediaBtnCustom 为 ture 来触发，结果返回取媒资地址(data)作为输入框内容
* @param boolean duo 是否多选，true 多选 false 单选
* @param string|null type 触发类型，'pic' 表示场景中的选择图片， null 表示选择媒资
*/
const getMediaListCustom = (duo, type) => {
return new Promise((resolve, reject) => {
// res格式要求如下：
// {
// flag: number; // 状态码，100为成功
// flagString: string; // 状态说明
// text: string, // 媒资标题
// thumbnailData: string, // 媒资封面地址
// data: string; // 媒资地址/场景上传图片地址(单选时返回)
// duoData: string[]; // 媒资地址(多选时返回)
// }
resolve(res)
})
}
/**
* 自定义信源按钮触发回调，需要设置 souBtnCustom 为 ture 来触发，结果返回取信源地址(data)作为输入框内容
*/
const getSourceListCustom = () => {
return new Promise((resolve, reject) => {
// res格式要求如下：
// {
// flag: number; // 状态码，100为成功
// flagString: string; // 状态说明
// data: string; // 信源地址
// }
resolve(res)
})
}
/**
* 自定义场景上传图片触发回调，需要设置 upPicCustom 为 ture 来触发，结果返回已上传后的图片地址(data)作为场景中字幕条，比分扳的背景图
*/
const getUpPicCustom = () => {
return new Promise((resolve, reject) => {
// res格式要求如下：
// {
// flag: number; // 状态码，100为成功
// flagString: string; // 状态说明
// data: string; // 图片地址
// }
resolve(res)
})
}
/**
* 自定义延期按钮触发回调，需要设置 extendBtnCustom 为 ture 来触发，回调中需要执行导播台延期操作
*/
const popExtendCustom = () => {
return new Promise((resolve, reject) => {
// res格式要求如下：
// {
// flag: number; // 状态码，100为成功
// flagString: string; // 状态说明
// }
resolve(res)
})
}
/**
* 保存信道输入配置回调
* @param {Object} envConfig 传入参数
*/
const setSourceCallback = envConfig => {
return new Promise((resolve, reject) => {
// res格式要求如下：
// {
// flag: number; // 状态码，100为成功
// flagString: string; // 状态说明
// }
resolve(res)
})
}
/**
* iframe 模式下多选按钮回调
* @param boolean duo 是否多选，true 多选 false 单选
*/
const multipleCallback = duo => {}
/**
* iframe 模式下回显数据回调
* @param '媒资'|'信源' type 类型
* @param {Object} obj 回显数据
*/
const previousDataCallback = (type, obj) => {}
/**
* 使用时长列表(小时)：代表按当前导播台结束时间后续添加的使用时间
* 类型：Array<number> ，例如 const delayHourArr = [ 3, 8 ]
*/
const delayHourArr = []
LCPS.Config({
id: string, // 导播台工程 id，必传
secretKey: string, // 工程秘钥，必传
token: string, // apaas token
padCustom: boolean, // 自定义延时模块点击垫片设置，默认为 false ，开启后点击按钮则会调用 getMediaListCustom
picBtnCustom: boolean, // 自定义场景中选择图片，默认为 false ，开启后点击按钮则会调用 getMediaListCustom
mediaBtnText: string, // 自定义媒资按钮文案，不设置默认为 '上传媒资'
mediaBtnCustom: boolean, // 自定义媒资按钮，默认为 false 不显示，开启时会替换原有的选择媒资按钮，点击按钮则会调用 getMediaListCustom
getMediaListCustom: null, // 自定义媒资按钮触发回调，如果将 mediaBtnCustom 置为 true ，请实现
souBtnText: string, // 自定义信源按钮文案，不设置默认为 '选择信源'
souBtnCustom: boolean, // 自定义信源按钮，默认为 false 不显示，开启时会出现自定义信源按钮和信源输入框，点击按钮则会调用 getSourceListCustom
getSourceListCustom: null, // 自定义信源按钮触发回调，如果将 souBtnCustom 置为 true ，请实现
upPicCustom: boolean, // 场景自定义上传图片按钮，默认为 false ，开启时点击按钮则会调用 getUpPicCustom
getUpPicCustom: null, // 场景自定义上传图片按钮回调，如果将 upPicCustom 置为 true ，请实现
extendBtnText: string, // 自定义延期按钮文案，不设置默认为 '延期'
extendBtnCustom: boolean, // 自定义延期按钮，默认为 false 不显示，开启时会出现自定义延期按钮，点击按钮则会调用 popExtendCustom
popExtendCustom: null, // 自定义延期按钮触发回调，如果将 extendBtnCustom 置为 true ，请实现
setSourceCallback: null, // 保存信道输入配置回调，将传入 envConfig 参数，如配置则在保存设置输入后执行
delayHourArr: null, // 自定义导播台延期使用时长的下拉列表 如上 delayHourArr 数组
delayExtendOpen: delayExtendOpen,
delayExtendClose: delayExtendClose,
delayExtendDelay: delayExtendDelay,
delayExtendChangeOutput: delayExtendChangeOutput,
delayExtendSizeChangeOutput: delayExtendSizeChangeOutput,
delayCustom: null, // 自定义延期回调，默认为空，如果配置方法则在导播台延期时触发并传入具体延期时间(小时) 如上 delayCustom 方法
closeCustom: null, // 自定义关闭回调，默认为空，如果设置方法则在导播台关闭时触发 如上 closeCustom 方法
/* iframe 方式 */
mediaBoxHeight: number, // 媒资 iframe 高度 单位: px
sourceBoxHeight: number, // 信源 iframe 高度 单位: px
mediaIframe: string, // 媒资 iframe 地址(嵌入替换信道输入设置中选择部分，若配置将忽略回调方式)
sourceIframe: string, // 信源 iframe 地址(嵌入替换信道输入设置中选择部分，若配置将忽略回调方式)
multipleCallback: null, // 媒资选择中多选按钮触发回调，在 iframe 模式下切换单多选会调用 multipleCallback
previousDataCallback: null, // 媒资 和 信源 回显数据回调(在切换流类型时候触发)
// 自定义功能模块显示，不配置moduleCustomized时除部分扩展功能则默认全部显示
moduleCustomized: {
// 默认输出设置
defaultOutput: {
show: boolean // 是否显示
},
// 顶部高级设置按钮
advancedSetting: {
show: boolean, // 显示高级设置按钮
fix: boolean, // 修复场景问题
destroy: boolean, // 关闭导播台
delay: boolean, // 延时信息查看
},
// 右侧 tab 切换栏
expansionModule: {
defaultTab: "pip", // 默认选中的tab
pip: boolean, // 画中画
advance: boolean, // 高级功能
gaslet: boolean, // 垫片
delay: boolean, // 延时模块功能 ( 开启延时模块默认显示延时扩展 )
// 延时播控扩展( 支持 0 - 3600s 内延时，不配置 delayExtend 时默认显示 )
delayExtend: {
show: boolean // 是否显示
}
},
// 信源流类型选择框
streamOptions: {
push: boolean, // Rtmp 推流
qrCode: boolean, // 显示 Rtmp 推流二维码
webrtc: boolean, // WebRTC推流
pull: boolean, // 拉流
source: boolean, // 信源
media: boolean, // 媒资
img: boolean, // 图片
desktop: boolean, // 桌面推流
camera: boolean, // 摄像头
ppt: boolean, // PPT
page: boolean // 网页地址
},
// 定时任务模块
extensions: boolean
}
})
// 初始化
LCPS.Init()
// 发送媒资，信源地址数据给导播台(配置嵌入时调用有效)
/**
* @param { type: 'source' | 'media', data: { id:number , url:string }[] } obj
*/
// LCPS.setUrl(obj)
// 例如
// LCPS.setUrl({ type: 'source', data: 'url-source' })
// LCPS.setUrl({ type: 'media', data: 'url-media' })
