云渲染说明

云渲染是指在服务端进行视频的合成和渲染（基于浏览器webgl的渲染能力）；

测试服务器配置如下，单台服务器支持最大并发数量12个：

• 内存：128G
• 显卡：4080super 16G
• CPU：i9

1080P 60FPS视频渲染速度：200帧左右/S，5并发。

1080P 60FPS视频渲染速度：100帧左右/S，10并发。

下面是云渲染的流程：

1、获取 token

先通过秘钥（appid 和 secret）获取token，其中appid和secret由平台提供，具体获取方法请联系微信：mantousee

/**
 * md5前端加密插件：https://cdn.bootcdn.net/ajax/libs/blueimp-md5/2.19.0/js/md5.js
 * node环境可以使用: https://www.npmjs.com/package/crypto-js
 *
 * 下面的业务建议在服务端实现，正常情况下建议不要暴露secret和appid给客户端
 */
function getToken() {
  return new Promise((resolve) => {
    const timestamp = +new Date();
    const secret = "秘钥";
    const appid = "应用appid";
    $.ajax({
      type: "post",
      url: "https://www.h5ds.com/api/v1/third/login",
      headers: {
        appid,
        sign: md5(timestamp + secret).toString(),
        timestamp,
      },
      data: {
        userId: "user_01", //业务方用户的唯一标识，建议使用用户ID
      },
    }).done((res) => {
      resolve(res.data);
    });
  });
}

// 获取到token
const token = await getToken();

1、创建任务

通过 token 创建任务

// 任务id，全局管理
var taskIds = [];
// 标记开始轮训
var startLoopSeek = false;

async function createTask() {
  $.ajax({
    type: "post",
    url: "https://video.h5ds.com/api/v1/user/app/tasks/create",
    headers: {
      Authorization: token,
    },
    data: {
      fps: "帧率", // 固定参数：24,  25, 30, 50, 60
      resolution: "分辨率", // 固定参数：480P， 720P，1080P，2K，4K
      jsonUrl: "工程数据JSON文件的路径", // eg：https://video.h5ds.com/video/9715/apps/728527253573935104.json
    },
  }).then(async (res) => {
    taskIds.push(res.data.id);
    if (!startLoopSeek) {
      startLoopSeek = true;
      loopSeek(taskIds);
    }
  });
}

// 轮训检测编码状态，支持传入多个id
async function loopSeek(ids) {
  const data = await seekTask(ids); // ids是任务id数组
  data.forEach((d) => {
    switch (d.status) {
      case 0:
        console.log(`任务${d.id}准备中`);
        break;
      case 1:
        console.log(`任务${d.id}编码进度：${d.result.progress}%`);
        break;
      case 2:
        taskIds = taskIds.filter((d) => d !== d.id);
        console.log(
          `任务${d.id}处理完成，下载地址：https://cdn.h5ds.com${d.result.storageUrl}`
        );
        break;
      case 3:
        taskIds = taskIds.filter((d) => d !== d.id);
        console.error(`任务${d.id}编码失败`);
        break;
    }
  });

  // 每隔1秒，轮训一次状态
  if (taskIds.length !== 0) {
    setTimeout(async () => {
      loopSeek(taskIds);
    }, 1000);
  } else {
    startLoopSeek = false;
  }
}

2、轮询结果

ids 是任务 id 数组，查询当前的编码状态，建议轮训周期不要小于 1 秒

function seekTask(ids) {
  return $.ajax({
    type: "post",
    url: "https://video.h5ds.com/api/v1/user/app/tasks/status",
    headers: {
      Authorization: token,
    },
    data: {
      ids: [...ids],
    },
  }).then((res) => {
    return res.data;
  });
}

3、下载视频

服务端合成视频后，会返回一个资源 URL，可以将此链接写入到一个 a 标签中:

<a target="_blank" download="xxx.mp4" href="https://cdn.h5ds.com/xxx.mp4"
  >下载MP4<a />
</a>