SAAS 接入

无界云剪提供了第三方系统接入的功能，然后通过 iframe 嵌入到第三方系统中。

下面是 SAAS 接入的流程：

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给客户端
 */
const host = "https://video.h5ds.com";

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，该token就是user_01的token，token是临时的，每次获取的token是不同的
const token = await getToken();

2. 创建一个新的工程

获取到工程数据返回参数 res

/**
 * 创建一个新的H5
 */
function createMovieData(token) {
  const ndata = {
    title: "未命名",
    createTime: +new Date(),
    updateTime: +new Date(),
    poster: "",
    width: 1920,
    height: 1080,
    background: {},
    transitions: [],
    cameras: [],
    captions: [],
    elements: [],
    resouces: [],
  };
  return axios({
    method: "post",
    url: host + "/api/v1/user/apps/create",
    headers: {
      Authorization: token,
    },
    data: {
      source_id: "", //来源Id
      category_id: 0, //分类Id
      name: ndata.title, //名称
      description: ndata.title, //描述
      duration: 0, //时长（毫秒）
      width: ndata.width, //宽度
      height: ndata.height, //高度
      thumb: "", //封面图url
      data: ndata,
    },
  }).then((res) => res.data.data);
}

// 创建视频
const res = await createMovieData(token);

3. 进入到编辑器

需要使用到工程项目的res.id，token，通过iframe嵌入到第三方项目中即可

<iframe
  width="100%"
  height="100%"
  src={`${host}/editor/${res.id}?token=${token}`}
/>

SAAS说明

实际上我们拿到token之后，可以请求项目中全部的API接口，比如获取项目列表，删除项目，更新项目等等。具体的API文档购买后会提供。