有奖捉虫:办公协同&微信生态&物联网文档专题 HOT

使用须知

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。
如果还未创建过密钥,请参见 创建密钥文档 生成新的 API 密钥;如果已创建过密钥,请参见 查看密钥文档 获取 API 密钥。
在控制台 账号信息 页面可以查看 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 中获取到的内容。
请确保已安装 Node.js 运行环境。
该命令将从 Github 下载 Demo 源码并自动执行安装脚本。安装过程需几分钟(具体取决于 CVM 网络状况),期间远程终端会打印如下示例的信息:
[2020-04-25 23:03:20]开始检查npm。
[2020-04-25 23:03:23]npm 安装成功。
[2020-04-25 23:03:23]开始安装 ServerLess。
[2020-04-25 23:03:26]serverless 安装成功。
[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. 在该页面进行视频上传操作:
2.1 选择一个本地视频文件(推荐选择 MP4 文件)。
2.2 选择一张本地封面图片(可选,使用 JPG 或者 PNG 格式)。
2.3 填写视频名称(可选)。
2.4 单击开始上传即可上传视频。
?
?
?
3. 上传完成后,页面下方会展示视频和封面的点播媒体 ID(即 fileId)和 URL 等信息。如下图所示:
?
?
4. 您可以在 云点播控制台 上查看刚上传的视频。如下图所示:
?
?
?
说明:
您可根据页面提示,对上传页面的其它功能进行体验。

系统设计说明

接口协议及测试

上传页面上传签名派发两个云函数都通过 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')
}
?


http://www.vxiaotou.com