Upload SDK for Web

Last updated: 2020-07-09 12:07:27

    VOD provides a web upload SDK for scenarios where audio/video files are uploaded through a browser. If you need the SDK source code, please click here.

    Simple Upload of Video

    Importing SDK

    Importing by using script tag

    If webpack is not used, a script tag can be used for import in the following ways. This method will expose the global variable TcVod.

    • Download to the local file system
      Click here to download the SDK source code to the local file system, and import it by running the following command:
      <script src="./vod-js-sdk-v6.js"></script>

      Modify the value of src to the path to the source code you saved locally.

    • Import with CDN
      Import with CDN in the following ways:
      <script src="https://cdn-go.cn/cdn/vod-js-sdk-v6/latest/vod-js-sdk-v6.js"></script>

    Click here to view the demo imported through script. The source code of the demo can be viewed here.

    Importing by using npm command

    If webpack (such as Vue or React) is used, npm can be used for import.

    // After running npm install vod-js-sdk-v6, import directly on the page by running import
    import TcVod from 'vod-js-sdk-v6'

    Click here to view the source code of the demo imported through npm.

    The SDK relies on Promise, which should be imported if your browser version is low.

    Defining the function to get an upload signature

    function getSignature() {
      return axios.post(url).then(function (response) {
        return response.data.signature;
      })
    };

    url is the URL of your signature distribution service. For more information, please see Guide for upload from client.
    For details on how to calculate signature, please see Signature for Upload from Client.

    Video upload example

    // If imported through import, run new TcVod(opts)
    // new TcVod.default(opts) is imported through script
    const tcVod = new TcVod.default({
      getSignature: getSignature // The function to get the upload signature described above
    })
    
    const uploader = tcVod.upload({
      mediaFile: mediaFile, // Media file (video, audio, or image) in File type
    })
    uploader.on('media_progress', function(info) {
      console.log(info.percent) // Progress
    })
    
    // Callback result description
    // type doneResult = {
    //   fileId: string,
    //   video: {
    //     url: string
    //   },
    //   cover: {
    //     url: string
    //   }
    // }
    uploader.done().then(function (doneResult) {
      // Deal with doneResult
    }).catch(function (err) {
      // Deal with error
    })
    
    
    • opts in new TcVod(opts) refers to parameters of the TcVod API. For more information, please see API Description.
    • The upload method automatically selects simple upload or multipart upload based on the file size, eliminating your need to take care of every step in multipart upload.

    Advanced Features

    Uploading both video and cover

    const uploader = tcVod.upload({
      mediaFile: mediaFile,
      coverFile: coverFile,
    })
    
    uploader.done().then(function (doneResult) {
      // Deal with doneResult
    })

    Getting upload progress

    The SDK supports displaying the current upload progress in the form of callback:

    const uploader = tcVod.upload({
      mediaFile: mediaFile,
      coverFile: coverFile,
    })
    // When the video upload is completed
    uploader.on('media_upload', function(info) {
      uploaderInfo.isVideoUploadSuccess = true;
    })
    // Video upload progress
    uploader.on('media_progress', function(info) {
      uploaderInfo.progress = info.percent;
    })
    // When the cover upload is completed
    uploader.on('cover_upload', function(info) {
      uploaderInfo.isCoverUploadSuccess = true;
    })
    // Cover upload progress
    uploader.on('cover_progress', function(info) {
      uploaderInfo.coverProgress = info.percent;
    })
    
    uploader.done().then(function (doneResult) {
      // Deal with doneResult
    })

    For more information about callback values of xxx_upload and xxx_progress, please see description on multipart upload/replication tasks in Object Operations.

    Canceling upload

    The SDK supports canceling ongoing video or cover upload:

    const uploader = tcVod.upload({
      mediaFile: mediaFile,
      coverFile: coverFile,
    })
    
    uploader.cancel()

    Checkpoint restart

    The SDK supports automatically resumable upload with no human intervention required. When the upload is terminated unexpectedly (for reasons such as the browser is closed or the network connection is interrupted), you can upload the file again from where it left off, which helps reduce the upload time.

    API Description

    TcVod

    Parameter Name Required Type Description
    getSignature Yes Function Function used to acquire the upload signature.
    appId No number Once entered, this parameter will be automatically carried in the built-in statistics report.
    reportId No number Once entered, this parameter will be automatically carried in the built-in statistics report.

    TcVod.upload

    Parameter Name Required Type Description
    mediaFile No File Media file (video, audio, or image).
    coverFile No File Cover file.
    mediaName No string The filename that will overwrite the metadata in the media file.
    fileId No string Passed in when the cover is modified.
    reportId No number Once entered, this parameter will be automatically carried in the built-in statistics report and overwrite the settings in the constructor.

    Events

    Event Name Required Event Description
    media_upload No When the media file is successfully uploaded.
    cover_upload No When the cover is successfully uploaded.
    media_progress No Media file upload progress.
    cover_progress No Cover file upload progress.

    FAQs

    1. How to get the File object?
      Use the input tag with the type being file to get the File object.
    2. Is there a size limit for an uploaded file?
      Up to 60 GB.
    3. What browsers does the SDK support?
      Chrome, Firefox, and other mainstream browsers that support HTML5 as well as IE 10 or above.
    4. How to implement upload pause or resumable upload?
      Automatically resumable upload is implemented at the underlying layer of the SDK; therefore, the essence of pause is to call the uploader.cancel() method. Similarly, upload resumption after pause is also done by calling the initial tcVod.upload method. The difference lies in that the parameters of this method when the upload is resumed should be the previously cached parameters (for example, a global variable can be used to store the parameters when the upload is started and then cleared after upload is completed).

    Was this page helpful?

    Was this page helpful?

    • Not at all
    • Not very helpful
    • Somewhat helpful
    • Very helpful
    • Extremely helpful
    Send Feedback
    Help