C#结合JavaScript实现上传视频到腾讯云点播平台的操作方法

 更新时间:2023年11月23日 10:29:27   作者:初九之潜龙勿用  
这篇文章主要介绍了C#结合JavaScript实现上传视频到腾讯云点播平台,上传视频功能,主要要解决两个问题,一是在服务端通过C#生成签名和SDKID,二是在客户端通过JavaScript上传视频到腾讯云点播服务器,感兴趣的朋友跟随小编一起看看吧

需求

在云培训系统里,制作视频课件是我们的主要工作之一,制作完成后如果将这些素材存储到服务器并进行分发播放,是摆在我们面前的一个问题。最终我们选择了腾讯云点播服务,其加速分发播放几乎适用所有需要展示图片或音视频媒体内容的在线场景,借助遍布全球的大量 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;   //开发ID
                 sign.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文件,我的资源下载链接地址:http://xiazai.jb51.net/202311/yuanma/poi_nojar_jb51.rar

//引用必要的三个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);
//重新或尝试获取sign
      function 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

到此这篇关于C#结合JavaScript实现上传视频到腾讯云点播平台的文章就介绍到这了,更多相关C#腾讯云点播平台内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • C#下使用XmlDocument操作XML详解

    C#下使用XmlDocument操作XML详解

    本文详细讲解了C#使用XmlDocument操作XML的方法,文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-06-06
  • C#一个方法返回多个值示例

    C#一个方法返回多个值示例

    这篇文章主要介绍了C#一个方法返回多个值示例,需要的朋友可以参考下
    2014-02-02
  • C# 如何获取出错的错误所在行数信息

    C# 如何获取出错的错误所在行数信息

    本文主要介绍 C# 中获取错误所在行的方法,在开发过程中或是用户在使用过程中,出错的话方便我们快速定位到错误的位置,以便我们处理。
    2016-04-04
  • C#读取系统字体颜色与大小的方法

    C#读取系统字体颜色与大小的方法

    这篇文章主要介绍了C#读取系统字体颜色与大小的方法,较为详细的分析了C#获取系统字体颜色与大小的相关技巧,需要的朋友可以参考下
    2015-06-06
  • insert语句太长用StringBuilder优化一下

    insert语句太长用StringBuilder优化一下

    insert语句太长用StringBuilder优化一下,下面是示例代码,需要的朋友可以研究研究
    2014-07-07
  • c#多种加解密示例(md5加密解密)

    c#多种加解密示例(md5加密解密)

    这篇文章主要介绍了c#多种加解密示例,包括了MD5加密,SHA1加密,DES加解密,需要的朋友可以参考下
    2014-03-03
  • c# COM组件原理详解

    c# COM组件原理详解

    本文主要介绍了c# COM组件原理详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-08-08
  • C# 读写XML(代码分享)

    C# 读写XML(代码分享)

    本文主要介绍了C# 读写XML的相关知识,具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03
  • C# wpf Grid中实现控件拖动调整大小的示例代码

    C# wpf Grid中实现控件拖动调整大小的示例代码

    本文主要介绍了C# wpf Grid中实现控件拖动调整大小的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-08-08
  • C#使用SignalR实现与前端vue实时通信的示例代码

    C#使用SignalR实现与前端vue实时通信的示例代码

    SignalR 是 ASP.NET Core 的一个库,它简化了在应用程序中添加实时通信的过程,无论是聊天应用、实时游戏还是协作工具,SignalR 都能提供高效且易于实现的解决方案,本文给大家介绍了C#使用SignalR实现与前端vue实时通信的实现,需要的朋友可以参考下
    2024-10-10

最新评论