本文摘自PHP中文网,作者黄舟,侵删。
目录
对SignalR不了解的人可以直接移步下面的目录
SignalR系列目录
前言
- -,我又来了,今天废话不多说,我们直接来实现Web视频聊天.
采用的技术如下:
HTML5 WebRTC
SignalR2.2.0
localResizeIMG3(前端图像压缩技术,开源)
效果如图(马赛克你懂的,Demo效果比较简陋):
正文
首先我们来看看前端的实现,主要是通过HTML5的WebRTC技术获取视频流 转换成图片 然后采用压缩后定时发送的技术给到SignalR服务端.
我们先来看看获取视频流的JS,文字我就不多解释了,大家直接看注释即可
1 2 3 4 5 6 7 8 9 10 11 12 13 | 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)
|
这样,我们就获取到了相关的数据(PS:获取到的图像大小约为4800个长度的字符串,压缩率0.1压缩后为2300个长度,自行根据带宽修改压缩率)
下面我们看看SignalR的实现代码(关键方法已经标黄):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | [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 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | // 这里是注册集线器调用的方法,和1.0不同的是需要chat.client后注册,1.0则不需要
var chat = $.connection.getMessage;
chat.client.broadcastMessage = function (name) {
// HTML编码的显示名称和消息。
var encodedMsg = $('< p />').text(name).html();
// 将消息添加到该页。
$('#messsagebox').append('< li >' + encodedMsg + '</ li >');
};
//获取图片数据,并实时显示
chat.client.showimage = function (data) {
if ($("#" + data.id).length<=0) {
var html = '< p style = "float: left; border: double" id = "p' + data.id + '" >\
< img id = "'+ data.id + '" width = "320" height = "240" >\
< br />\
< span >用户'+ data.id + '</ span >\
</ p >'
$("#contextp").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..
以上就是采用HTML5+SignalR2.0(.Net)实现原生Web视频的代码分享的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
HTML5音乐可视化视频教程的资源推荐
HTML5 webworkers防止浏览器假死的示例代码分享
HTML5中的常见错误用法
如何使用HTML5时钟实现(附代码)
HTML5中在可拖动元素或选取的文本放置在目标区域时触发的事件ondrop
HTML5中float属性造成的换行如何处理
HTML5播放视频教程
彻底理解css中视觉格式化模型(附示例)
从HTML5移动应用现状谈发展趋势的详细介绍
HTML5 虚拟键盘出现挡住输入框怎么办
更多相关阅读请进入《HTML5》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » 采用HTML5+SignalR2.0(.Net)实现原生Web视频的代码分享