C#结合JavaScript实现上传视频到腾讯云点播平台

目录

需求

关键代码

界面元素布局

C# 实现服务端的签名类

上传视频的JS实现

视频演示

小结


需求

在云培训系统里,制作视频课件是我们的主要工作之一,制作完成后如果将这些素材存储到服务器并进行分发播放,是摆在我们面前的一个问题。最终我们选择了腾讯云点播服务,其加速分发播放几乎适用所有需要展示图片或音视频媒体内容的在线场景,借助遍布全球的大量 CDN 加速节点,在复杂的网络环境也能提供高质量的媒体内容访问服务。

上传视频功能,主要要解决两个问题:

1、在服务端通过C#生成签名和SDKID

2、在客户端通过JavaScript上传视频到腾讯云点播服务器。

关键代码

界面元素布局

放置一个DIV容器,包括 file 上传控件(id:file1)、一个上传进度条的灰色背景层(id:ajax_uploadFiles_curbg)、一个传进度条的进度图片(id:ajax_uploadFiles_curprogress)、一个提示文字层(id:tip),图片及层采用绝对定位,并在上传过程中计算进度值以决定进度图片的宽度。

示例代码如下:

<div>
<input type="file" accept=".mp4,.mp3" id="file1"  onchange="vUpload()" />
<img id="ajax_uploadFiles_curprogress" style="z-index:1;position:absolute;left:0px;top:4px;width:0px;height:12px" alt="" src="win7progress.jpg" />
<div id="ajax_uploadFiles_curbg" style="display:none;z-index:0;position:absolute;left:0px;top:4px;width:203px;height:12px;background-color:Gray"></div>
<div id="tip" style="z-index:0;position:absolute; font-size:9pt;left:205px;top:2px;height:12px;"></div>
</div>

C# 实现服务端的签名类

上传之前需要提供您的开发APPID和开发密钥,以生成有效的签名,才可以进行上传操作,示例代码如下:

public class Signature{public string m_strSecId;public string m_strSecKey;public int m_iRandom;public long m_qwNowTime;public int m_iSignValidDuration;public static long GetIntTimeStamp(){TimeSpan ts = DateTime.UtcNow - new DateTime(1970, 1, 1);return Convert.ToInt64(ts.TotalSeconds);}private byte[] hash_hmac_byte(string signatureString, string secretKey){var enc = Encoding.UTF8; HMACSHA1 hmac = new HMACSHA1(enc.GetBytes(secretKey));hmac.Initialize();byte[] buffer = enc.GetBytes(signatureString);return hmac.ComputeHash(buffer);}public string GetUploadSignature(){string strContent = "";strContent += ("secretId=" + Uri.EscapeDataString((m_strSecId)));strContent += ("&currentTimeStamp=" + m_qwNowTime);strContent += ("&expireTime=" + (m_qwNowTime + m_iSignValidDuration));strContent += ("&random=" + m_iRandom);byte[] bytesSign = hash_hmac_byte(strContent, m_strSecKey);byte[] byteContent = System.Text.Encoding.Default.GetBytes(strContent);byte[] nCon = new byte[bytesSign.Length + byteContent.Length];bytesSign.CopyTo(nCon, 0);byteContent.CopyTo(nCon, bytesSign.Length);return Convert.ToBase64String(nCon);}public string getSign(int SignValidSeconds){Signature sign = new Signature();sign.m_strSecId = secretId;   //开发IDsign.m_strSecKey = secretKey; //开发密钥sign.m_qwNowTime = Signature.GetIntTimeStamp();sign.m_iRandom = new Random().Next(0, 1000000);sign.m_iSignValidDuration = SignValidSeconds;return rv = "{\"errcode\":0,\"sign\":\"" + sign.GetUploadSignature() + "\",\"sdkid\":\"1111111111\"}";    }}

调用 Signature类的 getSign(int SignValidSeconds) 方法生成签名,参数为签名有效期的秒数。 

上传视频的JS实现

实现功能之前需要引用一些必要的JS文件,我的资源下载链接地址:https://download.csdn.net/download/michaelline/88555774

//引用必要的三个js
<script src="jquery-3.2.1.min.js"></script><script src="es6-promise.auto.js"></script><script src="vod-js-sdk-v6.js"></script><script type="text/javascript">var sign = "";var sdkid="";var tcVod = null;var timer=null;var ws=0;var fileobj=document.getElementById('file1');var curbg=document.getElementById('ajax_uploadFiles_curbg');var progressBarWidth=parseInt(curbg.style.width,10);
//重新或尝试获取signfunction resign() {return sign;}
//与服务器API地址交互获得签名值和SDKID,有效时间为3600秒function getsign() {$.ajax({type: "Post",url: '<%=ViewState["apiurl"].ToString()%>',contentType: "application/x-www-form-urlencoded;charset=utf-8",data: {validSeconds: 3600},dataType: "json",success: function (res) {//返回的数据用data.d获取内容   if (res.errcode == 0) {sign = res.sign;sdkid=res.sdkid;initTcVod();} else {alert('上传暂时无法使用。');}},error: function (err) {alert(err);}});}getsign();  //获取一次签名值function timetip(off) {var z = parseInt(off / 60, 10);var y = off % 60;var mtip='';var stip='';if(z==0&&y!=0){stip=y+'秒';} else if (z != 0 && y == 0) {mtip = z +'分钟';} else if (z != 0 && y != 0) {mtip = z + '分';stip = y + '秒';}  return mtip+stip;}//初始化腾讯上传组件function initTcVod() {tcVod = new TcVod.default({getSignature: resign});}
//上传视频function vUpload(){ws=0;curbg.style.display='';timer=window.setInterval(function(){ws++},1000);var mediaFile = document.getElementById('file1').files[0];var uploader = tcVod.upload({mediaFile: mediaFile,mediaName:sdkid+mediaFile.name,});uploader.on('media_progress', function (info) {fileobj.style.display='none';document.getElementById('tip').innerHTML='已上传'+ Math.round(info.percent*100)+'%(耗时'+timetip(ws)+')';document.getElementById('ajax_uploadFiles_curprogress').style.width=(progressBarWidth*info.percent)+'px';})uploader.on('media_upload', function (info) {window.clearInterval(timer);document.getElementById('tip').innerHTML='上传成功!';执行后续操作...}else{}})}</script>
视频演示

JS上传视频到腾讯云点播

小结

以上提供的代码仅供参考,在实际的应用中,服务端 API URL 程序还需要身份验证或即时令牌访问等安全机制。

另外腾讯云媒体上传还提供了多种上传方式的SDK,具体可参考网址:https://cloud.tencent.com/document/product/266/9760

以上就是自己的一些分享,时间仓促,不妥之处还请大家批评指正!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/161984.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

JVM垃圾回收相关算法

目录 一、前言 二、标记阶段&#xff1a;引用计数算法 三、标记阶段&#xff1a;可达性分析算法 &#xff08;一&#xff09;基本思路 &#xff08;二&#xff09;GC Roots对象 四、对象的finalization机制 五、MAT与JProfiler的GC Roots溯源 六、清除阶段&#xff1a;…

基于PCA算法的点云平面拟合

平面拟合 1、平面拟合2、参考文献3、相关代码 1、平面拟合 PCA 是一种数学变换的方法&#xff0c;利用降维的思想在变换中保持变量的总方差不变&#xff0c;将给定的一组变量线性变换为另一组不相关的变量&#xff0c;并且使变换后的第一变量的方差最大&#xff0c;即第一主成分…

OpenCV将两张图片拼接成一张图片

OpenCV将两张图片拼接成一张图片 示例代码1示例代码2 可以用opencv或者numpy的拼接函数&#xff0c;直接将两张图拼接到一起&#xff0c;很简单方便&#xff0c;参考代码2&#xff0c;推荐此方式。新建图片&#xff0c;将两张图片的像素值填充到新图片对应位置上即可&#xff0…

leetcode 32最长有效括号 34在排序数组中查找元素的第一个和最后一个位置

32. 最长有效括号 给你一个只包含 ( 和 ) 的字符串&#xff0c;找出最长有效&#xff08;格式正确且连续&#xff09;括号子串的长度。 示例 1&#xff1a; 输入&#xff1a;s "(()" 输出&#xff1a;2 解释&#xff1a;最长有效括号子串是 "()" 示例 2&a…

python 二分查找函数应用——bisect_left(nums,target),bisect_right(nums,target)

bisect_left(nums,target),bisect_right(nums,target)是python内置的函数&#xff0c;可以便捷的帮我们完成一些有序序列的查找工作&#xff0c;现在将用三个样例进行讲解演示 前提注意事项&#xff1a; 导入函数模块 待处理序列必须有序&#xff01;&#xff01;&#xff0…

浅谈WPF之各种Template

前几天写了一篇文章【浅谈WPF之控件模板和数据模板】&#xff0c;有粉丝反馈说这两种模板容易弄混&#xff0c;不知道什么时候该用控件模块&#xff0c;什么时候该用数据模板&#xff0c;以及template和itemtemplate之间的关系等&#xff0c;今天专门写一篇文章&#xff0c;简述…

26 - 原型模式与享元模式:提升系统性能的利器

原型模式和享元模式&#xff0c;前者是在创建多个实例时&#xff0c;对创建过程的性能进行调优&#xff1b;后者是用减少创建实例的方式&#xff0c;来调优系统性能。这么看&#xff0c;你会不会觉得两个模式有点相互矛盾呢&#xff1f; 其实不然&#xff0c;它们的使用是分场…

TC397 EB MCAL开发从0开始系列 之 [15.1] Fee配置 - 双扇区demo

一、Fee配置1、配置目标2、目标依赖2.1 硬件使用2.2 软件使用2.3 新增模块3、EB配置3.1 配置讲解3.2 模块配置3.2.1 MCU配置3.2.2 PORT配置3.2.3 Fls_17_Dmu配置3.2.4 Fee配置3.2.5 Irq配置3.2.6 ResourceM配置4、ADS代码编写及调试4.1 工程编译4.2 测试结果4.3 测例源码->

2023年学习Go语言是否值得?探索Go语言的魅力

关注公众号【爱发白日梦的后端】分享技术干货、读书笔记、开源项目、实战经验、高效开发工具等&#xff0c;您的关注将是我的更新动力&#xff01; 作为一门流行且不断增长的编程语言&#xff0c;Go语言在2023年是否值得学习呢&#xff1f;让我们来看看学习Go语言的好处以及为何…

Java使用Maven打包jar包的全部方式

1. spring-boot-maven-plugin插件&#xff08;在springboot项目中使用&#xff09; <plugin><groupId>org.springframework.boot</groupId><artifactId>spring-boot-maven-plugin</artifactId><executions><execution><goals>…

1410.HTML 实体解析器

​​题目来源&#xff1a; leetcode题目&#xff0c;网址&#xff1a;1410. HTML 实体解析器 - 力扣&#xff08;LeetCode&#xff09; 解题思路&#xff1a; 使用map存放特殊字符串及其应被替换为的字符串。然后遍历字符串替换 map 中的字符串即可。 解题代码&#xff1a; …

ubuntu 手动清理内存cache

/proc是一个虚拟文件系统&#xff0c;我们可以通过对它的读写操作来做为与kernel实体间进行通信的一种手段。也就是说可以通过修改/proc中的文件&#xff0c;来对当前kernel的行为做出调整。 那么我们可以通过调整/proc/sys/vm/drop_caches来释放内存。操作如下&#xff1a; …

富士康转移产线和中国手机海外设厂,中国手机出口减少超5亿部

富士康和苹果转移生产线对中国手机制造造成了巨大的影响&#xff0c;除此之外&#xff0c;中国手机企业纷纷在海外设厂也在减少中国手机的出口&#xff0c;2022年中国的手机出口较高峰期减少了5.2亿部。 手机是中国的大宗出口商品&#xff0c;不过公开的数据显示2022年中国的手…

每日OJ题_算法_双指针_力扣202. 快乐数

力扣202. 快乐数 202. 快乐数 - 力扣&#xff08;LeetCode&#xff09; 难度 简单 编写一个算法来判断一个数 n 是不是快乐数。 「快乐数」 定义为&#xff1a; 对于一个正整数&#xff0c;每一次将该数替换为它每个位置上的数字的平方和。然后重复这个过程直到这个数变为…

RT-Thread 线程间同步【信号量、互斥量、事件集】

线程间同步 一、信号量1. 创建信号量2. 获取信号量3. 释放信号量4. 删除信号量5. 代码示例 二、互斥量1. 创建互斥量2. 获取互斥量3. 释放互斥量4. 删除互斥量5. 代码示例 三、事件集1. 创建事件集2. 发送事件3. 接收事件4. 删除事件集5. 代码示例 简单来说&#xff0c;同步就是…

PDF转成图片

使用开源库Apache PDFBox将PDF转换为图片 依赖 <dependency><groupId>org.apache.pdfbox</groupId><artifactId>fontbox</artifactId><version>2.0.4</version> </dependency> <dependency><groupId>org.apache…

DockerHub 无法访问 - 解决办法

背景 DockerHub 镜像仓库地址 https://hub.docker.com/ 突然就无法访问了,且截至今日(2023/11)还无法访问。 这对我们来说,还是有一些影响的: ● 虽然 DockerHub 页面无法访问,但是还是可以下载镜像的,只是比较慢而已 ● 没法通过界面查询相关镜像,或者维护相关镜像了…

JAVA 使用stream流将List中的对象某一属性创建新的List

JAVA 使用stream流将List中的对象某一属性创建新的List 1.stream流介绍 Java Stream是Java 8引入的一种新机制&#xff0c;它可以让我们以声明式方式操作集合数据&#xff0c;提供了更加简洁、优雅的集合处理方式。Stream是一个来自数据源的元素队列&#xff0c;并支持聚合操…

【Rxjava详解】(二) 操作符的妙用

文章目录 接口变化操作符mapflatmapdebouncethrottleFirst()takeconcat RxJava 是一个基于 观察者模式的异步编程库&#xff0c;它提供了丰富的操作符来处理和转换数据流。 操作符是 RxJava 的核心组成部分&#xff0c;它们提供了一种灵活、可组合的方式来处理数据流&#xf…