webrtc第二篇 聊天室
聊天室模型不一样考虑的问题也不一样
1.websocket文本聊天
* step1 : 向聊天室所有用户(不包括该用户自己)发送当前用户上线信息。客户端用户栏回添加此用户
* step2 : 将该用户添加至连接池中
* step3 : 向该用户发送该聊天室所有用户列表
* 注:step1 和 step2 顺序颠倒时,会在客户端显示两个"自己"
A客户端向服务器发送消息,服务器向所有连接上的websocket客户端发送消息。
2.webrtc聊天室查看所有人音视频
A客户端已经加入聊天室,B客户端后加入。
B客户端
step1:B客户端加入后获取所有在线用户。
step2:向所有PeerConnection发送Offer类型信令
//向所有PeerConnection发送Offer类型信令
skyrtc.prototype.sendOffers = function() {
var i, m,
pc,
that = this,
pcCreateOfferCbGen = function(pc, socketId) {
return function(session_desc) {
pc.setLocalDescription(session_desc);
that.socket.send(JSON.stringify({
"eventName": "__offer",
"data": {
"sdp": session_desc,
"socketId": socketId
}
}));
};
},
pcCreateOfferErrorCb = function(error) {
console.log(error);
};
for (i = 0, m = this.connections.length; i < m; i++) {
pc = this.peerConnections[this.connections[i]];
pc.createOffer(pcCreateOfferCbGen(pc, this.connections[i]), pcCreateOfferErrorCb);
}
};
step3:接收到answer类型信令后将对方的session描述写入PeerConnection中
//接收到answer类型信令后将对方的session描述写入PeerConnection中
skyrtc.prototype.receiveAnswer = function(socketId, sdp) {
var pc = this.peerConnections[socketId];
pc.setRemoteDescription(new nativeRTCSessionDescription(sdp));
};
A客户端:
step1:接收到Offer类型信令后作为回应返回answer类型信令
//接收到Offer类型信令后作为回应返回answer类型信令
skyrtc.prototype.receiveOffer = function(socketId, sdp) {
var pc = this.peerConnections[socketId];
this.sendAnswer(socketId, sdp);
}; //发送answer类型信令
skyrtc.prototype.sendAnswer = function(socketId, sdp) {
var pc = this.peerConnections[socketId];
var that = this;
pc.setRemoteDescription(new nativeRTCSessionDescription(sdp));
pc.createAnswer(function(session_desc) {
pc.setLocalDescription(session_desc);
that.socket.send(JSON.stringify({
"eventName": "__answer",
"data": {
"socketId": socketId,
"sdp": session_desc
}
}));
}, function(error) {
console.log(error);
});
};
参考:
https://segmentfault.com/a/1190000000436544
webrtc第二篇 聊天室的更多相关文章
- 使用WebRTC搭建前端视频聊天室——信令篇
博客原文地址 建议看这篇之前先看一下使用WebRTC搭建前端视频聊天室——入门篇 如果需要搭建实例的话可以参照SkyRTC-demo:github地址 其中使用了两个库:SkyRTC(github地址 ...
- WebRTC搭建前端视频聊天室——信令篇
这篇文章讲述了WebRTC中所涉及的信令交换以及聊天室中的信令交换,主要内容来自WebRTC in the real world: STUN, TURN and signaling,我在这里提取出的一 ...
- 使用WebRTC搭建前端视频聊天室——点对点通信篇
WebRTC给我们带来了浏览器中的视频.音频聊天体验.但个人认为,它最实用的特性莫过于DataChannel——在浏览器之间建立一个点对点的数据通道.在DataChannel之前,浏览器到浏览器的数据 ...
- 使用WebRTC搭建前端视频聊天室——数据通道篇
本文翻译自WebRTC data channels 在两个浏览器中,为聊天.游戏.或是文件传输等需求发送信息是十分复杂的.通常情况下,我们需要建立一台服务器来转发数据,当然规模比较大的情况下,会扩展成 ...
- 使用WebRTC搭建前端视频聊天室——入门篇
http://segmentfault.com/a/1190000000436544 什么是WebRTC? 众所周知,浏览器本身不支持相互之间直接建立信道进行通信,都是通过服务器进行中转.比如现在有两 ...
- WebRTC搭建前端视频聊天室——数据通道篇
本文翻译自WebRTC data channels 在两个浏览器中,为聊天.游戏.或是文件传输等需求发送信息是十分复杂的.通常情况下,我们需要建立一台服务器来转发数据,当然规模比较大的情况下,会扩展成 ...
- WebRTC实现网页版多人视频聊天室
因为产品中要加入网页中网络会议的功能,这几天都在倒腾 WebRTC,现在分享下工作成果. 话说 WebRTC Real Time Communication 简称 RTC,是谷歌若干年前收购的一项技术 ...
- [Asp.net 开发系列之SignalR篇]专题三:使用SignalR实现聊天室的功能
一.引言 在前一篇文章中,我向大家介绍了如何实现实现端对端聊天的功能的,在这一篇文章中将像大家如何使用SignalR实现群聊这样的功能. 二.实现思路 要想实现群聊的功能,首先我们需要创建一个房间,然 ...
- 使用WebRTC搭建前端视频聊天室
在两个浏览器中,为聊天.游戏.或是文件传输等需求发送信息是十分复杂的.通常情况下,我们需要建立一台服务器来转发数据,当然规模比较大的情况下,会扩展成多个数据中心.这种情况下很容易出现很高的延迟,同时难 ...
随机推荐
- Beta版本冲刺第二天 12.6
一.站立式会议照片: 二.项目燃尽图: 三.项目进展: 成 员 昨天完成任务 今天完成任务 第三天冲刺要做任务 问题困难 心得体会 胡泽善 完成了"记住密码"的的逻辑以及BUG修改 ...
- HTML5系列四(特征检测、Modernizr.js的相关介绍)
Modernizr:一个HTML5特征检测库 Modernizr帮助我们检测浏览器是否实现了某个特征,如果实现了那么开发人员就可以充分利用这个特征做一些工作 Modernizr是自动运行的,无须调用诸 ...
- iOS - 基础面试知识
1.arc(automatic reference counting) OC对象被创建时引用计数从默认值0加1,当它被释放时候引用计数减1,引用计数减0时autorelease方法,销毁OC对象. 自 ...
- group by语句
- jquery 验证表单信息
/** * $().validate(json); * *rules:自定义规则 * *messages:提示信息 */ $(document).ready(function(){ $(". ...
- ADS1.2安装教程
工具/原料 ADS1.2 ADS1.2安装教程 1 在安装包内找到”Setup“,点击安装. 点击”Next“.然后进入License Agreement ,点击”Yes“. 点击了Yes之后,我们选 ...
- php 设计模式 例子
加载类:include("./Ren.class.php");include "./Ren.class.php"; require("./Ren.cl ...
- Java数据结构——双端链表
//================================================= // File Name : FirstLastList_demo //------------ ...
- C#----我对坐标系的理解和图形转动
目录: 设置图形的旋转 设置坐标轴的反向 图形的旋转 参考一个文章:http://www.bccn.net/Article/kfyy/vc/jszl/200601/3008.html ; 目标:让Dr ...
- ecshop后台【订单管理】
1.订单列表页,在‘确认’,‘无效’,’取消‘....增加一个选项’导出exl表格‘ a.增加html代码,order_list.htm <input name="print" ...