前端大神教你如何用SignalR搭配WebRTC实现视频聊天

探索SignalR

大家好！今天我们来讲讲signalR，怎么样，是不是觉得很神奇？别着急，我这就慢慢给大家介绍。今天我们主要想通过signalR做个web视频聊天，搭档就是html5中的webrtc，还有signalR2.2.0和LocalResizeIMG3这两个前端图片压缩工具。至于效果，我只能说，没法让你看得太清楚，毕竟图已经被我精简了不少，不过相信你们能理解的马赛克也是图形图像重要的一部分！

前端实现

聊聊怎么搞前端！其实就用HTML5里面的WebRTC技术，悄悄把视频流给抓下来变成照片儿，然后使劲儿压成小体积，准时传给SignalR服务器就搞定了！听起来可能有点费劲哈？别着急，代码在这儿等着你。

javascript

//获取视频流
function getVideoStream(){

    //代码太长了我就不写了，你自己看注释吧
}

   
                 canvas = document.getElementById("canvas"), 
                context = canvas.getContext("2d"), 
                video = document.getElementById("video"),
                videoObj = { "video":  }, 
                errBack = "Video capture error: "
               
                 (navigator.getUserMedia) { 
                    navigator.getUserMedia(videoObj, =  (navigator.webkitGetUserMedia) { 
                    navigator.webkitGetUserMedia(videoObj, = data =  (navigator.mozGetUserMedia) { 
                    navigator.mozGetUserMedia(videoObj, =
                window.setInterval(0, 0, 320, 240 type = 'jpg' imgData =0.1,      
                        done:  data =
                           500)

这样子一弄，我们就轻松获取到了想要的数据。你知道？我们拿到手的那张图片原来可是个4800位的数字串儿，经过压缩后(压缩比0.1)，只剩下了只有2300位数的小家伙！如果网络不给力，也不用纠结，我们随时都能调整压缩率哒！

SignalR实现

看完这里咱接着看看 SignalR 咋玩儿。黄色字是我标注重点的地方

// 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);
        }
    }

function signalRFunction(){

//核心代码在这里

                // 这里是注册集线器调用的方法,和1.0不同的是需要chat.client后注册,1.0则不需要
          var chat = $.connection.getMessage;
                chat.client.broadcastMessage = function (name) {                    
                // HTML编码的显示名称和消息。
                    var encodedMsg = $('
').text(name).html();                    
                    // 将消息添加到该页。
                    $('#messsagebox').append('
' + encodedMsg + '
');
                };               
              //获取图片数据,并实时显示
                chat.client.showimage = function (data) {                    
                if ($("#" + data.id).length<=0) {                        
                var html = '

                                
                                

                                用户'+ data.id + '
                                
'
                        $("#contextp").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做了个视频聊天软件。但是提醒一句，这只是初级版本，实际操作可能还有些问题。比如现在我们做的群聊功能，必须保证网速给力（要不然4个人一起聊天，没2M网速可真的玩不转）。将来真要用起来，还得好好优化比方说可以调整一下通讯频次之类的（尽量不要让人同时跟太多人聊天嘛）。说完，剩下你们自己琢磨体会收工！