Skip to content
关注公众号,获取新课通知

上传视频


参考文档:
https://cloud.tencent.com/document/product/266/10638#node.js-.E7.AD.BE.E5.90.8D.E7.A4.BA.E4.BE.8B
shell
npm install querystring --save

控制器:app/controller/vod.js

js
var querystring = require("querystring");
var crypto = require('crypto');

	// 签名
    async sign() {
        // 确定 app 的云 API 密钥
        var { secret_id, secret_key } = this.app.config.tencentVod;

        // 确定签名的当前时间和失效时间
        var current = parseInt((new Date()).getTime() / 1000)
        var expired = current + 86400;  // 签名有效期:1天

        // 向参数列表填入参数
        var arg_list = {
            secretId: secret_id,
            currentTimeStamp: current,
            expireTime: expired,
            random: Math.round(Math.random() * Math.pow(2, 32)),
            oneTimeValid: 1,
            vodSubAppId: 1500000131,
        }

        // 计算签名
        var orignal = querystring.stringify(arg_list);
        var orignal_buffer = new Buffer(orignal, "utf8");

        var hmac = crypto.createHmac("sha1", secret_key);
        var hmac_buffer = hmac.update(orignal_buffer).digest();

        var signature = Buffer.concat([hmac_buffer, orignal_buffer]).toString("base64");

        this.ctx.apiSuccess(signature);
    }

配置:config/config.default.js

js
// 腾讯云vod
config.tencentVod = {
  secret_id: "AKIDZuynvmegm33xb7ws9AuNbYv161gX2SVM",
  secret_key: "jEXbYJnKdgW7UbS3oI2YonMddMpAF2FK",
};

路由:app/router.js

js
// vod签名
router.post("/vod/sign", controller.vod.sign);

uni-app前端部分:

参考文档:
小程序和app端:
https://cloud.tencent.com/document/product/266/18177
H5端:https://cloud.tencent.com/document/product/266/9239
js
import VodUploader from "@/common/vod-wx-sdk-v2.js";

uni.chooseVideo({
  count: 1,
  sourceType: ["camera", "album"],
  success: (res) => {
    // 获取签名
    // #ifndef H5
    let getSignature = (callback) => {
      this.$H.post("/vod/sign", {}, {
        token: true,
      }).then((res) => {
        callback(res);
      });
    };
    // #endif
    // #ifdef H5
    let getSignature = (callback) => {
      return this.$H.post("/vod/sign", {}, {
        token: true,
      }).then((res) => {
        return res;
      });
    };
    // #endif
    // 生成唯一名称
    let mediaName = this.genID(12);
    uni.showLoading({
      title: "上传中...",
      mask: false,
    });
    // #ifdef H5
    const tcVod = new TcVod.default({
      getSignature: getSignature,
    });
    const uploader = tcVod.upload({
      mediaFile: res.tempFile,
    });
    uploader.on("media_progress", (info) => {
      console.log(info.percent); // 进度
    });
    uploader.done().then((doneResult) => {
      // 上传后的视频链接
      console.log(doneResult.video.url);
      uni.hideLoading();
    }).catch((err) => {
      uni.hideLoading();
      uni.showToast({
        title: "上传失败",
        icon: "none",
      });
    });
    // #endif

    // #ifndef H5
    VodUploader.start({
      mediaFile: res,
      getSignature: getSignature,
      mediaName: mediaName,
      success: (result) => {
        console.log("success");
        console.log(result);
      },
      error: (result) => {
        console.log(result);
        uni.showModal({
          title: "上传失败",
          content: JSON.stringify(result),
          showCancel: false,
        });
      },
      progress: (result) => {
        console.log("progress");
        console.log(result);
      },
      finish: (result) => {
        // 上传后视频链接
        console.log(result.videoUrl);
        uni.hideLoading();
      },
    });
    // #endif
  },
});
js
// 生成唯一ID
genID(length){
	return Number(Math.random().toString().substr(3,length) + Date.now()).toString(36);
}

H5端index.html模板 /h5.html

html
<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <title>
            <%= htmlWebpackPlugin.options.title %>
        </title>
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                document.documentElement.style.fontSize = document.documentElement.clientWidth / 20 + 'px'
            })
        </script>
        <link rel="stylesheet" href="<%= BASE_URL %>static/index.<%= VUE_APP_INDEX_CSS_HASH %>.css" />
		<script src="//cdn-go.cn/cdn/vod-js-sdk-v6/latest/vod-js-sdk-v6.js"></script>
    </head>
    <body>
        <noscript>
            <strong>Please enable JavaScript to continue.</strong>
        </noscript>
        <div id="app"></div>
        <!-- built files will be auto injected -->
    </body>
</html>