用 WebRTC 撸了一个在线视频会议应用

[binggg]

基于浏览器的能力 WebRTC 以及 腾讯云开发 CloudBase 能力构建而成的应用的在线视频会议应用，可以支持两人在线视频会议, 功能还不够完善, 还有许多可完善之处。

创建会议后可将会议地址发给他人, 或者在本机另起一浏览器窗口(未避免数据混乱, 可开隐私模式窗口, 或使用另一个浏览器)打开会议地址来体验

在线体验 Demo

应用体验地址: https://tcb-demo-10cf5b-1302484483.tcloudbaseapp.com/meeting-simple/

在线一键部署

点击下面按钮链接可以在线一键独立部署一个自己的在线视频会议应用

技术解析

本应用用到的能力、工具、框架有:

1. CloudBase Framework 用于项目开发和一键部署（https://github.com/TencentCloudBase/cloudbase-framework 欢迎点击 Github 页面给个 Star 🌟）
2. Simple Peer 流行的 WebRTC 库
3. 云开发-云函数, 包括云函数的定时调用
4. 云开发-数据库
5. 云开发-静态网站托管
6. React
7. Ant design

完整教程和源代码

https://github.com/oe/serverless-zoom-with-webrtc/tree/master/meeting-simple

[CallMeReznov]

服了.我点了楼主的 DEMO 当同意摄像头和麦克风的权限直接蓝屏.
为了复现,我重启以后又点了一下 DEMO 果然又蓝屏了....
重启，启动 windows 的相机，又蓝屏了。。
感谢楼主帮我发现机器故障！

[mengdodo]

@CallMeReznov 哈哈😄

[yutou527]

@CallMeReznov 😂😂😂😂😂😂😂

[vhysug01]

百度的 web 视频流挺好用的呀，干嘛非要自己撸一个

[binggg]

@CallMeReznov 哈哈哈，这个是使用的浏览器 API navigator.getUserMedia 来获取权限，（成功甩锅给浏览器～～）

[binggg]

@vhysug01 腾讯会议开会更靠谱，我们做这个 Demo 不是用来替代谁，可以理解是学习和利用新技术，毕竟自己做饭和去餐厅吃的感受是不一样的

[isa]

@CallMeReznov 换个浏览器或者升级下浏览器试试😂

[CallMeReznov]

@isa #7 硬件故障，不是 LZ 的锅。

[HuHui]

目前也在做这方面，还接入了电话，监控等国标设备

[binggg]

@HuHui 👍 👍 👍 很深入，电话这块是怎么做的

[KouShuiYu]

哎脸怎么这么大，真的胖了

[Wincer]

之前也做过类似的，用起来的时候 webrtc 总是需要设置 stun or turn 服务器，卡的很，后来就搁置了。

[HuHui]

@binggg SIP freeswitch

[18297601140]

@HuHui 老哥我想学习一下 我是做 android 这块 有一个家门口的公司要求会 SIP 和 WebRtc 不知道怎么入门

[binggg]

@2351988538 哈哈，差个美颜功能

[Exin]

我实现过无 stun 的 n 人视频，非常酸爽。推荐楼主试试

[Exin]

*无 relay

[binggg]

@Exin 哦？详细说说