使用 WebRTC 构建简单的视频聊天室(1)

941 阅读2分钟

1、目的

  • 为啥要写这一篇? 因为最近 很多同学 询问关于 音频视频怎么处理firebase 又是什么? 能不能给我一个简单的 demo,帮我快速理解和搭建项目

2、简单介绍

  • 使用 WebRTC 在 Web 应用中发起视频通话
  • 使用 Cloud Firestore 向远程方发送信号
  • 简单来说,你可以搭建一个聊天室,进行 视频通话

3、运行条件

安装node + npm 版本建议 12 以上

4、创建项目

1.https://console.firebase.google.com/,点击“添加项目”,然后将 Firebase 项目命名为 FirebaseRTC
2.点击“创建项目”(Cloud Firestore)
3.  在 Firebase 控制台的“开发”部分,点击“数据库”。
4.  在 Cloud Firestore 窗格中点击**创建数据库**5.  选择**以测试模式开始**选项,然后在阅读有关安全规则的免责声明后点击“启用”

5、跑起来

1.去找个地址 拉下来  git clone git@github.com:huanhunmao/FirebaseRTC-Mark_fu-Demo.git
2.进入项目 cd FirebaseRTC
3.安装 npm -g install firebase-tools(mac + sudo)
4.查看是否成功 firebase --version
5.登陆 firebase login
6.关联项目 firebase use --add
7.运行本地服务器 firebase serve --only hosting
8.这个地址访问 http://localhost:5000

image.png

image.png

6、查看效果

实现功能

  • 开视频聊天窗口
  • 新建聊天房间

image.png

  • 加入聊天房间

image.png

  • 退出聊天房间

image.png

7、QA && 常见问题

1、跑了 firebase serve --only hosting 命令无效果 ?

UJPN4UMQQy.png

  • 这个 死活 跑不起来 解决方法 就是 跑这个命令 firebase use --add 指定 一下就好(不然会走很多弯路 !!!)

2、firebase login 失败 ?

85JAVaQPLa.png

  • 登陆失败 原因是 开了 VPN 解决方法 去VPN 控制台 看 端口号 然后 执行 命令 export http_proxy=http://localhost:端口号, 再执行 firebase login

3、更多问题欢迎留言和我交流,交给我吧,我来帮你解决

8、更多精彩

请访问

掘金首页

Github

B站

知乎

头条号

感谢支持,感谢点赞!!!