通过 Web 上传 SDK，您可以上传本地视频或图片、管理视频封面，并创建和更新点播间，快速完成企业直播媒资接入。本文档介绍如何集成 Web 上传 SDK 并使用 Web 上传 SDK 完成上述功能。

前提条件 #

• 您已开通尊享版套餐。详见计费说明。
• 由于 Web 上传 SDK 的 API 不支持跨域调用，在集成 Web 上传 SDK 前，您需参考Web SDK 配置将您使用的域名 URL 加入白名单。
• 在火山引擎控制台获取账号 ID、Access Key ID (AK) 和 Secret Access Key (SK)：
  1. 登录火山引擎控制台。
  2. 在控制台页面，找到账号 ID 并点击复制按钮，保存账号 ID。
     
  3. 点击进入密钥管理页面。
  4. 单击新建密钥，即可创建一对 AK 和 SK。

客户端集成上传 SDK #

参考以下步骤，将上传 SDK 集成到您的 Web 应用中。

步骤一：引入 SDK #

在您项目的 .html 文件中添加以下代码引入 SDK。

<script src="https://unpkg.byted-static.com/byted/byte-live-console-uploader/1.0.0/dist/index.min.js"></script>

步骤二：初始化 SDK #

创建 uploader 实例，初始化 SDK。示例代码如下：

let uploader

document.getElementById('test').addEventListener('change', async function () {
    const fileList = this.files;
    // 从服务端获取用户 token
    const data = await (await fetch(`http://127.0.0.1:3000`, {
        mode: 'cors'
    })).json()

    // 创建 uploader 实例
    uploader = new ByteConsoleTools.Uploader({
        userId: "210020****",
        region: "cn-north-1",
        service: "iframeTest",
        videoConfig: {
            spaceName: "livesaas-new",
            processAction: [
                {
                    name: "GetMeta",
                },
            ]
        },
    // 包含 AccessKeyId 和 SecretAccessKey 的对象
        userToken: data.userToken,
    });
  // 上传前检查，详情参考下文
    uploader.initCheck({
        file: fileList,
        type: 'video',
    }).then(fileKey => {
        console.log(fileKey);
    }).catch(e => {
        console.log(e)
    })
});

创建 uploader 实例时，您需要设置以下参数：

{
  "AccessKeyId": "AKTPMzY4Y2Q5ZF*****",
  "SecretAccessKey": "Y2PtLnDJS/PrRe8V8ahl1y8KlvThYjTC4LJrZW*****"
}

processAction

用于视频上传后处理的 Action 对象数组，包含以下参数：

步骤三：上传前检查 #

在上传文件前，调用 initCheck 检查以下内容：

• 用户是否拥有可以访问企业直播媒资库的权限。
• 待上传的视频或图片是否符合以下要求：
  • 视频必须为 MP4 格式，且大小不超过 20 GB。
  • 图片必须为 PNG 或 JPG 格式，且大小不超过 2 GB。
• 企业直播媒资库的剩余空间是否足够。

上传视频或图片前检查的代码如下所示：

uploader.initCheck({
      file: fileList,
      type: 'video',
  }).then(fileKey => {
      console.log(fileKey);
  }).catch(e => {
      console.log(e)
  })

uploader.initCheck({
     file: fileList,
     type: 'image',
     vid: document.getElementById('vid-input').value
 }).then(fileKey => {
     console.log(fileKey);
 }).catch(e => {
     console.log(e)
 })

上传视频或图片前检查的相关参数如下表所示：

检查通过后，SDK 会返回上传任务 ID fileKey，例如 'file_149544227xxxx_xxxxxx'。

步骤四：控制上传任务 #

您可调用以下方法控制上传任务：

• 调用 start 启动上传任务。示例代码如下：

  uploader.start();
  

• 调用 pause 暂停上传任务。SDK 会暂存当前文件的上传信息。

  uploader.pause();
  

• 调用 restart 重启上传任务。SDK 会从暂停位置重新开始上传。

  uploader.restart();
  

• 调用 cancel 取消上传任务，并删除当前文件的上传信息。

  uploader.cancel();
  

步骤五：创建点播间 #

如果您希望在本地视频上传完成后自动创建点播间，您需要在 initCheck 中传入与点播间相关的参数。相关参数如下表所示。

示例代码如下所示。SDK 会先进行上传前检查，之后上传视频：

• 检查通过后，SDK 会返回上传任务 ID fileKey，例如 'file_149544227xxxx_xxxxxx'。
• 本地视频上传成功后，SDK 会创建点播间。

uploader.initCheck({
  newVideoRoomName: '<点播间名称>',
  file: fileList,   // 每次仅可上传一个文件。
  type: 'video',
});

uploader.start();

步骤六：更新点播间 #

调用 updateVideoRoom，通过传入视频 ID、或上传本地视频的方式，更新点播间。

以下示例代码展示了同时处理本地视频上传和 vids 指定视频上传的场景：SDK 会先上传本地视频文件，再上传 vids 中指定的视频。

uploader.updateVideoRoom({
  videoRoomId: '<点播间id>',  // 可通过监听 video_room_created_result 事件获取点播间 ID。详见文档末尾。
  file: fileList, // 每次仅可上传一个文件。
  type: 'video', // 固定取值为 `video`。
  vids: ['<vid1>', '<vid2>'],  // 传入视频的 ID。
  isAppend: true  // 保留点播间内已有视频，追加新视频。
});

步骤七：监听事件 #

监听上传任务事件

您可以参考以下示例代码监听上传任务的事件。

uploader.on('event_name', function(data) {
    console.log('event_name', data);
});

下表列出上传任务生命周期中 SDK 可能触发的事件。

监听点播间创建结果事件

video_room_created_result 用于监听点播间创建结果。示例代码如下：

uploader.on('video_room_created_result', result => {
  console.log(result);  // result.VideoRoomId
});

无论创建成功还是失败，SDK 都会触发该事件：

• 若点播间创建成功，将返回 VideoRoomId，即点播间 ID；
• 若创建失败，将返回具体错误信息。