目錄
對SignalR不了解的人可以直接移步下面的目錄
SignalR系列目錄
前言
- -,我又來了,今天廢話不多說,我們直接來實現Web視頻聊天.
采用的技術如下:
HTML5 WebRTC
SignalR2.2.0
localResizeIMG3(前端圖像壓縮技術,開源)
效果如圖(馬賽克你懂的,Demo效果比較簡陋):
正文
首先我們來看看前端的實現,主要是通過HTML5的WebRTC技術獲取視頻流 轉換成圖片 然后采用壓縮后定時發送的技術給到SignalR服務端.
我們先來看看獲取視頻流的JS,文字我就不多解釋了,大家直接看注釋即可
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)
這樣,我們就獲取到了相關的數據(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 = $('<p />').text(name).html(); // 將消息添加到該頁。 $('#messsagebox').append('<li>' + encodedMsg + '</li>'); }; //獲取圖片數據,并實時顯示 chat.client.showimage = function (data) { if ($("#" + data.id).length<=0) { var html = '<p style="float: left; border: double" id="p' + data.id + '">\ <img id="'+ data.id + '" width="320" height="240">\ <br />\ <span>用戶'+ data.id + '</span>\ </p>' $("#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的視頻聊天程序.
寫在最后
由于這是一個簡單的Demo,所以并沒有考慮到應用于生產環境的問題,文章中實現的是視頻群聊,所以對帶寬要求很高(畢竟數據全部需要從服務器交換出去,基本測試為4人需要2M帶寬,在壓縮率0.1的情況下),如果你要應用于生產環境,還是需要進一步的優化,比如通信的間隔,最好是單人互相通信之類的各種情況...,就說到這里,Over..
聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com