脑洞大开之采用HTML5+SignalR2.0(.Net)实现原生Web视频

前言

 - -,我又来了,今天废话不多说,我们直接来实现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..

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏ATYUN订阅号

用香蕉也能玩电脑游戏—Tensorflow对象检测接口的简单应用

Tensorflow最近发布了用于对象检测的对象检测接口(Object Detection API),能够定位和识别图像中的对象。它能够快速检测图像允许从视频帧...

3244
来自专栏数据小魔方

箱线图(boxplot)

今天要跟大家介绍的图表是箱线图! ▽▼▽ 在恶心excel2013及以下版本中,没有直接制作箱线图的图表工具,需要借助股价图,并对数据做少许变换才能做出箱线图的...

3768
来自专栏进击的程序猿

Understanding PHP Generators(译)Understanding PHP Generators

为什么需要谈论Generators,作为互联网应有,更快的速度意味着更好的用户体验,而Generators则是php中解决速度和内存的杀手锏

613
来自专栏章鱼的慢慢技术路

图像处理基础知识

1625
来自专栏C#

开源免费的.NET图像即时处理的组件ImageProcessor

   承接以前的组件系列,这个组件系列旨在介绍.NET相关的组件,让大家可以在项目中有一个更好的选择,社区对于第三方插件的介绍还是比较少的,很多博文的内容主要还...

680
来自专栏漫漫深度学习路

pytorch学习笔记(八):PytTorch可视化工具 visdom

Visdom PyTorch可视化工具 本文翻译的时候把 略去了 Torch部分。 项目地址 ? 一个灵活的可视化工具,可用来对于 实时,富数据的 创建,组织和...

5315
来自专栏腾讯Bugly的专栏

舞动的表情包——浅析GIF格式图片的存储和压缩

导语 GIF(Graphics Interchange Format)原义是“图像互换格式”,是CompuServe公司在1987年开发出的图像文件格式,可以说...

3374
来自专栏ATYUN订阅号

【学术】Juggernaut:网络浏览器中的神经网络

Juggernau是一个用Rust编写的实验性神经网络。它是一个使用梯度下降来拟合模型并训练网络的前馈神经网络。Juggernaut使我们能够构建网络应用程序,...

3568
来自专栏点滴积累

使用 opencv 将图片压缩到指定文件尺寸

前言 图片压缩应用很广泛,如生成缩略图等。前期我在进行图片处理的过程中碰到了一个问题,就是如何将图片压缩到指定尺寸,此处尺寸指的是生成图片文件的大小。 我使用 ...

5158
来自专栏深度学习计算机视觉

pytorch demo 实践

相关环境 python opencv pytorch ubuntu 14.04 pytorch 基本内容 60分钟快速入门,参考:https://blog...

5366

扫码关注云+社区