文档首页> > 上传SDK> 客户端上传> JavaScript上传SDK(2.0版)

JavaScript上传SDK(2.0版)

分享
更新时间: 2019/08/23 16:30

2.0版JavaScript上传SDK在上传媒资文件时,会直接将媒资文件上传到点播存储中,不再需要先上传到用户的OBS桶中,然后转存到点播服务中。JavaScript上传SDK(1.0)后续将不再升级维护,建议您使用新版JavaScript上传SDK。

与JavaScript上传SDK(1.0版)相比,新版的JavaScript上传SDK有如下优势:

  • 支持多文件上传。
  • 支持文件重复上传校验功能。
  • 新增临时凭证失效,重置临时凭证并重新继续上传功能。
  • 新增异常捕获,可对异常情况进行处理。

前提条件

兼容性说明

支持的浏览器版本:
  • 主流版本的Chrome/IE11及以上。
  • 其他完全支持HTML5的浏览器。

SDK集成

在页面上引入如下js文件:

1
2
3
4
5
6
<script src="./dist/jquery-3.3.1.min.js"></script>
<script src="./js-apig/moment.min.js"></script>
<script src="./js-apig/moment-timezone-with-data.min.js"></script>
<script src="./js-apig/hmac-sha256.js"></script>
<script src="./js-apig/signer.js"></script>
<script src="./dist/js-vod-sdk.min.js"></script>

SDK使用

  1. 获取临时凭证AK、SK和securityToken。

    客户端上传是直接上传到点播服务,未经过服务端中转,所以点播服务需要对上传的客户端进行鉴权。APP客户端向APP服务端发送请求,APP服务端向华为请求临时AK、SK和securityToken,具体请参见获取临时AK/SK/securityToken。请求成功后,返回临时AK、SK和securityToken,APP服务端将其返回给APP用户端。

  2. 构建一个VodClient实例,并初始化回调。

     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    var vodClient = new VodClient({
        // 必选,临时凭证AK
        access_key_id : "NQC51NFINJS1JXX...",
        // 必选,临时凭证SK
        secret_access_key : "EY74MByPZ46kTRJL9ay5DskqXX...",
        // 必选,临时凭证security_token
        security_token : "gAAAAABY9GbWUaGtoa9DPj7_dE4qUSnAXXX..."
        // 必选,点播的终端节点Endpoint,默认值是 vod.cn-north-4.myhuaweicloud.com
        vod_server : "vod.cn-north-4.myhuaweicloud.com",
        // 可选,点播终端节点端口号,默认值为空
        vod_port : "",
    
        // 开始上传
        onUploadstarted:function(assetInfo) {
            console.log(assetInfo.file.name + "开始上传");
        },
    
        // 上传进度
        onUploadProgress:function(assetInfo) {
            console.log(assetInfo.progress);
        },
    
        // 合并段成功
        onUploadSucceed:function(assetInfo) {
            console.log(assetInfo.file.name+" 合并段成功");
        },
    
        // 上传异常,上传失败
        onUploadFailed:function(assetInfo,err) {
            try {
                console.log(assetInfo,err);
            }catch(err) {
                console.log(err);
            }
        },
    
        // 若凭证失效,重新设置凭证并上传
        onUploadTokenExpired:function() {
            console.log("onUploadTokenExpired");
            // 重新设置临时凭证并重新上传       
            vodClient.resumeUpload("ak","sk","security_token");
        }
    })
    
    说明:

    以上参数值仅为示例,您需要根据实际返回的值进行设置。

  3. 选择上传文件和媒资信息添加到上传文件列表。

     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    <form action="">
        <input type="file" name="file" id="files" multiple />
    </form>
    <script>
        document.getElementById("files")
        .addEventListener('change', function (event) {
            event.target.files.forEach(function(file) {
                 //添加到上传文件列表
                 vodClient.addAsset({
                     //必选,通过服务端创建媒资返回的OBS桶
                     bucket : "obs-vod-1",
                     //必选,通过服务端创建媒资返回的region信息
                     location : "cn-north-4",
                     //必选,通过服务端创建媒资返回的文件上传路径
                     object : "output/",
                     //必选,通过服务端创建媒资返回的媒资ID(asset_id)
                     asset_id : "",
                     //必选,选择上传的文件
                     videoFile : file,
                     //非必选,是否进行重复上传校验,默认值为false
                     is_check:false
                 })
            });
        });
    </script>
    

    APP客户端向APP服务端发送请求,APP服务端向VOD请求创建媒资,具体请参见创建媒资接口或服务端SDK。请求成功后,返回媒资信息,如下所示,有“bucket”“location”“object”“asset_id”,APP服务端将其返回给APP客户端。客户端需要在上面代码中填写返回的参数值。

    {
      "asset_id": "ef69df671ebf78e9b08fe863aca9e51f",
      "video_upload_url": "https://vod-bucket-78.obs.myhwclouds.com:443/0503dda897000fed2f78c00909158a4d/ef69df671ebf78e9b08fe863aca9e51f/12cd3709eea9fc0fbe1b9438201ff8ce.mp4?AWSAccessKeyId=BG923RWHL4HFXOGKCVAL&Expires=1566458900&Signature=ruZllCvSdbTcRtojA4hpgEElwSE%3D",
      "cover_upload_url": null,
      "subtitle_upload_urls": [],
      "target": {
        "bucket": "vod-bucket-78",
        "location": "cn-north-4",
        "object": "0503dda897000fed2f78c00909158a4d/ef69df671ebf78e9b08fe863aca9e51f/12cd3709eea9fc0fbe1b9438201ff8ce.mp4"
      }
    }
    说明:

    以上参数值仅为示例,您需要根据实际返回的值进行设置。

  4. 开始上传。

    1
    vodClient.startUpload([index]);
    

    “index”为listFiles接口返回列表中元素的索引,若添加添加了多个文件,则需要等待所有的选择文件都添加到上传列表才开始上传。“index”默认值为0,即从第一个文件开始上传。

  5. 其它操作。

    • 取消上传
      支持取消正在上传的音视频。
      1
      vodClient.cancelUpload(index);
      
    • 断点续传
      但上传中止后,再次上传该文件时,可以从中断处继续上传。
      1
      vodClient.restartUpload(index); 
      
    • 获取上传列表“listsAsset”
      1
      vodClient.listsAsset();
      
    • 删除“listsAsset”上传列表对应的媒资信息。
      1
      vodClient.delListsAsset(index);
      
    • 重置临时凭证,并继续开始上传。
      该方法需要需要在初始化回调中的onUploadTokenExpired中使用。
      1
      vodClient.resumeUpload("ak","sk","security_token");
      

  6. 确认媒资。

    APP客户端向APP服务端发送请求,APP服务端向VOD发送确认媒资上传请求,具体请参见确认媒资上传。请求成功,将返回与请求对应的媒资ID,则为上传完成。

API参考

表1 JavaScript上传SDK API参考

方法

请求参数

返回参数

功能描述

addAsset(param)

param:上传文件所需参数。

参数如下:
  • videoFile(必选):上传所选择的文件。
  • bucket(必选):通过服务端创建媒资返回的桶名。
  • location(必选):通过服务端创建媒资返回的服务区域。
  • object(必选):通过服务端创建媒资返回的文件地址。
  • asset_id(必选):通过服务端创建媒资返回的媒资ID。
  • name(必选):通过服务端创建媒资返回的媒资名称。
  • is_check(可选):是否进行重复校验,默认值为“false”

进行媒资上传前需要先将媒资添加到上传文件列表。

startUpload(index)

index:对应“listsAsset”接口返回列表中元素的索引,默认值为0

开始上传,通过传入“index”参数指定从某个视频开始上传。

若不传入“index”,则从第一个开始上传,上传完成后将自动继续上传下一个文件,直到所有文件上传完成。

cancelUpload(index,callback)

index:对应“listsAsset”接口返回列表中元素的索引。

callback:回调函数。

callback(data):data为执行取消上传后返回的结果。

data取值下所示:
  • success: Succeeded in canceling the file upload(取消上传成功)
  • warn: The file has been canceled(该文件不处于上传中状态,不能取消上传)

取消单个文件上传。

restartUpload(index,callback)

index:对应“listsAsset”接口返回列表中元素的索引。

callback:回调函数。

callback(data):

data为执行续传后返回的结果。

data取值如下:

  • success: Start to restore the upload.((执行续传成功)
  • warn: The file is being uploaded(执行续传失败,文件正在上传)

续传单个文件。

listAssets

assetInfo的列表。

获取上传列表。

delListsAsset(index)

index:对应“listsAsset”接口返回列表中元素的索引

删除上传列表某个媒资信息。

resumeUpload(ak,sk,security_token)

ak:临时凭证AK。

sk:临时凭证SK。

security_token:临时凭证security_token。

上传凭证失效,重置上传凭证。

该方法需要需要在初始化回调“onUploadTokenExpired”中使用。

assetInfo 属性

表2 JavaScript上传SDK assetInfo相关属性

属性

类型

说明

upFlag

Sring

表示上传状态。

取值如下:
  • WAITING:等待中
  • UPLOADING:上传中
  • CANCEL(取消)
  • FAILED(上传失败)
  • COMPLETE(上传完成)
  • LOST(文件缺失)
  • REPEAT(文件重复)
  • EXPIRED(上传凭证超时)

completedFlag

Boolean

表示文件是否已经完成上传。

取值如下:
  • true:完成。
  • false:未完成。

progress

Number

实时上传进度。

取值范围:[0,100]

bucket

String

通过服务端创建媒资返回的桶名。

asset_id

String

通过服务端创建媒资返回的媒资ID。

location

String

通过服务端创建媒资返回的点播服务区域(region)。

object

String

通过服务端创建媒资返回的上传路径。

index

Number

上传顺序序号。

file

File

上传文件信息。

Demo使用

您可以在SDK开者中心获取JavaScript上传SDK Demo。

JavaScript上传SDK Demo界面如图1所示。

图1 Demo界面
界面参数说明如 表3所示。
表3 Demo界面参数说明

参数

说明

access(AK)

必选,临时凭证AK,用于初始化VodClient,具体获取方法请参见获取临时AK、SK和securityToken

secret(SK)

必选,临时凭证SK,用于初始化VodClient,具体获取方法请参见获取临时AK、SK和securityToken

security_token

必选,临时凭证security_token,具体获取方法请参见获取临时AK、SK和securityToken

项目ID

必选,租户的项目ID,用于初始化VodClient,具体获取方法请参见获取项目ID

VOD域名地址

必选,需要上传到的点播服务域名地址,用于初始化VodClient,具体获取方法请参见获取终端节点Endpoint

VOD域名地址端口号

可选,需要上传到的点播服务的端口,默认为空,用于初始化VodClient。

bucket

必选,桶名,通过服务端创建媒资返回的媒资信息。如SDK使用中的步骤3

location

必选,点播服务区域(region),通过服务端创建媒资返回的媒资信息。如SDK使用中的步骤3

object

必选,媒资存储路径,通过服务端创建媒资返回的媒资信息。如SDK使用中的步骤3

asset_id

必选,媒资ID,通过服务端创建媒资返回的媒资信息。如SDK使用中的步骤3

is_check

是否进行重复上传校验,默认值为“false”

如果您喜欢这篇文档,您还可以:

文档是否有解决您的问题?

提交成功!

非常感谢您的反馈,我们会继续努力做到更好!

反馈提交失败,请稍后再试!

*必选

请至少选择或填写一项反馈信息

字符长度不能超过200

提交反馈 取消

如您有其它疑问,您也可以通过华为云社区问答频道来与我们联系探讨

跳转到云社区