翔奕时代

A year's plan starts with spring.

0%

火山视频点播集成web上传SDK案例

发表于 分类于 8.2k 7 分钟

火山视频点播集成web上传SDK是什么呢？是通过前端对接视频点播sdk直接上传视频到视频点播中

本文介绍的是火山视频点播集成web上传SDK案例，针对于这个板块应该使用的人不是很多，但是里面会遇到不同的坑，下面借助以下代码希望能帮助到更多的人提升该板块的代码编写速度；
下面的案例是实操之后的代码结果，根据不同的需求可以稍作调整，将代码直接复用。

火山官方视频点播集成web上传SDK文档： https://www.volcengine.com/docs/4/66560#addfile-fileoption

在做这个操作之前需要注意几点：

1、是否开通了火山视频点播服务
2、不能将视频直接放在视频点播里面播放，会按照流量收费 （我的方案是转存到桶中）

视频上传前端案例

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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
<style>
    .upload_con {
        border: #ccc solid 1px;
        padding: 10px;
        margin-bottom: 10px;
    }
    .upload_con p {
        color: #ccc;
    }
    .upload_title {
        color: red;
        font-weight: bolder;
    }
</style>

<div class="layui-card-body padding-left-40">
    <div class="block relative">
<!--  <b class="color-green" style="margin-bottom: 10px">上传对应视频资源</b>-->
        <div class="relative block label-required-null" >
            <!--上传位-->
            <p class="upload_title">[视频上传位]</p>
            <div class="upload_con">
                <input type="file" id="upload_file" accept="video/mp4">
                <br>
                <br>
                <!--上传按钮-->
                <div><a class="layui-btn layui-btn-checked layui-btn-sm" id="uploader_btn">上传</a></div>
                <div style="margin-top:5px"><a class="layui-btn layui-btn-danger layui-btn-sm" id="cancel_upload" style="display: none">取消上传</a></div>

                <!--进度条-->
                <div id="upload_display" style="display: none">
                    <p style="margin-top: 15px" >上传进度：</p>
                    <div class="margin-top-15 layui-progress layui-progress-big" lay-showpercent="yes" id="precent" ></div>
                </div>
                <br>
                <!--结果输出-->
                <div id="result" ></div>
            </div>
        </div>
    </div>

    <div class="hr-line-dashed"></div>
    <div>
        <p style="font-size: 14px;color: red;font-weight: bolder">注意：</p>
        <p>1、上传支持mp4格式文件；</p>
        <p style="color: red;">2、上传为异步处理，上传成功后会有几分钟处理时间，待处理完成才能看到视频链接；</p>
        <p>3、重新上传会替换视频链接；</p>
    </div>
    <br/>
    <div>
        <p style="color: #16baaa;font-size: 16px;font-weight: bolder">上传逻辑：</p>
        <p style="font-weight: bolder">通过火山web上传 ➽ 火山视频点播 ➽ 工作流：转化成不同格式的ts文件、转存到火山对象储存（桶）中 ➽ 绑定vid和动作id关系 ➽ （异步）待火山视频处理完成，回写视频地址 （大约需要3-10分钟） </p>
    </div>
    <br>
    {notempty name='vo.id'}<input type='hidden' value='{$vo.id}' name='id'>{/notempty}
    <div class="layui-form-item text-center">
        <button class="layui-btn layui-btn-danger" type='button' data-reload data-close>
            关闭
        </button>
    </div>
</div>
<input type="hidden" name="motion_id" value="{$motion_id}" id="motion_id">
<input type="hidden" name="volc_token" value="{$token}" id="volc_token">
<input type="hidden" name="appid" value="{$appid}" id="appid">
<input type="hidden" name="space_name" value="{$space_name}" id="space_name">

<!---视频上传--->
<script>
    let motion_id = $("#motion_id").val();
    let token = $("#volc_token").val();
    let appid = $("#appid").val();
    let space_name = $("#space_name").val();

    // ** thinkadmin引入方式：在/static/admin.js加入对应关系，再在此引入使用并实例化
    require(['tt_uploader'], function (TTUploader) {
        // 上传初始化
        const uploader = new TTUploader({
            userId: "1", //建议设置能识别用户的唯一标识 ID，用于上传出错时排查问题，不要传入非 ASCII 编码
            appId: appid, //在视频点播-应用服务中创建的 AppID，视频点播的质量监控等都是以这个参数来区分业务方的，务必正确填写
            // 仅视频/普通文件上传时需要配置
            videoConfig: {
                spaceName: space_name, //在视频点播中申请的点播空间名
                processAction : [
                    {
                        "Name":"GetMeta"
                    },
                    // 添加工作流模板，通过工作流转化成不同分辨率的ts文件格式
                    {
                        "Name":"StartWorkflow",
                        "Input": {
                            "TemplateId":"6c7036757e04483489ee86549d547684"  // 工作流id
                        }
                    }
                ]
            }
        });

        // =========================> 视频上传 <============================
        // 点击上传
        $("#uploader_btn").click(function () {
            document.getElementById("precent").innerHTML = 0
            document.getElementById("result").innerHTML = ""
            let file_obj = document.getElementById("upload_file").files[0];
            const fileKey = uploader.addFile({
                file: file_obj,
                stsToken: JSON.parse(token), //从服务端拿到的 token，见下方说明
                type : 'video', // 上传文件类型，四个可选值：video(视频或者音频，默认值)，image(图片)，object（普通文件，例如字幕），media（素材文件）
            });
            if(file_obj){
                uploader.start(fileKey);
            }else{
                alert("请先选择文件后再上传")
            }

            $("#cancel_upload").show(); // 显示取消按钮
            // 动态获取进度百分比
            uploader.on('progress', (infor) => {
                $("#upload_display").show();
                console.log( infor.percent)
                $("#precent").html('<div class="layui-progress-bar transition layui-bg-green" lay-percent="'+infor.percent+'%" style="width: '+infor.percent+'%;"><span class="layui-progress-text">'+infor.percent+'%</span></div>');
            });
            uploader.on('preUpload', (infor) => {
                console.log('preUpload');
                console.log(infor)
            });
            uploader.on('initUploadID', function(data) {
                console.log('initUploadID', data);
            });
            // 完成
            uploader.on('complete', (infor) => {
                $("#upload_display").show();
                // 设置进度条99%
                $("#precent").html('<div class="layui-progress-bar transition layui-bg-green" lay-percent="99%" style="width: 99%;"><span class="layui-progress-text">99%</span></div>');
                console.log('complete');
                console.log(infor.uploadResult)

                // 提交到后端进行数据处理与绑定
                $.ajax({
                    type    : 'post',
                    url     : "/admin/app_motion/processVideo",
                    data    : {"vid" : infor.uploadResult.Vid, "motion_id" : motion_id},
                    dataType: "json",
                    success : function(data){
                        console.log(data)
                        if (data.code == 200) {
                            // 进度条设置为100%
                            $("#precent").html('<div class="layui-progress-bar transition layui-bg-green" lay-percent="100%" style="width: 100%;"><span class="layui-progress-text">100%</span></div>');
                            // 结果显示
                            document.getElementById("result").innerHTML = "上传完成: <br />vid:  " + infor.uploadResult.Vid
                        } else {
                            document.getElementById("result").innerHTML = "上传失败: <br />vid:  " + data.msg
                        }
                    }
                });
            });
            // 失败
            uploader.on('error', (infor) => {
                console.log(infor.extra);
                document.getElementById("result").innerHTML = "上传失败 error为:  "  + infor.extra.error + "|" + infor.extra.message
            });
        })

        // 取消上传
        $("#cancel_upload").click(function () {
            uploader.pause();
            uploader.cancel();
            $("#upload_display").hide();
            $("#cancel_upload").hide();
        });
    });
</script>

stsToken的获取

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
/**
 * - 火山引擎类 （视频点播sdk）
 */
class VolcSdkService
{
    private string $volc_ak = "xxxxxxx";
    private string $volc_sk = "xxxxxxxx";

    public $client;

    public function __construct() {
        $client = Vod::getInstance();
        $client->setAccessKey($this->volc_ak);
        $client->setSecretKey($this->volc_sk);
        $this->client = $client;
    }

    /**
     * @return mixed|string
     */
    public function getUploadVideoAuth()
    {
        $expire = 3600 * 8; // 请求的签名有效期
        try {
            return $this->client->getUploadVideoAuthWithExpiredTime($expire);
        } catch (\Exception $e) {
            return "";
        }
    }
}


 **特别注意**
 1、获取到的token需要json_encode转一下
 2、php用到的composer依赖包为 volcengine/volc-sdk-php

上述参数描述

  • appid : 从火山视频点播后台获取，在视频点播-应用服务中创建的 AppID
  • space_name : 视频点播空间名
  • StartWorkflow.TemplateId : 在视频点播后台建议的处理工作流
  • stsToken : 服务端拿到的授权token