Cloud Rendering Instructions

Cloud rendering refers to the synthesis and rendering of videos on the server side (based on the rendering capabilities of browser WebGL);

The test server configuration is as follows, and a single server supports a maximum concurrency of 12:

• Memory: 128G
• Graphics card: 4080super 16G
• CPU: i9

1080P 60FPS video rendering speed: about 200 frames/S, 5 concurrent.

1080P 60FPS video rendering speed: about 100 frames/S, 10 concurrent.

The following is the cloud rendering process:

1. Get Token

First, obtain the token through the secret key (appid and secret), where appid and secret are provided by the platform. For specific acquisition methods, please contact WeChat: mantousee

/**
 * md5 front-end encryption plugin: https://cdn.bootcdn.net/ajax/libs/blueimp-md5/2.19.0/js/md5.js
 * node environment can use: https://www.npmjs.com/package/crypto-js
 *
 * The following business is recommended to be implemented on the server side. Under normal circumstances, it is recommended not to expose secret and appid to the client
 */
function getToken() {
  return new Promise((resolve) => {
    const timestamp = +new Date();
    const secret = "Secret Key";
    const appid = "Application 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", // Unique identifier for the business user, it is recommended to use the user ID
      },
    }).done((res) => {
      resolve(res.data);
    });
  });
}

// Get the token
const token = await getToken();

2. Create Task

Create a task through the token

// Task id, global management
var taskIds = [];
// Mark start polling
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: "Frame rate", // Fixed parameters: 24, 25, 30, 50, 60
      resolution: "Resolution", // Fixed parameters: 480P, 720P, 1080P, 2K, 4K
      jsonUrl: "Path to the project data JSON file", // eg: https://video.h5ds.com/video/9715/apps/728527253573935104.json
    },
  }).then(async (res) => {
    taskIds.push(res.data.id);
    if (!startLoopSeek) {
      startLoopSeek = true;
      loopSeek(taskIds);
    }
  });
}

// Polling to detect encoding status, supports passing in multiple ids
async function loopSeek(ids) {
  const data = await seekTask(ids); // ids is the task id array
  data.forEach((d) => {
    switch (d.status) {
      case 0:
        console.log(`Task ${d.id} is being prepared`);
        break;
      case 1:
        console.log(`Task ${d.id} encoding progress: ${d.result.progress}%`);
        break;
      case 2:
        taskIds = taskIds.filter((d) => d !== d.id);
        console.log(
          `Task ${d.id} is completed, download address: https://cdn.h5ds.com${d.result.storageUrl}`
        );
        break;
      case 3:
        taskIds = taskIds.filter((d) => d !== d.id);
        console.error(`Task ${d.id} encoding failed`);
        break;
    }
  });

  // Poll every 1 second
  if (taskIds.length !== 0) {
    setTimeout(async () => {
      loopSeek(taskIds);
    }, 1000);
  } else {
    startLoopSeek = false;
  }
}

3. Polling Results

ids is the task id array, query the current encoding status, it is recommended that the polling cycle is not less than 1 second

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;
  });
}

4. Download Video

After the server synthesizes the video, it will return a resource URL, which can be written into an a tag:

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