-
2020-12-21 15:28:56
开源janus 客户端 构建
- 膜拜一下大神 janus Qt的客户端
debug工程不能用webrtc的release库
- error LNK2038: 检测到“RuntimeLibrary”的不匹配项: 值“MD_DynamicRelease”不匹配值“MDd_DynamicDebug
- 这种问题,是因为我是debug工程,但是webrtc库我手头只有一个release的,换用prebuild最新的,可能是vs工具链不一致,链接出错
- 所以改为release工程了。
release 工程也能debug
- release下默认是不能debug的
- 参考这位大神
- 这些可以debug了。
大佬的qtopengl渲染
- start name register 挨个点击,服务端会对应应答
更多相关内容 -
基于webrtc开发的多人视频会议
2019-11-27 10:58:28基于webrtc开发的多人视频会议,信令服务器使用 java websocket, springboot架构。访问地址 https://IP/mcu.html -
webRTC多人视频会议室
2018-10-29 16:24:49基于webRTC和websocket简单实现多人视频会议功能,前端纯JS代码,后台JAVA代码,主要实现功能暂未考虑效率,测试4人视频会议延迟极低可控制在200毫秒內 -
WebRTC 开发实践:从一对一通话到多人会议
2020-02-19 14:07:44为了让初学者快速起步把 WebRTC demo 跑起来,我写了一个极其简单的 startup demo 项目,展示了如何基于 WebRTC API 实现一对一的视频通话。...本文则主要介绍如何从一对一...多人会议,每个 Client 是创建多个 Peer...为了让初学者快速起步把 WebRTC demo 跑起来,我写了一个极其简单的 startup demo 项目,展示了如何基于 WebRTC API 实现一对一的视频通话。该项目地址:https://github.com/Jhuster/RTCStartupDemo
本文则主要介绍如何从一对一通话升级到多人通话,即视频会议,其中涉及到如下几个问题:
多人会议,每个 Client 是创建多个 PeerConnection 还是只有一个 PeerConnection ? 多人会议,谁来发起 OFFER,谁来作为 ANSWER,如何把多个 Client 相互间的连接分别建立起来 ?
首先,我们用下面这一张图来看看两个 WebRTC Peer 之间是如何建立一对一通话链路的:
在一对一通话场景中,每个 Client 均创建有一个 PeerConnection 对象,由一方主动发 OFFER SDP,另一方则应答 ANSWER SDP,最后双方交换 ICE Candidate 从而完成通话链路的建立。如果要再加入一个人,其实也是一样的流程,假设新加入的人是 C,那么,只需要 C 分别跟 A 和 B 交换 SDP 和 Candidate 即可建立新的通话链路。C 加入后,谁来主动发送 OFFER 呢 ?常用的策略有 2 种:
每当有新的成员加入到房间后,房间内的每个人主动给新成员发 OFFER,并等待他回复 ANSWER 建立新的 PeerConnection 连接 每当有新的成员加入到房间后,新成员主动给房间的每个人发 OFFER,并等待 ANSWER 建立新的 PeerConnection 连接
当然,还有其他的策略,无非就是谁主动扮演 OFFER 发起者的角色触发整个建联过程而已。
如图所示,3 人会议,则每个人都会创建 2 个 PeerConnection 分别与其他两个人建立通话连接。我这里实现了一套 Web 端 3 人连麦会议的 demo 代码,完整地复现了上述场景和逻辑,大家有兴趣可以看一看:
https://github.com/Jhuster/RTCStartupDemo/tree/master/RTCClientDemo/Web/multiple
本文一直描述的是通过多 PeerConnection 的方案来实现多人会议,那么,是否也可以仅仅使用单个 PeerConnection 呢 ?答案是肯定的,不过这需要服务器端的参与,让多路流通过一个 PeerConnection 连接端口进行传输,到端上再利用 ***c 等信息提取和分离出来,整体来说要复杂很多,但是也是有不少好处的。
有一篇文章关于单 PeerConnection 和多 PeerConnection 的优劣分析,有兴趣的小伙伴可以看看,链接如下:
《WebRTC RTCPeerConnection. One to rule them all, or one per stream?》
简单来说,多 PeerConnection 会导致连接到 SFU 服务器的连接数量超多,对服务端的压力是比较大的;另外,多 PeerConnection 也比单 PeerConnection 要消耗更多的资源。而单 PeerConnection 虽然整个逻辑复杂,但是在上述这两点上还是有一些不错的优化的。
关于 WebRTC 如何从一对一通话到多人会议,就分享到这里了。
转载于:https://blog.51cto.com/ticktick/2348008
-
webrtc 安卓端多人视频会议
2021-04-06 16:22:31实现功能支持一对一语音和视频支持多对多语音和视频会议灵活替换 wss 信令服务器和 stun/turn 转发穿透服务器动态权限申请模块独立,代码清晰使用最新的 webrtc 源码切换摄像头、免提、开启静音、监听耳机插拔、系统... -
Mikogo-远程控制桌面共享多人会议演示电话-中文版.docx
2022-01-01 08:06:28Mikogo-远程控制桌面共享多人会议演示电话-中文版.docx -
RED5多人会议源码
2011-08-13 16:11:02RED5多人会议源码 基于FLEX RED5 red5 多人 会议 源码 -
1995guojing-meidiasoup-app:基于meidiasoup的开源实时互动应用,可用于在线教育,多人会议,互动游戏等
2021-05-07 21:58:17基于mediasoup开发实时互动应用项目,可用于在线教育,多人会议,互动游戏等。 快速上手 # clone the project git clone https://github.com/GuoJing1995/1995guojing-meidiasoup-app.git # install client ... -
MeetingWeb:webrtc vue项目,在线会议,多人视频
2021-05-22 05:44:44视频会议的前端 使用webrtc实现图像传输。 vue+elementui 功能 视频通话 语音通话 共享桌面 大屏预览 聊天室 管理员控制成员视频麦克风等 不限制人数(人多可能会卡) 预览图 主要代码 MeetingWeb\src\views\meeting里... -
Omnigraffle模板 (UCD Activities & Docs =>多人会议活动)
2017-08-18 15:46:48Omnigraffle模板,描述如题,需要自行下载(与我前面传的绝无重复,如有重复,请私信告知,重复一个,免费开放一个Omnigraffle 模板) -
【项目】基于TRTC的实时多人会议实现
2022-05-30 22:08:31最近项目中需要实现一个多人会议的功能。由于考虑到功能的复杂性,选择接入第三方平台实现。为了功能的稳定性,选取当前比较流行的 TRTC (Tencent Real-Time Communication,腾讯实时音视频)。 完成技术选型之后,...一、需求分析
最近项目中需要实现一个多人会议的功能。由于考虑到功能的复杂性,选择接入第三方平台实现。为了功能的稳定性,选取当前比较流行的 TRTC (Tencent Real-Time Communication,腾讯实时音视频)。
完成技术选型之后,我们需要了解该技术是如何实现和使用的。这一部分参考腾讯云对于 TRTC 的官方文档说明可以得知:
实时音视频 新手指引-文档中心-腾讯云-腾讯云 (tencent.com)
二、TRTC 的实现
TRTC 在使用的时候,主要是作为一个转发云平台,负责处理多端的音视频流数据,将实时的多人音视频信号转到腾讯云 TRTC 处理,再将远端的数据传送回各自的本地主机。
TRTC 的存在使得开发者只需要利用其提供的 SDK 就可以实现多人音视频即时通讯。
这个 SDK 的存在意义主要有两点:① 通过 SDK 可以访问到 TRTC 的特定云服务器;② 使用 SDK 进行 TRTC 云服务时,可以进行通讯处理和传输,这其中包括了音视频压缩,协议转换交互,状态控制推送等。将非常复杂的内部逻辑全部封装,并且提供多平台的支持,这就是 TRTC 使用 SDK 的意义。
TRTC 的 SDK调用流程时序/流程图:
通过这个时序图,我们可以很清楚地得知实现流程:① 加入房间。音视频即时通讯,通常都会有一个房间的抽象概念。只有知道用户所在的房间,才知道用户的音视频需要转发给哪些人,需要接收到来自哪些人的音视频信号。
② 发布本地流。我们加入房间后,需要给其他人发送自己的音视频信号,就需要本地主机采集到用户的音视频信号,并且以流的形式将信号发送给腾讯云进行处理。
③ 订阅远端流。既然有发布本地的音视频信号,同时我们还需要就受到该房间里其他人的音视频信号,所以我们需要订阅远端的音视频流,获取到该房间内的其他人的信号。
④ 取消发布本地流。这个流程对应于用户停止发布本地的音视频信号,代表用户即将推出房间。
⑤ 退出房间。退出房间这个步骤将会对应很多状态的改变,比如其他人发送的远端信号接收者列表,房间人数,用户状态等。同时也代表生命周期结束,SDK 应该停止采集本地流和订阅远端流。
总结
1、TRTC是用来实现实时音视频通信的云服务。
2、通过官方SDK调用TRTC云服务实现音视频通讯。
3、以房间为概念推送和接收音视频数据流。三、TRTC 的使用
根据项目所需,本次主要针对使用 Web 端的 TRTC 进行实现远程会议。
TRTC 的使用主要是针对前端项目中的使用,后端涉及的并不多。
前端项目
前端项目中需要的使用如下所示:
① 首先安装 TRTC 的 web 依赖。
npm install trtc-js-sdk --save
② 在所需的页面中导入依赖。
import TRTC from 'trtc-js-sdk'
③ 查询会议的房间ID。
this.$http("meeting/searchRoomId", "POST", data, true, resp => { if (resp.roomId === null) { this.$message({ message: "不存在的视频会议", type: "error", duration: 1200 }) } else { this.roomId = resp.roomId; } })
此处应该获取后端提供的房间 ID 。关于房间 ID ,TRTC 并没有给出非常严格的限制。具体关于 RoomId 的要求,可以参考:
为了简化使用,我们的 roomId 直接使用取值为 [1, 4294967294] 的整数。
④ 检查浏览器的支持。
// 检查当前浏览器是否支持在线视频会议 TRTC.checkSystemRequirements().then(checkResult => { if (!checkResult.result) { this.$alert("当前浏览器不支持在线视频会议", '提示信息', { confirmButtonText: '确定' }) } else { // ... } }
⑤ 获取用户签名。
// 发起请求,生成用户签名(进入视频会议才需要用户签名,不需要提前生成) 异步! _this.$http("meeting/searchMyUserSig", "GET", {}, false, resp => { if (resp.code === 200) { _this.appId = resp.appId; _this.userSig = resp.userSig; _this.userId = resp.userId } })
这一步骤向后端发起请求,获取用户签名。
⑥ 创建本地 Client 对象。
const client = TRTC.createClient({ mode: 'rtc', sdkAppId: _this.appId, userId: _this.userId + "", userSig: _this.userSig });
⑦ 订阅远端流。
// 远端流订阅成功事件 client.on('stream-subscribed', event => { let remoteStream = event.stream; let userId = remoteStream.getUserId(); // 找到视频墙中某个远程用户的格子,把其中用于显示视频的div,置顶覆盖用户信息 $('#' + userId).css({'z-index': 1}); // 把这个置顶的div中播放远端音视频讯号 remoteStream.play(userId + ""); })
⑧ 加入房间。
// 进入视频会议 client .join({ roomId: _this.roomId }) .then(() => { // 成功进入会议室,然后创建本地流 const localStream = TRTC.createStream({ userId: _this.userId + "", audio: true, video: true }); // 把本地流保存到模型层 _this.localStream = localStream; // 设置分辨率 localStream.setVideoProfile("480p"); // 把自己添加到上线用户列表中 _this.putUserList(_this, _this.userId); // 初始化本地音视频流 localStream .initialize() .then(() => { console.log("初始化本地音视频流成功"); // 视频墙中第一个格子中的视频div置顶 $('#localStream').css({'z-index': 1}); // 播放本地音视频流, 传入控件(dom)id localStream.play('localStream'); // 向远端用户推送本地流 client.publish(localStream) .then(() => { console.log("本地流发布成功"); }) .catch(error => { console.error("本地流发布失败" + error); }) }) .catch(error => { console.error("初始化本地音视频流失败" + error); }) }) // 进入视频会议失败 .catch(error => { console.error("进入房间失败" + error); })
⑨ 退出会议。
// 关闭视频会议 // 获取当前本地使用的流, 有可能是本地流或者共享流 let stream = this.getStream(); // 执行取消发布 _this.client.unpublish(stream).then(() => { // 执行退出 _this.client .leave() .then(() => { // 退出成功 console.log("成功退出会议室") // 关闭本地流或者共享流 stream.stop(); stream.close(); // 销毁TRTCClient对象 _this.client = null; }) .catch(error => { console.error("成功退出会议室失败" + error); }) })
后端项目
在前面的前端项目的使用中,后端主要提供了房间 ID 以及用户签名。为什么这两项需要后端项目提供?根据官方文档的说明:
其中 SDKAppID 用于标识您的应用,UserID 用于标识您的用户,而 UserSig 则是基于前两者计算出的安全签名,它由 HMAC SHA256 加密算法计算得出。只要攻击者不能伪造 UserSig,就无法盗用您的云服务流量。
① 生成用户签名。
计算 UserSig 的逻辑简述为:
//UserSig 计算公式,其中 secretkey 为计算 usersig 用的加密密钥 usersig = hmacsha256(secretkey, (userid + sdkappid + currtime + expire + base64(userid + sdkappid + currtime + expire)))
我们根据官方的 Demo 可以很轻易完成用户签名的生成。
tls-sig-api-v2-java/TLSSigAPIv2.java at master · tencentyun/tls-sig-api-v2-java (github.com)
根据官方代码,我们将 TRTC 的一些参数配置在 application.yml 文件中:
trtc: appid: 140XXXX # TRTC的APPID secretKey: 99b4XXXXX # TRTC的密钥 expire: 86400 # 用户签名的过期时间,一天
之后我们直接使用官方提供的方法,生成用户签名:
@Component public class TrtcUtil { @Value("${trtc.appid}") private int appId; @Value("${trtc.expire}") private int expire; @Value("${trtc.secretKey}") private String secretKey; public String genUserSig(String userId) { return GenTLSSignature(appId, userId, expire, null, secretKey); } private String GenTLSSignature(long sdkappid, String userId, long expire, byte[] userbuf, String priKeyContent) { if (StrUtil.isEmpty(priKeyContent)) { return ""; } long currTime = System.currentTimeMillis() / 1000; JSONObject sigDoc = new JSONObject(); sigDoc.set("TLS.ver", "2.0"); sigDoc.set("TLS.identifier", userId); sigDoc.set("TLS.sdkappid", sdkappid); sigDoc.set("TLS.expire", expire); sigDoc.set("TLS.time", currTime); String base64UserBuf = null; if (null != userbuf) { base64UserBuf = Base64.encode(userbuf); sigDoc.set("TLS.userbuf", base64UserBuf); } String sig = hmacsha256(sdkappid, userId, currTime, expire, priKeyContent, base64UserBuf); if (sig.length() == 0) { return ""; } sigDoc.set("TLS.sig", sig); Deflater compressor = new Deflater(); compressor.setInput(sigDoc.toString().getBytes(StandardCharsets.UTF_8)); compressor.finish(); byte[] compressedBytes = new byte[2048]; int compressedBytesLength = compressor.deflate(compressedBytes); compressor.end(); return new String(base64EncodeUrl(Arrays.copyOfRange(compressedBytes, 0, compressedBytesLength))); } private static String hmacsha256(long sdkappid, String userId, long currTime, long expire, String priKeyContent, String base64Userbuf) { String contentToBeSigned = "TLS.identifier:" + userId + "\n" + "TLS.sdkappid:" + sdkappid + "\n" + "TLS.time:" + currTime + "\n" + "TLS.expire:" + expire + "\n"; if (null != base64Userbuf) { contentToBeSigned += "TLS.userbuf:" + base64Userbuf + "\n"; } try { byte[] byteKey = priKeyContent.getBytes(StandardCharsets.UTF_8); Mac hmac = Mac.getInstance("HmacSHA256"); SecretKeySpec keySpec = new SecretKeySpec(byteKey, "HmacSHA256"); hmac.init(keySpec); byte[] byteSig = hmac.doFinal(contentToBeSigned.getBytes(StandardCharsets.UTF_8)); return Base64.encode(byteSig); } catch (NoSuchAlgorithmException | InvalidKeyException e) { return ""; } } private static byte[] base64EncodeUrl(byte[] input) { byte[] base64 = Base64.encode(input).getBytes(); for (int i = 0; i < base64.length; ++i) { switch (base64[i]) { case '+': base64[i] = '*'; break; case '/': base64[i] = '-'; break; case '=': base64[i] = '_'; break; default: break; } } return base64; } }
在这之后,我们只需要提供用户签名的数据接口即可。
② 生成 roomId 。
这个步骤中,我们直接根据数据表中会议的 ID ,生成一串长数字,存在 Redis 中。这样既方便了数据的获取,也保证了请求的速度。
redisUtil.setIfAbsent(meeting.getId(), RandomUtil.randomNumber(8), endTimeLong - startTimeLong + 120 * 60 * 1000, TimeUnit.MILLISECONDS);
前面两个参数为 Key-Value ,后面两个参数为有效时间。我们直接生成随机长度为 8 的数字,之后保存在缓存中,之后只需要提供对应的接口获取缓存中的数据即可。
四、总结
在使用前后端项目中描述的操作步骤之后,我们可以直接使用 TRTC 进行多人会议的实现。
参考文档列表:
tls-sig-api-v2-java/TLSSigAPIv2.java at master · tencentyun/tls-sig-api-v2-java (github.com)
什么是TRTC?TRTC是怎么实现的? - 云+社区 - 腾讯云 (tencent.com)
关于 TRTC (实时音视频通话模式)在我司的实践_B站-江辰的博客-CSDN博客
-
3d模型多人会议桌
2012-10-22 12:50:093dmax模型,版本3dmax8,格式3ds -
vue集成TRTC实现多人音视频聊天
2020-06-16 18:16:33这是vue集成trtc实现多人实时音视频的一个demo,包含退出房间功能。后面还将继续发布,利用websoket,实现邀请用户加入房间的功能,用户可以接受或者拒绝。在后面还有vue集成实时音视频、即时通讯、白板涂鸦功能的... -
腾讯云独家详解小程序多人视频通话
2021-03-29 17:50:37在微信小程序中搜索 腾讯视频云 可以加载到我们的演示用小程序,其中 多人音视频 功能可用于体验和测试多人音视频通话功能。出于 UI 美观和画面大小的考虑,Demo 中仅支持了最多四人的视频通话,您可以通过修改... -
浏览器视频聊天,多人视频聊天,webrtc,java
2018-03-01 20:04:20这个版本支持一对一聊天,多对多聊天,以及传送文件等功能, 源码地址:https://github.com/js1688/cat 会持续更新 ...也可以直接下载此文件,maven构建项目所以源码才几十KB而已 没用过maven的别污蔑我是骗分的 -
webrtc 安卓端多人视频会议的实现
2019-04-15 15:48:09简介:webrtc 安卓端多人视频会议的实现 更多:作者提 Bug官网 标签: 概述 meeting 是基于 webrtc 开发的一套可以进行单路或者多路语音、视频的系统,这里仅仅提供 demo,还有更多未知的东西等着大家来探索...webrtc_android
项目地址:ddssingsong/webrtc_android
简介:webrtc 安卓端多人视频会议的实现
标签:
概述
meeting 是基于 webrtc 开发的一套可以进行单路或者多路语音、视频的系统,这里仅仅提供 demo,还有更多未知的东西等着大家来探索
实现功能
- 支持一对一语音和视频
- 支持多对多语音和视频会议
- 灵活替换 wss 信令服务器和 stun/turn 转发穿透服务器
- 动态权限申请
- 模块独立,代码清晰
- 使用最新的 webrtc 源码
服务器搭建
服务器源码是基于 skyrtc 的代码进行重写实现的
源码地址:https://github.com/ddssingsong/webrtc_server.git (github)
搭建过程请看博客
https://blog.csdn.net/u011077027/article/details/86225524 (csdn)
使用 tips:
如果只使用移动端的话,服务器不配置 https 代理也是可以的哦
实现效果展示
-
单人通话
-
多人会话
实现过程探究
- webrtc 官方 demo 流程
- 本 demo 流程
- 自定义信令
借鉴
-
https://github.com/zengpeace/apprtcmobile (github)
apprtc 官方 demo,这个更新的官方 demo 还是比较新的
-
https://github.com/LingyuCoder/SkyRTC
服务端和网页端的实现基于此
共同探索
QQ 群名称:webrtc 技术交流群
QQ 群 号:601332720
加入群一起探讨 webrtc,分享好的开源项目
-
腾讯云TRTC 多人视频会议
2020-12-17 15:08:10当事人: 被申请人: 法官: {{ userNames }} {{ micFlag ? '关闭语音' : '打开语音' }} {{ videoFlag ? '关闭摄像头' : '打开摄像头' }} 发送调解协议 {{ ... '全体禁言' : '取消禁言' }} 退出会议 结束会议调解 -
基于腾讯云的多人视频会议的在线语音转写功能的实现
2021-06-22 13:57:343.打开微信开发者工具,打开之前腾讯云的多人音视频通话demo,在全局app.json中引入该插件 4.在tricroom页面的js文件中,在component组件外声明插件 5.在method方法中添加按下按钮与松开按钮的方法 7.松开按钮后... -
BS视频会议+webRTC demo.zip
2018-03-06 11:28:52java基与BS的视频会议客户和服务端源码.rar 上传了我本人测试通过的WebRTC Demo -
基于Webrtc的多人视频会议的简单实现
2017-08-15 17:40:26通过重写WEBRTC传输模块来实现一个简单的视频会议,效果如下图: 说明: 1、画面1、2、3都是其他手机传过来的图像,局域网内有点点卡顿,同时软解3路数据你懂的。 2、声音比较清晰,服务端没有做混音... -
Qt实现多人视频会议,支持PPT演示
2015-04-16 17:42:54奥尼凯德视频会议,仿QQ群视频,实现多人视频,多人语音,文字聊天,表情,共享PPT功能,自由发言,主持人控制发言,按F2发言三种语音模式,支持从网页跳转 -
网络会议之多人在线聊天
2012-04-02 18:47:40能进行多人在线音频聊天,界面美观;只要有一个合理的IP地址,就可以在 网上在线聊天了。 -
搭建简易多人在线视频会议系统
2020-12-09 14:28:12简介 可提供一台阿里云ECS服务器,指导搭建一个基于音视频通信服务的简易视频会议室。 背景信息 音视频通信: 音视频通信 RTC(Real-Time ...本场景为您提供了一份基于音视频通信服务的多人在线视频会议系统Demo代码 -
-
基于WebRTC的多人视频会议
2016-05-18 22:31:48分类: Web开发 ...基于WebRTC的多人视频会议 ...最近两周在调研和搭建基于WebRTC的多人视频会议系统。 目前已经搭建成功,可以在http://jitsi.shengbin.me/试用。 这个系统无需注册和登录, -
基于Webrtc和Janus的多人视频会议系统开发1--系统架构
2018-08-08 11:43:09正是基于这样的考虑,我们开始研发自研的连麦系统,作为技术方案来说,现今支持浏览器直连基本上已经是刚需,所以webrtc是必须要兼容的,所以技术方案设计上决定是以webrtc协议为基础,支持多人会议,完全从0开始做... -
浅谈多人音视频的传输架构
2021-12-08 01:54:58在实际的多人音视频通讯场景中,1 对 1 通讯只是诸多场景的一种。而在教育或者会议的场景中,更多是 1 对多或者是多对多通讯。综合目前多方通信方案来看,基本都是以下三种架构方案:Mesh ... -
快速实现android手机端多人视频会议直播(免费)
2018-11-01 17:01:50reechatsdk为所有基于互联网的实时通信需求用户提供了完整的解决方案,包括实时音频/视频互动、原生sdk低延迟广播,兼容第三方rtmp和hls直播方案 首先下载android版客户端sdk。... 解压压缩包,并把reechat.ja...