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-plugin/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 getMediaList = (params, callback) => {
  // params固定参数如下：
  // {
  //   num : number; // 每页条数
  //   page : number; // 页数
  // }
  $.ajax({
    type: 'POST',
    url: '媒资请求地址',
    data: params,
    contentType: "JSON",
    dataType: 'JSON',
    async: false,
    success: function (res) {
      // res格式要求如下：
      // [
      //   {
      //     id: string; // id
      //     title: string; // 文件名称
      //     format: string; // 文件扩展名
      //     height: number; // 高
      //     width: number; // 宽
      //     size: number; // 文件大小（Byte）
      //     classify: string; // 标签id
      //     fileType: string; // 文件类型 image | video |audio
      //     extdata: {
      //       duration: number; // 持续时间（秒）
      //     };
      //     thumbnail: string; // 缩略图地址
      //     url: string; // 文件地址
      //   },{
      //     ...
      //   },
      //   ...
      // ]
      if (res格式不符合要求) {
        res = res格式整理...
      }
      callback(res)
    },
    error: function() {
      callback()
    }
  })
}
  
/**
 * 延时播控开启，根据自身需求修改方法体
 * @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)作为输入框内容
 */
const getMediaListCustom = () => {
  return new Promise((resolve, reject) => {
    // res格式要求如下：
    // {
    //   flag: number; // 状态码，100为成功
    //   flagString: string; // 状态说明
    //   text: string, // 媒资标题
    //   data: string; //  媒资地址
    //   thumbnailData: string, // 媒资封面地址
    // }
    resolve(res)
  })
}

/**
 *  使用时长列表(小时)：代表按当前导播台结束时间后续添加的使用时间
 *   类型：Array<number> ，例如 const delayHourArr = [ 3, 8 ]
 */
const delayHourArr = []
  
LCPS.Config({
  id: string, // 导播台工程id，必传
  secretKey: string, // 工程秘钥
  mediaBtnText: string, // 自定义媒资按钮文案，不设置默认为 '上传媒资'
  mediaBtnCustom: boolean, // 自定义媒资按钮，默认为 false 不显示，开启时会替换原有的选择媒资按钮，点击按钮则会调用 getMediaListCustom
  getMediaListCustom: null, // 自定义媒资按钮触发回调，如果将 mediaBtnCustom 置为 true ，请实现
  getMediaList: getMediaList,
  delayHourArr: null, // 自定义导播台延期使用时长的下拉列表  如上 delayHourArr 数组
  delayExtendOpen: delayExtendOpen,
  delayExtendClose: delayExtendClose,
  delayExtendDelay: delayExtendDelay,
  delayExtendChangeOutput: delayExtendChangeOutput,
  delayExtendSizeChangeOutput: delayExtendSizeChangeOutput,
  delayCustom: null, // 自定义延期回调，默认为空，如果配置方法则在导播台延期时触发并传入具体延期时间(小时) 如上 delayCustom 方法
  closeCustom: null, // 自定义关闭回调，默认为空，如果设置方法则在导播台关闭时触发 如上 closeCustom 方法
  // 自定义功能模块显示，不配置moduleCustomized时除部分扩展功能则默认全部显示
  moduleCustomized: {
    // 顶部高级设置按钮
    advancedSetting: {
      show: boolean, // 显示高级设置按钮
      fix: boolean, // 修复场景问题
      destroy: boolean, // 关闭导播台
      simulation: boolean, // 模拟推流
      monitor: boolean, // 大屏部署
      delay: boolean, // 延时信息查看
      shortcut: boolean // 快捷键
    },
    // 顶部输出设置按钮
    outputSet: {
      show: boolean, // 显示输出设置按钮
      enable: boolean, // 是否启用
      publishURL: boolean, // 输出流地址
      videoRecord: boolean, // 自动录制到
      videoSize: boolean, // 视频大小
      videoBitrate: boolean, // 视频码率
      audioBitrate: boolean, // 音频码率
    },
    // 右侧tab切换栏
    expansionModule: {
      defaultTab: "pip",  // 默认选中的tab
      pip: boolean, // 画中画
      advance: boolean, // 高级功能
      gaslet: boolean, // 垫片
      delay: boolean, // 延时播控
      // 延时播控扩展（嵌入外部页面，不配置则不显示）
      delayExtend: {
        show: boolean, // 是否开启扩展功能
        tabExplain: string, // tab说明文字，可不配置，默认："延时时间（t）"
        tab1: string, // tab1文字，可不配置，默认："0 < t ≤ 30秒"
        tab2: string, // tab2文字，可不配置，默认："30秒 < t ≤ 3600秒"
        startupInstructions: string // 开启按钮说明，可不配置，默认："（开启后将产生计费）"
      }
    },
    // 垫片导入表单
    gasketForm: {
      media: boolean, // 媒资
      url: boolean, // 地址
      thumbnail: boolean, // 封面图
    },
    // 信源流类型选择框
    streamOptions: {
      push: boolean, // Rtmp 推流
      qrCode: boolean, // 显示 Rtmp 推流二维码
      webrtc: boolean, // WebRTC推流
      rtsp: boolean, // Rtsp推流
      srt: boolean, // Srt推流
      pull: boolean, // 拉流
      source: boolean, // 信源
      media: boolean, // 媒资
      img: boolean, // 图片
    },
    // 外部扩展模块（慢直播、编播）
    extensions: boolean,
    portraitBtn: boolean // 横竖屏切换按钮
  }
})
  
// 初始化
LCPS.Init()