V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
binggg
V2EX  ›  程序员

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

  •  2
     
  •   binggg ·
    binggg · 2020-09-22 09:50:24 +08:00 · 4610 次点击
    这是一个创建于 1519 天前的主题,其中的信息可能已经有所发展或是发生改变。

    基于浏览器的能力 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

    18 条回复    2020-09-22 14:51:42 +08:00
    CallMeReznov
        1
    CallMeReznov  
       2020-09-22 10:01:22 +08:00   ❤️ 6
    服了.我点了楼主的 DEMO 当同意摄像头和麦克风的权限直接蓝屏.
    为了复现,我重启以后又点了一下 DEMO 果然又蓝屏了....
    重启,启动 windows 的相机,又蓝屏了。。
    感谢楼主帮我发现机器故障!
    mengdodo
        2
    mengdodo  
       2020-09-22 10:02:03 +08:00
    @CallMeReznov 哈哈😄
    yutou527
        3
    yutou527  
       2020-09-22 10:02:11 +08:00
    @CallMeReznov 😂😂😂😂😂😂😂
    vhysug01
        4
    vhysug01  
       2020-09-22 10:04:15 +08:00
    百度的 web 视频流挺好用的呀,干嘛非要自己撸一个
    binggg
        5
    binggg  
    OP
       2020-09-22 10:09:56 +08:00
    @CallMeReznov 哈哈哈,这个是使用的浏览器 API navigator.getUserMedia 来获取权限,(成功甩锅给浏览器~~)
    binggg
        6
    binggg  
    OP
       2020-09-22 10:11:34 +08:00
    @vhysug01 腾讯会议开会更靠谱,我们做这个 Demo 不是用来替代谁,可以理解是学习和利用新技术,毕竟自己做饭和去餐厅吃的感受是不一样的
    isa
        7
    isa  
       2020-09-22 10:37:50 +08:00
    @CallMeReznov 换个浏览器或者升级下浏览器试试😂
    CallMeReznov
        8
    CallMeReznov  
       2020-09-22 10:45:33 +08:00
    @isa #7 硬件故障,不是 LZ 的锅。
    HuHui
        9
    HuHui  
       2020-09-22 10:55:16 +08:00 via Android
    目前也在做这方面,还接入了电话,监控等国标设备
    binggg
        10
    binggg  
    OP
       2020-09-22 10:59:26 +08:00
    @HuHui 👍 👍 👍 很深入,电话这块是怎么做的
    KouShuiYu
        11
    KouShuiYu  
       2020-09-22 11:13:24 +08:00
    哎脸怎么这么大,真的胖了
    Wincer
        12
    Wincer  
       2020-09-22 11:17:56 +08:00 via Android
    之前也做过类似的,用起来的时候 webrtc 总是需要设置 stun or turn 服务器,卡的很,后来就搁置了。
    HuHui
        13
    HuHui  
       2020-09-22 11:23:35 +08:00 via Android
    @binggg SIP freeswitch
    18297601140
        14
    18297601140  
       2020-09-22 11:36:17 +08:00
    @HuHui 老哥我想学习一下 我是做 android 这块 有一个家门口的公司要求会 SIP 和 WebRtc 不知道怎么入门
    binggg
        15
    binggg  
    OP
       2020-09-22 14:46:27 +08:00
    @2351988538 哈哈,差个美颜功能
    Exin
        16
    Exin  
       2020-09-22 14:50:14 +08:00
    我实现过无 stun 的 n 人视频,非常酸爽。推荐楼主试试
    Exin
        17
    Exin  
       2020-09-22 14:50:49 +08:00
    *无 relay
    binggg
        18
    binggg  
    OP
       2020-09-22 14:51:42 +08:00
    @Exin 哦?详细说说
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1806 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 16:39 · PVG 00:39 · LAX 08:39 · JFK 11:39
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.