This demo shows you how to upload videos to VOD through the webpage. It builds two HTTP services based on SCF:
The first service is used to receive a request from the browser to get the signature for upload from client, calculate the signature, and return it.
The second service uses VOD's web upload SDK to implement a page. You can access the page in a browser to upload local videos to VOD.
Architecture and process
The system mainly involves four components: browser, API Gateway, SCF, and VOD. Here, API Gateway and SCF are the deployment objects of this demo as shown below:
The main business process is as follows:
1. The browser requests SCF for an upload page.
2. You select a local video and click upload on the upload page, and the browser requests SCF for an upload signature.
3. The browser uses the upload signature to initiate an upload request to VOD and displays the upload result on the upload page after completion.
Note:
The SCF code in the demo is developed based on Python 3.6. SCF also supports other programming languages such as Python 2.7, Node.js, Go, PHP, and Java for your choice as needed. For more information, please see Development Guide.
Fees
The VOD web upload demo (including the webpage code and service backend code) provided in this document is open-source and free of charge, but it may incur the following fees during service building and use:
Fees for purchasing a Tencent Cloud CVM instance to run the service deployment script. For more information, please see Instance Billing Modes.
Fees for using the upload page and signature distribution service provided by SCF. For more information, please see Billing Mode and Free Tier.
Fees for using Tencent Cloud API Gateway to provide public network APIs for SCF. For more information, please see Billing Overview.
The web upload demo is deployed on SCF with a service entry provided by API Gateway. To make it easier for you to build services, we provide a quick deployment script as detailed below.
Step 1. Prepare a CVM instance
The deployment script needs to be executed on a CVM instance meeting the following requirements:
Region: not limited.
Model: the minimum official configuration (1 CPU core and 1 GB memory) is sufficient.
Public network: a public IP is required, and the bandwidth should be at least 1 Mbps.
Operating system: official public image Ubuntu Server 16.04.1 LTS 64-bit or Ubuntu Server 18.04.1 LTS 64-bit.
The web upload demo itself does not depend on CVM but only uses CVM to run the deployment script.
If you do not have a CVM instance satisfying the above conditions, you can also run the script on another Linux (such as CentOS or Debian) or macOS server with public network access, but you need to modify certain commands in the deployment script based on the operating system. Please search for the specific modification method by yourself.
Your API key (i.e., SecretId and SecretKey) and APPID are required for deploying and running the web upload demo service.
If you have not created an API key yet, please generate one as instructed in Root Account Access Key. If you have already created a key, please get it as instructed in the same document.
Please assign the corresponding values obtained in step 3 to SECRET_ID, SECRET_KEY, and APPID in the command.
This command will download the demo source code from GitHub and automatically run the installation script. The installation process will take several minutes (subject to the CVM network conditions), during which the remote terminal will print the following information:
[2020-04-25 23:03:20] Start installing pip3.
[2020-04-25 23:03:23] pip3 is successfully installed.
[2020-04-25 23:03:26] SCF is successfully installed.
[2020-04-25 23:03:26] Start configuring SCF.
[2020-04-25 23:03:28] SCF configuration is completed.
[2020-04-25 23:03:28] Start deploying the VOD client upload client signature distribution service.
[2020-04-25 23:03:40] The deployment of the VOD client upload signature distribution service is completed.
[2020-04-25 23:03:44] Start deploying the VOD web upload page.
[2020-04-25 23:03:53] The deployment of the VOD web upload page is completed.
[2020-04-25 23:03:53] Please access the following address in your browser to use the demo: https://service-xxxxxxxx-125xxxxxxx.gz.apigw.tencentcs.com/release/web_upload_html
Copy the address of the webpage in the output log (which is https://service-xxxxxxxx-125xxxxxxx.gz.apigw.tencentcs.com/release/web_upload_html in this example).
Note:
If the following warning is displayed in the output log, it is generally because the CVM instance cannot immediately parse the service domain name deployed just now. You can ignore this warning.
[2020-04-25 17:18:44] Warning: the client upload signature distribution service failed the test.
Step 5. Use the web upload demo
1. Access the address copied in step 4 in a browser to start using the web upload demo.
2. Perform video upload operations on this page:
2.1 Select a local video file (MP4 format is recommended).
2.2 (Optional) Select a local cover image (in JPG or PNG format).
2.3 (Optional) Enter the video name.
2.4 Click Start Upload to upload the video.
3. After the upload is completed, the VOD media IDs (i.e., fileId) and URLs of the uploaded video and cover will be displayed at the bottom of the page.
You can view the uploaded video in the VOD console.
Note:
You can try out other features on the upload page as prompted.
System Design Description
API protocol and test
Both the upload page and upload signature distribution functions use API Gateway to provide APIs. The specific API protocol is as detailed below:
Service
Function Name
API Form
Response Content
Upload page
web_upload_html
HTTP GET
HTML page
Upload signature distribution
ugc_upload_sign
HTTP POST
Upload signature
Upload page
You can access the SCF service list to view the details of the upload page service:
Note:
The two SCF functions used by the demo are deployed under the namespace vod_demo in the Guangzhou region.
You need to select the corresponding region and namespace in the console to view the deployed SCF functions.
Click the function name, select Trigger Management on the left, and Access Path on the right is the URL of the upload page. Click API Service Name to redirect to the corresponding API Gateway page.
To test the service, directly access the page URL in a browser to check whether the upload page is displayed normally.
Upload signature distribution
You can access the SCF service list to view the details of the upload signature distribution service in the same way as detailed in Upload page.
Click the function name, select Trigger Management on the left, and Access Path on the right is the URL of the service. Click API Service Name to redirect to the corresponding API Gateway page.
To test the service, manually send an HTTP request and run the following command on a Linux or macOS device with public network access (please modify the service URL according to the actual situation):
You can also use third-party tools such as Postman to send HTTP requests. Please search for specific usage on the internet.
Upload page service code interpretation
1. main_handler() is the entry function.
2. Read the content of the web_upload.html file, which is the upload page content.
html_file = open(HTML_FILE, encoding='utf-8')
html = html_file.read()
3. Read configuration items from config.json, which refer to the content that you cannot predict when you write the SCF service and need to determine during the deployment process. The content is written into config.json in real time by the deployment script before deploying the upload page service.
conf_file = open(CONF_FILE, encoding='utf-8')
conf = conf_file.read()
conf_json = json.loads(conf)
4. Call render_template and modify the upload page content according to the configuration information obtained in the previous step. The configuration items are expressed in the format of "variable name": "value" in the config.json file or in the format of {variable name} in the web_upload.html file. When modifying them, please replace them with the specific values as detailed below.
def render_template(html, keys):
"""Replace the variables (in the format of `${variable name}`)in HTML with specific content."""
for key, value in keys.items():
html = html.replace("${" + key + "}", value)
return html
Variable
Description
Value Type
Value Source
UGC_UPLOAD_SIGN_SERVER
Upload signature distribution service URL
String
Output by SCF CLI after the deployment of the upload signature distribution service is completed.
5. Return the modified content of the upload page. For the formats and descriptions of the returned data, please see Overview of API Gateway Trigger.
return{
"isBase64Encoded": False,
"statusCode":200,
"headers":{'Content-Type':'text/html'},
"body": html
}
Upload signature distribution service code interpretation
1. main_handler() is the entry function.
2. Call parse_conf_file() and read the configuration information from the config.json file. The configuration items are as described below (for specific parameters, please see Signature for Upload from Client):
Field
Data Type
Description
secret_id
String
API key
secret_key
String
API key
sign_expire_time
Integer
Signature validity period in seconds
class_id
Integer
Category ID of the uploaded video. 0 indicates the default category
3. Call parse_source_context() to parse the sourceContext field in the request body, which can be passed through to the event notification receipt service during video upload completion event notification (not used in this demo).
Note:
This field is optional during the upload process. If you don't need this feature, you can ignore this part of the code.
4. Call the generate_sign() function to calculate the signature. For more information, please see Signature for Upload from Client.
Yes
No
Was this page helpful?