如何通过 Web 上传视频

最后更新时间:2021-01-26 14:55:20

    使用须知

    Demo 功能介绍

    本 Demo 向开发者展示如何通过 Web 页面将视频上传到云点播。Demo 基于云函数(SCF)搭建了两个 HTTP 服务:

    • 第一个服务用于接收来自浏览器获取 客户端上传签名 的请求,计算上传签名并返回。
    • 第二个服务使用 VOD Web 上传 SDK 实现一个页面,用户可以通过浏览器访问该页面,并上传本地视频到 VOD。

    架构和流程

    系统主要涉及四个组成部分:浏览器、API 网关、云函数和云点播,其中 API 网关和云函数即是本 Demo 的部署对象,如下图所示:

    主要业务流程为:

    1. 浏览器向 SCF 请求上传页面。
    2. 用户在上传页面进行操作,选中本地视频后点击上传,由浏览器向 SCF 请求上传签名。
    3. 浏览器使用上传签名向 VOD 发起上传请求,完成后在上传页面上展示上传结果。

    说明:

    Demo 中的 SCF 代码使用 Python3.6 进行开发,此外 SCF 还支持 Python2.7、Node.js、Golang、PHP 和 Java 等多种编程语言,开发者可以根据情况自由选择,具体请参考 SCF 开发指南

    费用

    本文提供的云点播 Web 上传 Demo 是免费开源的(含 Web 页面代码和业务后台代码),但在搭建和使用的过程中可能会产生以下费用:

    • 购买腾讯云云服务器(CVM)用于执行服务部署脚本,详见 CVM 计费
    • 使用腾讯云云函数(SCF)提供上传页面和签名派发服务,详见 SCF 计费SCF 免费额度
    • 使用腾讯云 API 网关为 SCF 提供外网接口,详见 API 网关计费
    • 消耗云点播(VOD)存储用于存储上传的视频,详见 存储计费
    • 消耗云点播流量用于播放视频,详见 流量计费

    快速部署 Web 上传 Demo

    Web 上传 Demo 部署在 SCF 上,并由 API 网关提供服务入口。为了方便开发者搭建服务,我们提供了快捷部署脚本,使用方法如下。

    步骤1:准备腾讯云 CVM

    部署脚本需要运行在一台腾讯云 CVM 上,要求如下:

    • 地域:任意。
    • 机型:官网最低配置(1核1GB)即可。
    • 公网:需要拥有公网 IP,带宽1Mbps或以上。
    • 操作系统:官网公共镜像Ubuntu Server 16.04.1 LTS 64位Ubuntu Server 18.04.1 LTS 64位

    购买 CVM 的方法请参见 操作指南 - 创建实例。重装系统的方法请参见 操作指南 - 重装系统

    注意:

    • Web 上传 Demo 本身并不依赖于 CVM,仅使用 CVM 来执行部署脚本
    • 如果您没有符合上述条件的腾讯云 CVM,也可以在其它带外网的 Linux(如 CentOS、Debian 等)或 Mac 机器上执行部署脚本,但需根据操作系统的区别修改脚本中的个别命令,具体修改方式请开发者自行搜索。

    步骤2:开通云点播

    请参考 快速入门 - 步骤1 开通云点播服务。

    步骤3:获取 API 密钥和 APPID

    Web 上传 Demo 服务的部署和运行过程需要使用到开发者的 API 密钥(即 SecretId 和 SecretKey)和 APPID。

    步骤4:部署业务后台和 Web 页面

    登录 步骤1准备的 CVM(登录方法详见 操作指南 - 登录 Linux),在远程终端输入以下命令并运行:

    ubuntu@VM-69-2-ubuntu:~$ export SECRET_ID=AKxxxxxxxxxxxxxxxxxxxxxxx; export SECRET_KEY=xxxxxxxxxxxxxxxxxxxxx;export APPID=125xxxxxxx;git clone https://github.com/tencentyun/vod-server-demo.git ~/vod-server-demo; bash ~/vod-server-demo/installer/web_upload_scf.sh

    说明:

    请将命令中的 SECRET_ID、SECRET_KEY 和 APPID 赋值为 步骤3 中获取到的内容。

    该命令将从 Github 下载 Demo 源码并自动执行安装脚本。安装过程需几分钟(具体取决于 CVM 网络状况),期间远程终端会打印如下示例的信息:

    [2020-04-25 23:03:20]开始安装 pip3。
    [2020-04-25 23:03:23]pip3 安装成功。
    [2020-04-25 23:03:23]开始安装腾讯云 SCF 工具。
    [2020-04-25 23:03:26]scf 安装成功。
    [2020-04-25 23:03:26]开始配置 scf。
    [2020-04-25 23:03:28]scf 配置完成。
    [2020-04-25 23:03:28]开始部署云点播客户端上传签名派发服务。
    [2020-04-25 23:03:40]云点播客户端上传签名派发服务部署完成。
    [2020-04-25 23:03:44]开始部署云点播 Web 上传页面。
    [2020-04-25 23:03:53]云点播 Web 上传页面部署完成。
    [2020-04-25 23:03:53]请在浏览器访问以下地址进行体验:https://service-xxxxxxxx-125xxxxxxx.gz.apigw.tencentcs.com/release/web_upload_html

    复制输出日志中的 Web 页面地址(示例中的https://service-xxxxxxxx-125xxxxxxx.gz.apigw.tencentcs.com/release/web_upload_html)。

    注意:

    如果输出日志中出现如下所示的警告,一般是由于 CVM 无法立即解析刚部署好的服务域名,可尝试忽略该警告。

    [2020-04-25 17:18:44]警告:客户端上传签名派发服务测试不通过。

    步骤5:体验 Web 上传 Demo

    1. 在浏览器打开 步骤4 中复制的地址,即可开始体验 Web 上传 Demo。页面如下图所示:
    2. 在该页面进行视频上传操作:
      1. 选择一个本地视频文件(推荐选择 MP4 文件)。
      2. 选择一张本地封面图片(可选,使用 JPG 或者 PNG 格式)。
      3. 填写视频名称(可选)。
      4. 单击【开始上传】即可上传视频。
    3. 上传完成后,页面下方会展示视频和封面的点播媒体 ID(即 fileId)和 URL 等信息。如下图所示:
      您可以在 云点播控制台 上查看刚上传的视频。如下图所示:

    说明:

    您可根据页面提示,对上传页面的其它功能进行体验。

    系统设计说明

    接口协议及测试

    上传页面上传签名派发两个云函数都通过 API 网关对外提供接口,具体接口协议如下:

    服务 云函数名 接口形式 返回内容
    上传页面 web_upload_html HTTP GET HTML 页面
    上传签名派发 ugc_upload_sign HTTP POST 上传签名

    上传页面

    您可以访问 SCF 服务列表 来查看上传页面服务的详细信息:

    说明:

    • Demo 使用的两个 SCF 部署在广州地域,命名空间为 vod_demo。
    • 控制台上需要选择对应地域和命名空间才能看到部署好的云函数。

    单击函数名,在左侧选择【触发管理】,右侧【访问路径】即是上传页面的 URL。单击【API服务名】即可跳转到对应的 API 网关页面。如下图所示:
    测试该服务的方法为:在浏览器上直接访问页面 URL,正常情况下能看到上传页面。

    上传签名派发

    您可以访问 SCF 服务列表 来查看上传签名派发服务的详细信息(查看方法同 上传页面)。

    单击函数名,在左侧选择【触发管理】,右侧【访问路径】即是该服务的 URL。单击【API服务名】即可跳转到对应的 API 网关页面。如下图所示:
    测试该服务的方法为:选择手动发送 HTTP 请求的方式,在一台有外网的 Linux 或者 Mac 上执行以下命令(请根据实际情况修改服务 URL):

    curl -d '' https://service-xxxxxxxx-125xxxxxxx.gz.apigw.tencentcs.com/release/ugc_upload_sign

    如果服务正常,则返回上传签名,签名示例如下:

    VYapc9EYdoZLzGx0CglRW4N6kuhzZWNyZXRJZD1BS0lEZk5xMzl6dG5tYW1tVzBMOXFvZERia25hUjdZa0xPM1UmY3VycmVudFRpbWVTdGFtcD0xNTg4NTg4MDIzJmV4cGlyZVRpbWU9MTU4ODU4ODYyMyZyYW5kb209MTUwNzc4JmNsYXNzSWQ9MCZvbmVUaW1lVmFsaWQ9MCZ2b2RTdWJBcHBJZD0w

    您也可以使用 Postman 等第三方工具来发送 HTTP 请求,具体用法请自行搜索。

    上传页面服务代码解读

    1. main_handler()为入口函数。
    2. 读取web_upload.html文件的内容,即上传页面内容。
           html_file = open(HTML_FILE, encoding='utf-8')
           html = html_file.read()
    3. config.json中读取配置项。配置项是指您在编写 SCF 服务时无法预知,并且需要在部署过程中才能确定的内容。这些内容由部署脚本在部署上传页面服务之前实时写入到config.json中。
           conf_file = open(CONF_FILE, encoding='utf-8')
           conf = conf_file.read()
           conf_json = json.loads(conf)
    4. 调用render_template,根据上一步得到的配置信息对上传页面内容进行修改。配置项在config.json文件中以"变量名": "取值"的形式来表示;在web_upload.html文件中以{变量名}的形式来表示,修改时请替换为具体取值。详情如下:
      def render_template(html, keys):
         """将 HTML 中的变量(形式为 ${变量名})替换为具体内容。"""
         for key, value in keys.items():
             html = html.replace("${" + key + "}", value)
         return html
      变量名 含义 取值类型 取值来源
      UGC_UPLOAD_SIGN_SERVER 上传签名派发服务的 URL String 上传签名派发服务部署完成后,由 SCF 命令行工具 scf 输出
    5. 将修改后的上传页面内容返回。返回的数据格式及含义请参见 云函数集成响应
         return {
             "isBase64Encoded": False,
             "statusCode": 200,
             "headers": {'Content-Type': 'text/html'},
             "body": html
         }

    上传签名派发服务代码解读

    1. main_handler()为入口函数。
    2. 调用parse_conf_file(),从config.json文件中读取配置信息。配置项说明如下(详细参数请参见 客户端上传签名参数):
      字段 数据类型 功能
      secret_id String API 密钥
      secret_key String API 密钥
      sign_expire_time Integer 签名有效时间,单位:秒
      class_id Integer 视频上传完成后的分类 ID,0表示默认分类
      otp Integer 签名是否单次有效
      subappid Integer 是否上传到 云点播子应用
    3. 调用parse_source_context(),从请求 Body 中解析sourceContext字段,用于在 上传完成事件通知 中透传给事件通知接收服务(本 Demo 暂未使用事件通知)。

      说明:

      在上传过程中该字段是可选的,如果您无需使用该功能,则可以忽略这部分代码。

    4. 调用generate_sign()函数计算签名,详细算法请参见 客户端上传签名
    5. 返回签名。返回的数据格式及含义请参见 云函数集成响应
         return {
             "isBase64Encoded": False,
             "statusCode": 200,
             "headers": {"Content-Type": "text/plain; charset=utf-8",
                         "Access-Control-Allow-Origin": "*",
                         "Access-Control-Allow-Methods": "POST,OPTIONS"},
             "body": str(signature, 'utf-8')
         }