Using HTML5+SignalR2.0 (.Net) to realize code sharing of native Web videos-H5 Tutorial-php.cn

Using HTML5+SignalR2.0 (.Net) to realize code sharing of native Web videos

黄舟

Release： 2017-03-22 15:16:42

Original

2415 people have browsed it

Directory

Those who don’t know SignalR can go directly to the directory below

SignalR series directory

Preface

- -, I'm here again. Without further ado today, let's go directly to implement Web video chat.

The technology used is as follows:

HTML5 WebRTC

SignalR2.2.0

localResizeIMG3 (front-end image compression technology, open source)

The effect is as shown in the figure (you know the mosaic, the Demo effect is relatively simple):

Text

First of all, let’s take a look at the front-end implementation, which is mainly obtained through HTML5’s WebRTC technology The video stream is converted into pictures and then sent to the SignalR server using the technology of compressing and timing. No more explanation, just look at

Note

   
                 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 = &#39;jpg&#39; imgData =0.1,      
                        done:  data =
                           500)

Copy after login

In this way, we will get the relevant data (PS: The obtained image The size is about 4800 length

string
, the compression rate is 0.1 and the length is 2300 after compression. You can modify the compression rate according to the bandwidth)

Let’s take a look at the implementation code of SignalR (key method Already marked in yellow):

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

Copy after login

Let’s take a look at the front-end SignalR implementation code:

                // 这里是注册集线器调用的方法,和1.0不同的是需要chat.client后注册,1.0则不需要
          var chat = $.connection.getMessage;
                chat.client.broadcastMessage = function (name) {                    
                // HTML编码的显示名称和消息。
                    var encodedMsg = $(&#39;<p />&#39;).text(name).html();                    
                    // 将消息添加到该页。
                    $(&#39;#messsagebox&#39;).append(&#39;<li>&#39; + encodedMsg + &#39;</li>&#39;);
                };               
              //获取图片数据,并实时显示
                chat.client.showimage = function (data) {                    
                if ($("#" + data.id).length<=0) {                        
                var html = &#39;<p style="float: left; border: double" id="p&#39; + data.id + &#39;">\
                                <img id="&#39;+ data.id + &#39;" width="320" height="240">\
                                <br />\
                                <span>用户&#39;+ data.id + &#39;</span>\
                                </p>&#39;
                        $("#contextp").append(html)
                    }
                    $("#" + data.id).attr("src", data.data);
                }                // 获取用户名称。
                $(&#39;#username&#39;).html(prompt(&#39;请输入您的名称:&#39;, &#39;&#39;));                
                // 设置初始焦点到消息输入框。
                $(&#39;#message&#39;).focus();                
                // 启动连接,这里和1.0也有区别
                $.connection.hub.start().done(function () {
                    $(&#39;#send&#39;).click(function () {                        
                    var message = $(&#39;#username&#39;).html() + ":" + $(&#39;#message&#39;).val()                        
                    // 这里是调用服务器的方法,同样,首字母小写                        
                    chat.server.sendMessage(message);                        // 清空输入框的文字并给焦点.
                        $(&#39;#message&#39;).val(&#39;&#39;).focus();
                    });
                });

Copy after login

In this way, we have easily completed the HTML5+SignalR2.0 video chat program.

Written at the end

Since this is a simple Demo, it is not considered to be used in a production environment Question, what is implemented in the article is group video chat, so the bandwidth requirements are very high (after all, all data needs to be exchanged from the server, the basic test is that 4 people require 2M bandwidth, and the compression rate is 0.1), if you want to apply it The production environment still needs further optimization, such as the communication interval, it is best for single people to communicate with each other, etc..., that's all, Over..

The above is the detailed content of Using HTML5+SignalR2.0 (.Net) to realize code sharing of native Web videos. For more information, please follow other related articles on the PHP Chinese website!