腦洞大開之采用HTML5+SignalR2.0(.Net)實現原生Web視頻

目錄

對SignalR不了解的人可以直接移步下面的目錄

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..