采用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技能
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- CC攻击防御的一种方法
- 机器学习笔记之梯度下降算法原理讲解
- 使用OpenCV在Python中进行图像处理
- R语言对布丰投针(蒲丰投针)实验进行模拟和动态可视化生成GIF动画
- Shiny-R语言轻松开发交互式web应用
- SPSS中的等级线性模型Multilevel linear models研究整容手术数据
- Python花式表白
- Python中基于网格搜索算法优化的深度学习模型分析糖尿病数据
- WordPress运行内存不足的解决方式
- ggplot2 |legend参数设置,图形精雕细琢
- miRBase物种名缩写
- Python中基于网格搜索算法优化的深度学习模型分析糖尿病数据
- 在R语言中使用航空公司复杂网络对疫情进行建模
- R语言用关联规则和聚类模型挖掘处方数据探索药物配伍中的规律
- ggplot2|theme主题设置,详解绘图优化-“精雕细琢”