采用HTML5+SignalR2.0实现原生Web视频

来源:GuZhenYin

cnblogs.com/GuZhenYin/p/5226491.html

前言

废话不多说,我们直接来实现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;

//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 );

}

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;

// HTML编码的显示名称和消息。

var encodedMsg = $('

').text(name).html();

// 将消息添加到该页。

$('#messsagebox').append('

' + encodedMsg + '

');

};

//获取图片数据,并实时显示

if ($("#" + data.id).length

var html = '

\

\

用户'+ data.id + '\

$("#contextdiv").append(html)

}

$("#" + data.id).attr("src", data.data);

}

// 获取用户名称。

$('#username').html(prompt('请输入您的名称:', ''));

// 设置初始焦点到消息输入框。

$('#message').focus();

// 启动连接,这里和1.0也有区别

$('#send').click(function () {

var message = $('#username').html() + ":" + $('#message').val()

// 这里是调用服务器的方法,同样,首字母小写

// 清空输入框的文字并给焦点.

$('#message').val('').focus();

});

});

这样,我们很简单的就完成了HTML5+SignalR2.0的视频聊天程序.

写在最后

由于这是一个简单的Demo,所以并没有考虑到应用于生产环境的问题,文章中实现的是视频群聊,所以对带宽要求很高(毕竟数据全部需要从服务器交换出去,基本测试为4人需要2M带宽,在压缩率0.1的情况下)。

如果你要应用于生产环境,还是需要进一步的优化,比如通信的间隔,最好是单人互相通信之类的各种情况...,就说到这里。

看完本文有收获?请转发分享给更多人

关注「DotNet」,提升.Net技能

本文来自企鹅号 - DotNet媒体

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏包子铺里聊IT

[包子分享] 构架模式: Microservices Architecture

http://baozitraining.org ---- ? 微服务构架是近年来比较流行的服务端应用构架,由其非常好的可伸缩性,稳定性以及灵活的协同开发模...

31760
来自专栏机器人网

Python程序员需要了解的10个资源

你是一名Python程序员。在知道其他语言后,通过Python入门,或通过阅读Python教程或类,直到您对基础知识足够自信为止,您已经获得了这一称号。那现在,...

12030
来自专栏MixLab科技+设计实验室

设计师/产品经理是否需要懂技术?

封面由ARKie智能设计赞助 设计师/产品经理是否需要懂技术? 这个问题相当于,问我们是否需要掌握2个看似独立的学科。在《穷查理宝典》书中,查理.芒格认为,事物...

37490
来自专栏SDNLAB

借助Intel最新芯片,FD.io数据包传输速度翻倍

暨本周Intel发布了可扩展Xeon芯片之后,开源快速数据项目(FD.io)宣布通过最新的Intel Xeon可扩展处理器实现双重性能的提升。 ? FD.io工...

35140
来自专栏向治洪

那些年我们一起用过的Hybrid App

Hybrid App现状分析 Web App 毫无疑问Web App就是成本最低,最快速地解决方案了。尤其是近两年非常流行的响应式设计,Web App市场提供了...

21480
来自专栏GuZhenYin

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

前言  - -,我又来了,今天废话不多说,我们直接来实现Web视频聊天. 采用的技术如下: HTML5 WebRTC SignalR2.2.0 localRes...

31650
来自专栏程序员互动联盟

【专业技术】 Linux下如何学习c语言?

引言   尽管 C 语言问世已近 30 年,但它的魅力仍未减退。C 语言继续吸引着众多的开发者,他们为了编写、移植或维护应用程序而必须学习新技能。   本文是为...

43160
来自专栏前端黑板报

全栈工程师权威指南

根据 Stack Overflow 2016年开发者调查显示,全栈工程师是最受欢迎的开发者职业。毫无疑问现在有许多在线或个人课程来帮助程序员成为全栈开发者,甚至...

240110
来自专栏IT大咖说

今日头条:iOS 架构设计杂谈

52330
来自专栏SEO

「SEO技术」14种搜索引擎优化技术详细解说

正如没有静止不动的河水,我们生命中的每一个时刻,都联系着过去与未来。唯有心中时时有着想要抵达的地方,才能顺着时间之流的力量,在不确定性中有所把握、有所坚持,一点...

18000

扫码关注云+社区

领取腾讯云代金券