# 前端接入说明

# 打包文件说明

前端工程打包后是一个dist文件夹, 文件目录如下

dist
- static
  - config
    - config.js
  - ....
  - 其它静态文件
- index.html

config.js 内容如下:

(function () {
  window.$nvsConfig = {
    apiHost: 'https://alieapi.meishesdk.com:8443/', // 云剪辑接口Host (统一配置)
    // apiHost: { // 按功能分别配置
    //   job: 'https://alieapi.meishesdk.com:8443/', // 任务相关
    //   user: 'https://alieapi.meishesdk.com:8443/', // 用户相关
    //   resource: 'https://alieapi.meishesdk.com:8443/', // 资源相关
    //   audio: 'https://alieapi.meishesdk.com:8443/', // 视频同步
    //   video: 'https://alieapi.meishesdk.com:8443/', // 成片相关
    //   material: 'https://alieapi.meishesdk.com:8443/', // 素材相关
    //   project: 'https://alieapi.meishesdk.com:8443/', // 工程相关
    //   recognition: 'https://alieapi.meishesdk.com:8443/' // 语音转写
    // },
    liveApiHost: 'https://alieapi.meishesdk.com:8888/', // 直播云剪辑 接口Host
    liveWsHost: 'wss://alieapi.meishesdk.com:10215/', // 直播云剪辑 webSocket Host
    isAuth: true, // 是否鉴权
    AuthUrl: 'https://eapi.meishesdk.com:7443/app/auth', // 鉴权地址
    backPath: '/Login', // 登录验证失败后回退的页面
    cosHost: 'https://alieasset.meishesdk.com' // 云存储host
  }
})();

apiHost 该值有两种类型, String 或 Object
1. String : 云剪辑接口 baseUrl , 通用配置该地址, 使前端请求统一使用该 baseUrl
2. Object : 不同类型的接口会使用不同的 BaseUrl
  - job : 任务相关. 对应接口任务信息 (opens new window) ,任务列表 (opens new window) , 删除任务 (opens new window)
  - user : 用户相关对应接口登录 , 注册 , 修改密码 , 获取验证码 . 如果不使用云剪的登录页面, 可忽略此配置
  - resource : 资源相关. 对应接口上传资源 (opens new window) ,删除资源 (opens new window) , 添加资源到项目 (opens new window) ,资源列表 (opens new window)
  - audio : 视频同步相关. 对应接口查询同步结果 (opens new window) ,视频对齐 (opens new window)
  - video : 成片相关. 对应接口成片创建 (opens new window) , 删除成片 (opens new window) ,成片列表 (opens new window)
  - material : 素材相关. 对应接口所有素材 (opens new window) ,素材列表 (opens new window)
  - project : 工程相关. 对应接口删除项目 (opens new window) ,更新项目 (opens new window) ,创建项目 (opens new window) ,项目列表 (opens new window) ,项目详情 (opens new window)
  - recognition : 语音转写. 对应接口发起转写任务 (opens new window) ,查询转写进度 (opens new window)
liveApiHost 直播云剪辑对应的接口 baseUrl 如果不使用直播云剪辑, 可忽略改配置
liveWsHost 直播云剪辑Websocket连接地址的 baseUrl , 实际连接地址为 liveWsHost/ws 如果不使用直播云剪辑, 可忽略改配置
isAuth : 是否鉴权, 如果为 false 鉴权失败后不会自动跳转 Home 页, 但是视频会有水印

如果为 true 鉴权失败后会自动跳转 Home 页

AuthUrl : 鉴权服务器地址. 该地址需要联系相关负责人
backPath : 在 Home , App 页面进行, 登录验证(验证用户 token 是否存在), 失败后路由进入的页面, 为空表示正常进入. 代码实现如下

beforeRouteEnter: (to, from, next) => {
    // ......省略部分代码
    if (!token) {
      if (window.$nvsConfig.backPath) {
        next({ path: window.$nvsConfig.backPath })
      } else next()
    } else next()
  }

cosHost : 云存储Host. **如果使用本地存储可忽略该条 **

# 页面跳转说明

# 跳转Home页(项目列表)

一般来说, 如果通过云剪辑的登录页面跳转到 Home 页没有问题, 如果您不需要使用该登录页面, 直接通过Url跳到 Home 页, 有以下两种方式

通过Url 的 query 形式将用户 token 传递过来, 例如

https://editor.meishesdk.com/Home?token=用户的token

在同源情况下可通过浏览器缓存传递过来.

localStorage.Authorization = 用户token 或者 localStorage.setItem('Authorization', 用户token) 进入 Home 页后系统会自动获取用户的项目列表, 成片列表等信息. **如果没有检测到 ****token** , 会自动跳转到登录页面

# 跳转App页(编辑页面)

如果是从 Home 页进入的 App 页面, 您可以忽略该段内容如果您是从自己的页面直接通过Url跳转到 App 页, **必须确保用户 ****token** 传递过来 , 传参方式同 Home 页 token 传参方式. 进入页面后会系统会根据有无 projectId 来判断是创新新工程还是打开已有的工程

创建新工程

需要参数: 工程名称, 工程画幅比传参方式:

Url:
- projectName 工程名称
- resolution 工程画幅比, 目前支持 16v9 和 9v16 , 默认为 16v9

例如: www.xxx.com/App?name=工程名称&resolution=16:9

浏览器缓存
- localStorage.nvsprojectname = 工程名称
- localStorage.nvsResolution= 工程画幅比16:9或者9:16
打开旧工程

需要参数: 工程Id. 系统检测到工程id后会自动调用接口请求工程信息, 成功后加载工程传参方式:

Url:
- projectId 工程Id

# 关于浏览器标签处的Icon和标题

此处的修改需要手动修改 index.html 文件

Icon: 将自己的 icon 放到 static 目录下, 然后修改文件中的图片地址 static/xxx.png
标题: 将图中圈中部分的 美摄云剪辑 和 Meishe\'s Cloud-Based VideoEditor 修改成自己的中文标题和英文标题

← 前端接入流程相关配置 →