Skip to content

zmecust/mutil-webrtc

Repository files navigation

mutil-webrtc

基于 WebRTC 的多人视频通话,解决视频卡顿和回音

演示地址

项目概述

  • 实现基于房间的多人(大于2人)webrtc 视频通话,在每两个对等端之间都建立一个连接,组成“全网状拓扑结构”
  • 配套博文:https://laravue.org/#/articles/27

部署要求

  • 安装 redis (需要用到 redis 发布订阅)
  • 安装 node > 6.0.0

安装

本地部署

  • 安装完之后,打开浏览器运行 localhost:3001

线上部署

  • Nginx 反向代理

线上环境修改 Room.vueWelcome.vue 中的 const socket = io.connect('https://yourdomain');

如果部署到线上环境,可以配置 Nginx 反向代理,并且配置 SSL 证书(WebRTC 必须要使用安全协议,如:https & wss) 如下所示:

server {
        listen 443 ssl;

        ssl_certificate '你的 SSL 证书地址';
        ssl_certificate_key '你的 SSL 证书地址';
        
        ssl_session_cache shared:SSL:50m;
        ssl_session_timeout 1d;
        ssl_session_tickets off;

        server_name '你的域名';

        # 反向代理到 node 服务
        location / {
                proxy_pass    http://127.0.0.1:3001;
                proxy_http_version 1.1;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection "upgrade";
                proxy_set_header Host $host;
        }
}
  • pm2 or forever 守护进程
npm i -g pm2
pm2 start server.js

OR

npm i -g forever
forever start server.js

说明

  • 线上环境部署需要配置 stun 服务,否则不同域之间不能直接通信,部署参考:https://laravue.org/#/articles/33
  • 如有任何疑问或者 bug,欢迎联系 root@laravue.org247281377@qq.com