脑洞大开之采用HTML5+SignalR2.0(.Net)实现原生Web视频_H5之家

对SignalR不了解的人可以直接移步下面的目录

前言

- -,我又来了,今天废话不多说,我们直接来实现Web视频聊天.

采用的技术如下:

HTML5 WebRTC

SignalR2.2.0

localResizeIMG3(前端图像压缩技术,开源)

效果如图(马赛克你懂的,Demo效果比较简陋):

正文

首先我们来看看前端的实现,主要是通过HTML5的WebRTC技术获取视频流转换成图片然后采用压缩后定时发送的技术给到SignalR服务端.

我们先来看看获取视频流的JS,文字我就不多解释了,大家直接看注释即可

   //获取视频流代码块
 var canvas = document.getElementById("canvas"), //取得canvas实例
 context = canvas.getContext("2d"), //取得2D画板
 video = document.getElementById("video"),//取得视频标签
 videoObj = { "video": true }, //设置获取视频
 errBack = function (error) {
 console.log("Video capture error: ", error.code);
 }; //设置错误回发信息
 
 if (navigator.getUserMedia) { // 标准获取视频语法
 navigator.getUserMedia(videoObj, function (stream) {
 video.src = stream;
 video.play;
 }, errBack);
 } else if (navigator.webkitGetUserMedia) { // Webkit内核语法
 navigator.webkitGetUserMedia(videoObj, function (stream) {
 video.src = window.webkitURL.createObjectURL(stream);
 var data = window.webkitURL.createObjectURL(stream);
 video.play;
 }, errBack);
 }
 else if (navigator.mozGetUserMedia) { // 火狐内核语法
 navigator.mozGetUserMedia(videoObj, function (stream) {
 video.src = window.URL.createObjectURL(stream);
 video.play;
 }, errBack);
 }
 //执行定时程序
 window.setInterval(function  {
 context.drawImage(video, 0, 0, 320, 240);
 var type = 'jpg';
 var imgData = canvas.toDataURL(type);
//使用localResizeIMG3压缩图像. lrz(imgData, { quality: 0.1, //压缩率 done: function (results) { var data = results; chat.server.sendImage(data.base64); //var reader = new FileReader; // $("#canvas2").attr("src", data.base64); } }); }, 500)

这样,我们就获取到了相关的数据(PS:获取到的图像大小约为4800个长度的字符串,压缩率0.1压缩后为2300个长度,自行根据带宽修改压缩率)

下面我们看看SignalR的实现代码(关键方法已经标黄):

  [HubName("getMessage")]
    public class TestHub : Hub
    {
        public void SendMessage(string aaaa)
        {
 Clients.All.broadcastMessage(aaaa);
        }

        public void SendImage(string imagedata)
        {
 //获取图像数据,转发给其他客户端
 Clients.Others.showimage(new {id=Context.ConnectionId,data=imagedata});
        }

        public override System.Threading.Tasks.Task OnConnected
        {
 Clients.Others.addKuang(Context.ConnectionId);
 return base.OnConnected;
        }
        public override System.Threading.Tasks.Task OnDisconnected(bool stopCalled)
        {
 Clients.All.romeKuang(Context.ConnectionId);
 return base.OnDisconnected(stopCalled);
        }
    }

我们来看看前端的SignalR的实现代码:

 // 这里是注册集线器调用的方法,和1.0不同的是需要chat.client后注册,1.0则不需要
 var chat = $.connection.getMessage;
 chat.client.broadcastMessage = function (name) {
 // HTML编码的显示名称和消息。
 var encodedMsg = $('<div />').text(name).html;
 // 将消息添加到该页。
 $('#messsagebox').append('<li>' + encodedMsg + '</li>');
 };
 
 //获取图片数据,并实时显示
 chat.client.showimage = function (data) {
 if ($("#" + data.id).length<=0) {
 var html = '<div style="float: left; border: double" id="div' + data.id + '">\
 <img id="'+ data.id + '" width="320" height="240">\
 <br />\
 <span>用户'+ data.id + '</span>\
 </div>'
 $("#contextdiv").append(html)
 }
 $("#" + data.id).attr("src", data.data);
 }
 // 获取用户名称。
 $('#username').html(prompt('请输入您的名称:', ''));
 // 设置初始焦点到消息输入框。
 $('#message').focus;

 // 启动连接,这里和1.0也有区别
 $.connection.hub.start.done(function  {
 $('#send').click(function  {
 var message = $('#username').html + ":" + $('#message').val
 // 这里是调用服务器的方法,同样,首字母小写
 chat.server.sendMessage(message);
 // 清空输入框的文字并给焦点.
 $('#message').val('').focus;
 });
 });

这样,我们很简单的就完成了HTML5+SignalR2.0的视频聊天程序.

写在最后

由于这是一个简单的Demo,所以并没有考虑到应用于生产环境的问题,文章中实现的是视频群聊,所以对带宽要求很高(毕竟数据全部需要从服务器交换出去,基本测试为4人需要2M带宽,在压缩率0.1的情况下),如果你要应用于生产环境,还是需要进一步的优化,比如通信的间隔,最好是单人互相通信之类的各种情况...,就说到这里,Over..