腾讯云web端上传

最近项目中使用到了腾讯云的视频点播业务,根据客户的要求需要在后台集成上传音视频功能。腾讯把web端上传已经封装好了,只需要在原有的代码上做一些逻辑修改。这里注意一点在上传音频的时候一点要将将 allowAudio 设置为 1,否则是上传不成功的。(仔细阅读文档真的很重要,我在这个问题上纠结了几天)

demo地址 : https://pan.baidu.com/s/112pS8UtdMMyY-VVBLc9FzQ   密码: qq7w

 

使用web端上传sdk的步骤大致如下:

 1.引入sdk 

<script src="//imgcache.qq.com/open/qcloud/js/vod/sdk/ugcUploader.js"></script>

2.下载腾讯的签名包,以便下一步前端请求后端获取签名。我使用的是PHP所以下载的是php的签名包

<?php
// 确定 App 的云 API 密钥
$secret_id = "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX";
$secret_key = "AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA";

// 确定签名的当前时间和失效时间
$current = time();
$expired = $current + 86400;  // 签名有效期:1天

// 向参数列表填入参数
$arg_list = array(
    "secretId" => $secret_id,
    "currentTimeStamp" => $current,
    "expireTime" => $expired,
    "random" => rand());

// 计算签名
$orignal = http_build_query($arg_list);
$signature = base64_encode(hash_hmac('SHA1', $orignal, $secret_key, true).$orignal);

echo $signature;
echo "\n";
?>

3.引入腾讯的下载腾讯“web端上传demo“,我们黏贴试例代码就可。要使用大致需要两个步骤

 3.1 获取签名(下面的url填上步骤2的地址)

  

var getSignature = function(callback){
    $.ajax({
        url: 'yourinterface',  //获取客户端上传签名的 URL
        type: 'POST',
        dataType: 'json',
        success: function(result){//result 是派发签名服务器的回包
            //假设回包为 { "code": 0, "signature": "xxxx"  }
            //将签名传入 callback,SDK 则能获取这个上传签名,用于后续的上传视频步骤。
            callback(result.signature);
        }
    });
};

3.2上传视频

qcVideo.ugcUploader.start({
    videoFile: videoFile,//视频,类型为 File
    getSignature: getSignature,//前文中所述的获取上传签名的函数
    error: function(result){//上传失败时的回调函数
        //...
        console.log('上传失败的原因:' + result.msg);
    },
    finish: function(result){//上传成功时的回调函数
        console.log('上传结果的fileId:' + result.fileId);
        console.log('上传结果的视频名称:' + result.videoName);
        console.log('上传结果的视频地址:' + result.videoUrl);
    }
});
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在uniapp中引入腾讯云web互动白板SDK,需要进行以下步骤: 1. 在腾讯云互动白板控制台中创建一个应用,并获取应用的AppID和SecretKey。 2. 在uniapp项目中创建一个自定义组件,例如白板组件。 3. 在白板组件中引入腾讯云互动白板SDK的js文件,例如: ``` <script type="text/javascript" src="https://imgcache.qq.com/qcloud/tcconsole/libs/tc-whiteboard-sdk/2.8.1/tc-whiteboard-sdk.js"></script> ``` 4. 在白板组件的methods中初始化SDK,并创建白板实例,例如: ``` methods: { initWhiteboard() { const appID = 'your appID'; const secretKey = 'your secretKey'; const userID = 'your userID'; const userSig = 'your userSig'; // 初始化SDK const sdk = new TcWhiteBoardSdk(appID, secretKey); // 创建白板实例 const whiteboard = sdk.createWhiteBoard({ userID, userSig, container: this.$refs.whiteboardContainer, width: 800, height: 600, callback: { onInit: () => { console.log('白板初始化完成'); }, onError: (err) => { console.error('白板初始化错误', err); } } }); } } ``` 在以上代码中,需要将`appID`、`secretKey`、`userID`和`userSig`替换成实际的值。其中,`userID`是用户ID,`userSig`是用户签名,用于鉴权。 5. 在白板组件的mounted钩子函数中调用`initWhiteboard`方法,例如: ``` mounted() { this.initWhiteboard(); } ``` 6. 在页面中使用白板组件,例如: ``` <template> <div class="whiteboard"> <div ref="whiteboardContainer"></div> </div> </template> <script> import './whiteboard.css'; export default { name: 'Whiteboard', mounted() { this.initWhiteboard(); }, methods: { initWhiteboard() { // 初始化SDK和创建白板实例 } } } </script> ``` 以上就是在uniapp中引入腾讯云web互动白板SDK的基本步骤。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值