HTML5+SignalR2.0 (.Net) を使用してネイティブ Web ビデオのコード共有を実現

ディレクトリ

SignalRを知らない人は、以下のディレクトリに直接アクセスできます

SignalRシリーズのディレクトリ

はじめに

- -、またここに来ました、今日はこれ以上の話はせずに、直接行きましょうWebビデオチャットを実装します。

使用されるテクノロジーは次のとおりです:

HTML5 WebRTC

SignalR2.2.0

localResizeIMG3 (フロントエンド画像圧縮テクノロジー、オープンソース)

効果は写真に示すとおりです。 (モザイクはご存知のとおり、デモ効果は比較的単純です):

Text

まず第一に、主に 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)

を見てください。このようにして、関連するデータを取得します（追記：画像サイズは約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 = $(&#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();
                    });
                });

このようにして、HTML5+SignalR2.0ビデオチャットプログラムが簡単に完成しました。

最後に書きました

これは簡単なデモなので考慮していませんこの記事で実装されているのはグループ ビデオ チャットであ​​るため、帯域幅の要件は非常に高くなります (結局のところ、すべてのデータはサーバーから交換する必要があります。基本的なテストには 4 人で 2M が必要です。帯域幅、圧縮率は0.1）、本番環境に適用する場合は、通信間隔など、さらに最適化する必要があります。1人で通信するのが最適です。ここで言及したばかりです..

以上がHTML5+SignalR2.0 (.Net) を使用してネイティブ Web ビデオのコード共有を実現の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。