# npm packaging specification

There is a dist folder when the frontend project been packaged,and the file directory is as follows

  • dist
    • static
      • config
        • config.js
      • ....
      • another static files
    • index.html

config.js configuration:

(function () {
    window.$nvsConfig = {
        apiHost: 'https://alieapi.meishesdk.com:8443/', // Meishe-Editor interface host(central configuration)
        // apiHost: { //  each function has its own configuration
        //   job: 'https://alieapi.meishesdk.com:8443/', //task related
        //   user: 'https://alieapi.meishesdk.com:8443/', // users related
        //   resource: 'https://alieapi.meishesdk.com:8443/', // resource related
        //   audio: 'https://alieapi.meishesdk.com:8443/', // video synchronization related
        //   video: 'https://alieapi.meishesdk.com:8443/', // finished-product related
        //   material: 'https://alieapi.meishesdk.com:8443/', // materials related
        //   project: 'https://alieapi.meishesdk.com:8443/', // project related
        //   recognition: 'https://alieapi.meishesdk.com:8443/' // phonetic transcription
        // },
        liveApiHost: 'https://alieapi.meishesdk.com:8888/', //      Live Meishe-Editor and interface Host
        liveWsHost: 'wss://alieapi.meishesdk.com:10215/', // Live Meishe-Editor and webSocket Host
        isAuth: true, // authentication or not
        AuthUrl: 'https://eapi.meishesdk.com:7443/app/auth', // authentication URL
        backPath: '/Login', // login failed and redirect to this page
        cosHost: 'https://alieasset.meishesdk.com' // cloud-storage host
    }
})();

  • apiHost this value has two types, String or Object
    1. String : Meishe-Editor interfacebaseUrl , The unified configuration should use this URL, and the front-end request uses the URL uniformlybaseUrl
    2. Object : every interface has its own BaseUrl
      • job : task related,the interface has some functions such as task information,task list,cancel task.
      • user : the user related,the interface has some functions such as login,register,modify password,get verify code.** you can ignore this item configuration if you did not use the Meishe-Editor login page .**
      • resource : resource related,the interface has some functions such as upload source,delete source,add a resource to project,resource list
      • audio : video alignment related,the interface has some functions such as query the synchronization results,video alignment.
      • video : finished product related,the interface has some functions such as create finished product,delete finished product,finished product list.
      • material : materials related,this interface has some functions such as material information,materials list.
      • project : project related,this interface has some functions such as create transcription task,query transcription progress.
      • recognition : Speech transcription. This interface has some functions such as starting transcription tasks, query the transcription process.
  • liveApiHost the URL of Live Meishe-Editor baseUrl you can ignore this item configuration if you did not use the LIVE Meishe-Editor .
  • liveWsHost Websocket connect URL of Meishe-Editor baseUrl , actual connect URL is liveWsHost/ws ** you can ignore this item configuration if you did not use the LIVE Meishe-Editor.**
  • isAuth : authentication or not,if false after authentication failed,there will redirect toHome page, but if the video has watermark trueauthentication failed and it will redirect to Home page automatically.
  • AuthUrl : authentication server URL,Please ask the related staff for help.
  • backPath : operate in thisHome , App pages , login verify( verify user's token existed or not), login failed and router redirect to this page, if this path is null and it can enter the page normally. please refer this code as follows
beforeRouteEnter: (to, from, next) => {
    // ......Part of the codes was been omitted
    if (!token) {
        if (window.$nvsConfig.backPath) {
            next({path: window.$nvsConfig.backPath})
        } else next()
    } else next()
}
  • cosHost : Cloud-storage Host**,you can ignore this item if you use local storage.**

# page redirection specification

# redirect to Home page(project list)

generally speaking, if there is no problem redirect from Meishe-Editor to Home page, if you do not need the Meishe login page,you can redirect to Home page by URL,there are two solution

  1. get the user' token from URL by query method.for example:

https://editor.meishesdk.com/Home?token=user's token

  1. get the user' Token from URL by browser cache when origin is same.

localStorage.Authorization = usertoken or localStorage.setItem('Authorization', usertoken)

The system will get the user's project list and finished product and so on when entered Home page.** if there is no Token,it will redirect to login page automatically**.

# Redirect to App page(Editing page)

If you enter theApp page from the Home page, you can ignore this item. If you redirect to App page from your own page with URL, we must make sure that the user's Token is available,the parameters transmission mode keep same as Home page token' s mode.After entering the page, the system will judge whether to create a new project or open an existing project according to the existence of projectid.

  1. create new project

required parameters: project name,project aspect ratio Parameters transmission mode :

  • Url:
    • projectName project name
    • resolution project aspect ratio ,we support 16v99v16 ,default is 16v9

for example: www.xxx.com/App?name=projectname&resolution=16:9 project aspect ratio ,we support 16v9 and 9v16 until now,and default is 16v9 For example:www.xxx.com/App?name=projectname&resolution=16:9

  • Browser cache

    • localStorage.nvsprojectname = project name
    • localStorage.nvsResolution= 工程画幅比16:9或者9:16 project aspect ratio is 16:9 or 9:16
  • Open existed project

    Required parameters: Project ID. after detecting the projectid, the system will automatically call the         interface to request project information, and load the project after success.
    

Parameters transmission mode:

  • Url:
    • projectId ProjectId

# icon and tittle at browser tab

The modification here requires manual modification index.html file. image.png

  • Icon: static/xxx.png Icon:Put your private icon into the static directory, and then modify the picture path static/xxx.png in the file.
  • tittle:Modify the 美摄云剪辑 and Meishe\'s Cloud-Based VideoEditor in the red circle and adjust into your private Chinese title and English title.